Updated survey forms

app/Http/Controllers/GuestController.php

@@ -142,6 +142,28 @@ class GuestController extends Controller
         
     }
 
+    public function viewSurveyFormAutoSubmit(Request $request, $accessKey){
+        $survey = Survey::where('access_key', $accessKey)->where('is_accessible_to_target', true)->where('is_active', true)->first();
+        if(!$survey) return $this->fail('Invalid survey access key!');
+
+        $formData = [
+            'uid' => $survey->uid,
+            'surveyDataJson' => $request->get('dataJson'),
+        ];
+        $url = '/survey/submitData';
+        $response = $this->calljava($request, $url, $formData);        
+
+        if($response['success']){
+            return $this->pass();
+        }
+        return $this->fail($response['message']);
+    }
+
+    public function viewSurveyFormGetData(Request $request, $accessKey){
+        $survey = Survey::where('access_key', $accessKey)->where('is_accessible_to_target', true)->where('is_active', true)->first();
+        return $this->pass($survey);
+    }
+
     public function surveyTemplatePreview(Request $request, $internalName){
         $surveyService = new SurveyService($internalName);
         $defaultHtml = $surveyService->defaultHTML;

app/Http/Controllers/PatientController.php

@@ -861,7 +861,7 @@ class PatientController extends Controller
             'entityType' => $entityType,
             'entityUid' => $entityUid,
             'surveyHTML' => $defaultHtml,
-            'surveyData' => json_encode($initializedData)
+            'surveyDataJSON' => json_encode($initializedData)
         ];
 
         $response = $this->callJavaApi('/survey/create', $data);
@@ -869,16 +869,7 @@ class PatientController extends Controller
         if(!$response['success']){
             return $this->fail(@$response['message']);
         }
-
-        //To be replace by java
-        $surveyUid = $response['data'];
-        $survey = Survey::where('uid', $surveyUid)->first();
-        $survey->surveyhtml = $data['surveyHTML'];
-        $survey->survey_data = $data['surveyData'];
-
-        $survey->save();
         return $this->pass();
-
     }
 
     public function getEntityRecords(Request $request, Client $patient)

package.json

@@ -21,9 +21,11 @@
     },
     "dependencies": {
         "bootstrap": "^4.5.0",
+        "express": "^4.18.2",
+        "http": "^0.0.1-security",
         "jquery": "^3.5.1",
         "popper": "^1.0.1",
         "popper.js": "^1.16.1",
-        "soundasleep/html2text": "~1.1"
+        "socket.io": "^4.7.4"
     }
 }

resources/views/app/patient/surveys/forms/form.blade.php

@@ -24,15 +24,68 @@
   var surveyFormComponent = new Vue({
     el: '#surveyForm',
     data: {
-      form: <?= json_encode(json_decode($survey->survey_data ?? '{}')) ?>
+      socketSessionID: "{{ time() }}",
+      surveyAccessKey: "{{ @$survey->access_key }}",
+
+      form: <?= json_encode(json_decode($survey->survey_data ?? '{}')) ?>,
+      socketIo: null,
     },
     methods: {
+      onFormFieldChange: function(){
+        var self = this;
+        self.socketIo = io("http://localhost:3333");
+        self.watchInputFields();
+      },
+      watchInputFields: function(){
+        var self = this;
+        var form = $('#surveyForm');
+        form.find('input, select, textarea').on('change', function(){
+          self.autosaveChanges();
+        });
+      },
+      autosaveChanges: function(){
+        var self = this;
+        var url = "{{ @$survey->access_key ? route('view-survey-form-auto-submit', @$survey->access_key) : '' }}";
+        $.post(url, { dataJson: JSON.stringify(self.form) }, function(response){
+          if(response.success){
+            self.socketIo.emit('SURVEY_DATA_CHANGED_BY_SESSION', {socketSessionID: self.socketSessionID, surveyAccessKey: self.surveyAccessKey});
+          }else{
+            toastr.error(response.message);
+          }
+        }, 'json');
+      },
+      onSurveyDataChange: function(){
+        var self = this;
+        self.socketIo.on('UPDATE_SURVEY_DATA_CHANGED_BY_SESSION', (data) => {
+          if(data.socketSessionID === self.socketSessionID) return;
+          if(data.surveyAccessKey !== self.surveyAccessKey) return;
+          self.updateUi();
+        });
+      },
+      updateUi: function(){
+        var self = this;
+        var url = "{{ @$survey->access_key ? route('view-survey-form-get-data', @$survey->access_key) : '' }}";
+        $.get(url, {}, function(response){
+          if(response.success){
+            const data = JSON.parse(response.data.survey_data);
+            self.form = data;
+          }
+        }, 'json');
+
+      },
       init: function(){
-        console.log('Default Data: ', this.form);
+        this.onFormFieldChange();
+        this.onSurveyDataChange();
       }
     },
     mounted: function(){
       this.init();
+    },
+    updated: function(){
+      var self = this;
+      self.$nextTick(function(){
+       self.watchInputFields();
+      });
     }
   });
 </script>

