rewrite for updated backend new config structure.

photobooth-app · May 2, 2024 · c8182b2 · c8182b2
1 parent ae718fb
commit c8182b2
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
     "@intlify/unplugin-vue-i18n": "^3.0.1",
-    "@quasar/app-vite": "^2.0.0-beta.8",
+    "@quasar/app-vite": "^2.0.0-beta.11",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.5.9",
     "@typescript-eslint/eslint-plugin": "^6.6.0",

diff --git a/src/App.vue b/src/App.vue
@@ -16,7 +16,7 @@ import { useMediacollectionStore } from 'stores/mediacollection-store.js';
 import { useRouter } from 'vue-router';
 import ConnectionOverlay from './components/ConnectionOverlay.vue';
 import { remoteProcedureCall } from './util/fetch_api.js';
-
+import { get } from 'lodash';
 export default defineComponent({
   name: 'App',
   components: { ConnectionOverlay },
@@ -79,8 +79,7 @@ export default defineComponent({
 
       // for now on app start we send an abort to the backend.
       // could be improved to actually handle the state the machine is in and send ui to according state
-      // remoteProcedureCall("/api/processing/cmd/abort");
-
+      // remoteProcedureCall("/api/actions/abort");
       console.log('installing listener for keyboard input');
       window.addEventListener('keyup', this.keyUpHandler);
     },
@@ -177,37 +176,19 @@ export default defineComponent({
         return;
       }
 
-      switch (e.key) {
-        case this.configurationStore.getConfigElement('hardwareinputoutput.keyboard_input_keycode_takepic'): {
-          console.log('browser keyboard trigger keyboard_input_keycode_takepic');
-          remoteProcedureCall('/api/processing/chose/1pic');
-          break;
-        }
-        case this.configurationStore.getConfigElement('hardwareinputoutput.keyboard_input_keycode_takecollage'): {
-          console.log('browser keyboard trigger keyboard_input_keycode_takecollage');
-          remoteProcedureCall('/api/processing/chose/collage');
-          break;
-        }
-        case this.configurationStore.getConfigElement('hardwareinputoutput.keyboard_input_keycode_takeanimation'): {
-          console.log('browser keyboard trigger keyboard_input_keycode_takeanimation');
-          remoteProcedureCall('/api/processing/chose/animation');
-          break;
-        }
-        case this.configurationStore.getConfigElement('hardwareinputoutput.keyboard_input_keycode_takevideo'): {
-          console.log('browser keyboard trigger keyboard_input_keycode_takevideo');
-          remoteProcedureCall('/api/processing/chose/video');
-          break;
-        }
-        case this.configurationStore.getConfigElement('hardwareinputoutput.keyboard_input_keycode_print_recent_item'): {
-          console.log('browser keyboard trigger keyboard_input_keycode_print_recent_item');
-          remoteProcedureCall('/api/print/latest');
-          break;
-        }
-
-        default: {
-          console.info(`key "${e.key}" not assigned`);
-        }
-      }
+      const action_collections = ['actions.image', 'actions.collage', 'actions.animation', 'actions.video', 'print.print'];
+      action_collections.forEach((action_collection) => {
+        const action_config = this.configurationStore.getConfigElement(action_collection, []);
+        action_config.forEach((action, index) => {
+          const keycode = get(action, 'trigger.keyboard_trigger_actions.keycode');
+          if (keycode == e.key) {
+            remoteProcedureCall(`/api/${action_collection.replace('.', '/')}/${index}`);
+            return;
+          }
+        });
+      });
+
+      console.warn(`key "${e.key}" not assigned`);
     },
   },
 });

diff --git a/src/components/GalleryImageDetail.vue b/src/components/GalleryImageDetail.vue
@@ -422,7 +422,7 @@ export default {
         });
     },
     printItem(id) {
-      fetch(`/api/print/item/${id}`, {})
+      fetch(`/api/print/${id}/0`, {}) // TODO: print 0 index hardcoded for now!
         .then((response) => {
           if (!response.ok && !(response.status == 425 || response.status == 405)) {
             // throw if not blocked or not disabled because notification events are sent separately for this err.

diff --git a/src/components/form/array/ArrayListElement.vue b/src/components/form/array/ArrayListElement.vue
@@ -3,7 +3,7 @@
     <template #header>
       <q-item-section>
         <div class="">{{ label }}</div>
-        <!--<div class="">sublabel</div>-->
+        <div class="">{{ description }}</div>
       </q-item-section>
 
       <q-item-section side>

diff --git a/src/components/form/array/ArrayListRenderer.vue b/src/components/form/array/ArrayListRenderer.vue
@@ -29,14 +29,18 @@
       {{ control.translations.noDataMessage }}
     </div>
   </q-card>
-  <q-btn
-    round
-    color="primary"
-    icon="add"
-    :class="styles.arrayList.addButton"
-    :disabled="!control.enabled || (appliedOptions.restrict && maxItemsReached)"
-    @click="addButtonClick"
-  />
+  <div align="right">
+    <q-btn
+      rounded
+      unelevated
+      color="grey"
+      icon-right="add"
+      label="Add"
+      :class="styles.arrayList.addButton"
+      :disabled="!control.enabled || (appliedOptions.restrict && maxItemsReached)"
+      @click="addButtonClick"
+    />
+  </div>
 </template>
 
 <script lang="ts">

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
@@ -214,19 +214,19 @@ export default defineComponent({
   watch: {},
   methods: {
     takePicture() {
-      remoteProcedureCall('/api/processing/chose/1pic');
+      remoteProcedureCall('/api/actions/image/0');
     },
     takeCollage() {
-      remoteProcedureCall('/api/processing/chose/collage');
+      remoteProcedureCall('/api/actions/collage/0');
     },
     takeAnimation() {
-      remoteProcedureCall('/api/processing/chose/animation');
+      remoteProcedureCall('/api/actions/animation/0');
     },
     takeVideo() {
-      remoteProcedureCall('/api/processing/chose/video');
+      remoteProcedureCall('/api/actions/video/0');
     },
     stopRecordingVideo() {
-      remoteProcedureCall('/api/processing/cmd/stop');
+      remoteProcedureCall('/api/actions/stop');
     },
   },
 });

diff --git a/src/pages/ItemApprovalPage.vue b/src/pages/ItemApprovalPage.vue
@@ -79,17 +79,17 @@ export default {
 
   methods: {
     userConfirm() {
-      remoteProcedureCall('/api/processing/cmd/confirm');
+      remoteProcedureCall('/api/actions/confirm');
       this.$router.push('/');
     },
     userReject() {
-      remoteProcedureCall('/api/processing/cmd/reject');
+      remoteProcedureCall('/api/actions/reject');
       this.$router.push('/');
     },
     userAbort() {
       // closing the window that was meant to use for approval
       // need to inform the statemachine to reset
-      remoteProcedureCall('/api/processing/cmd/abort');
+      remoteProcedureCall('/api/actions/abort');
       this.$router.push('/');
     },
   },