resources/views/app/patient/surveys/forms/templates/sleep.blade.php

@@ -18,6 +18,10 @@
         </div>
     </div>
     <div class="col-md-12">
+        <label><input type="radio" v-model="form.i_love_to_sleep" value="YES" /> I love sleeping</label>
+        <label><input type="radio" v-model="form.i_love_to_sleep" value="No" /> I no longer sleep these days</label>
+    </div>
+    <div v-if="form.i_love_to_sleep === 'YES'" class="col-md-12">
         <div class="form-group">
             <label>Explain your sleep issue</label>
             <textarea class="form-control" v-model="form.description"></textarea>

resources/views/app/patient/surveys/partials/create.blade.php

@@ -19,7 +19,7 @@
             </div>
              <div id="previewSurveyDefaultHtml" class="form-group d-none">
                 <label class="font-weight-bold">Template Preview</label>
-                <div class="border p-2 d-flex justify-content-center"></div>
+                <div class="border p-2 d-flex justify-content-center bg-light"></div>
             </div>
 
         </div>

resources/views/app/patient/surveys/partials/form-layout.blade.php

@@ -58,6 +58,8 @@
         });
     </script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.4/socket.io.js" integrity="sha512-tE1z+95+lMCGwy+9PnKgUSIeHhvioC9lMlI7rLWU0Ps3XTdjRygLcy4mLuL0JAoK4TLdQEyP0yOl/9dMOqpH/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     @yield('head')
 </head>
 

routes/web.php

@@ -30,6 +30,8 @@ use App\Http\Controllers\RdController;
  */
 Route::get('survey/{accessKey}', 'GuestController@viewSurveyForm')->name('view-survey-form');
 Route::post('survey/{accessKey}/submit', 'GuestController@viewSurveyFormSubmit')->name('view-survey-form-submit');
+Route::post('survey/{accessKey}/auto-submit', 'GuestController@viewSurveyFormAutoSubmit')->name('view-survey-form-auto-submit');
+Route::get('survey/{accessKey}/get-data', 'GuestController@viewSurveyFormGetData')->name('view-survey-form-get-data');
 Route::get('survey/template/preview/{internalName}', 'GuestController@surveyTemplatePreview')->name('survey-template-preview');
 Route::get('login', 'LoginController@showLoginForm')->name('login');
 Route::post('login', 'LoginController@login');

socket-io-server.js

@@ -0,0 +1,21 @@
+const express = require('express');
+const { createServer } = require('node:http');
+const { Server } = require('socket.io');
+
+const app = express();
+const server = createServer(app);
+const io = new Server(server, {
+  cors: {
+   origin: "https://care.leadershiphealth.local"
+}});
+const port = 3333;
+
+io.on('connection', (socket) => {
+  socket.on('SURVEY_DATA_CHANGED_BY_SESSION', (sessionID) => {
+    io.sockets.emit('UPDATE_SURVEY_DATA_CHANGED_BY_SESSION', sessionID);
+  });
+});
+
+server.listen(port, () => {
+  console.log(`server running at http://localhost:${port}`);
+});