move configuration to a dedicated store and add wrapper for elements …

…used in UI with defaults to fail safe.
photobooth-app · Apr 23, 2024 · 7fd5f72 · 7fd5f72
1 parent df23236
commit 7fd5f72
Show file tree

Hide file tree

Showing 13 changed files with 304 additions and 342 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -11,7 +11,7 @@
 import { defineComponent, ref } from 'vue';
 import { useMainStore } from 'stores/main-store.js';
 import { useStateStore } from 'stores/state-store.js';
-import { useUiSettingsStore } from 'stores/ui-settings-store.js';
+import { useConfigurationStore } from 'stores/configuration-store.ts';
 import { useMediacollectionStore } from 'stores/mediacollection-store.js';
 import { useRouter } from 'vue-router';
 import ConnectionOverlay from './components/ConnectionOverlay.vue';
@@ -23,14 +23,14 @@ export default defineComponent({
   setup() {
     const store = useMainStore();
     const stateStore = useStateStore();
-    const uiSettingsStore = useUiSettingsStore();
+    const configurationStore = useConfigurationStore();
     const mediacollectionStore = useMediacollectionStore();
     const router = useRouter();
     const connected = ref(false);
     const lineEstablished = ref(false);
 
     //TODO: need to make app wait until fully init?
-    console.log(uiSettingsStore.isLoaded);
+    console.log(configurationStore.isLoaded);
 
     setInterval(function () {
       const timeoutConnected = 2000;
@@ -43,7 +43,7 @@ export default defineComponent({
       router,
       store,
       stateStore,
-      uiSettingsStore,
+      configurationStore,
       mediacollectionStore,
       ConnectionOverlay,
       remoteProcedureCall,
@@ -61,27 +61,28 @@ export default defineComponent({
 
   async created() {
     console.log('app created, waiting for stores to init first dataset');
-    this.init();
+    await this.init();
     console.log('data initialization finished');
-
-    window.addEventListener('keyup', this.keyUpHandler);
   },
   unmounted() {
     window.removeEventListener('keyup', this.keyUpHandler);
   },
   methods: {
     async init() {
-      this.uiSettingsStore.initStore();
+      this.configurationStore.initStore();
       this.mediacollectionStore.initStore();
 
-      await this.until(() => this.uiSettingsStore.isLoaded == true);
+      await this.until(() => this.configurationStore.isLoaded == true);
       await this.until(() => this.mediacollectionStore.isLoaded == true);
 
       this.initSseClient();
 
       // 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");
+
+      console.log('installing listener for keyboard input');
+      window.addEventListener('keyup', this.keyUpHandler);
     },
 
     until(conditionFunction) {
@@ -171,38 +172,40 @@ export default defineComponent({
         });
     },
     keyUpHandler(e) {
-      // Your handler code here
-      if (this.uiSettingsStore.uiSettings.keyboard_input_enabled) {
-        switch (e.key) {
-          case this.uiSettingsStore.uiSettings.keyboard_input_keycode_takepic: {
-            console.log('browser keyboard trigger 1pic');
-            remoteProcedureCall('/api/processing/chose/1pic');
-            break;
-          }
-          case this.uiSettingsStore.uiSettings.keyboard_input_keycode_takecollage: {
-            console.log('browser keyboard trigger 1pic');
-            remoteProcedureCall('/api/processing/chose/collage');
-            break;
-          }
-          case this.uiSettingsStore.uiSettings.keyboard_input_keycode_takeanimation: {
-            console.log('browser keyboard trigger 1pic');
-            remoteProcedureCall('/api/processing/chose/animation');
-            break;
-          }
-          case this.uiSettingsStore.uiSettings.keyboard_input_keycode_takevideo: {
-            console.log('browser keyboard trigger 1pic');
-            remoteProcedureCall('/api/processing/chose/video');
-            break;
-          }
-          case this.uiSettingsStore.uiSettings.keyboard_input_keycode_print_recent_item: {
-            console.log('browser keyboard trigger print latest');
-            remoteProcedureCall('/api/print/latest');
-            break;
-          }
+      if (!this.configurationStore.getConfigElement('hardwareinputoutput.keyboard_input_enabled', false)) {
+        console.log('keyboard input is disabled, to use keyboard input enable it in the configuration and reload the page.');
+        return;
+      }
 
-          default: {
-            console.info(`key "${e.key}" not assigned`);
-          }
+      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`);
         }
       }
     },

diff --git a/src/components/GalleryImageDetail.vue b/src/components/GalleryImageDetail.vue
@@ -7,7 +7,7 @@
         <q-space />
 
         <q-btn
-          v-if="uiSettingsStore.uiSettings.gallery_show_delete || singleItemView"
+          v-if="configurationStore.getConfigElement('uisettings.gallery_show_delete', false) || singleItemView"
           flat
           class="q-mr-sm"
           icon="delete"
@@ -38,7 +38,7 @@
         </q-dialog>
 
         <q-btn
-          v-if="uiSettingsStore.uiSettings.gallery_show_download"
+          v-if="configurationStore.getConfigElement('uisettings.gallery_show_download', false)"
           flat
           class="q-mr-sm"
           icon="download"
@@ -50,7 +50,7 @@
           "
         />
         <q-btn
-          v-if="uiSettingsStore.uiSettings.gallery_show_print"
+          v-if="configurationStore.getConfigElement('uisettings.gallery_show_print', false)"
           flat
           class="q-mr-sm"
           icon="print"
@@ -59,7 +59,10 @@
           @click="printItem(currentSlideId)"
         />
         <q-btn
-          v-if="uiSettingsStore.uiSettings.gallery_show_filter && uiSettingsStore.uiSettings.gallery_filter_userselectable.length > 0"
+          v-if="
+            configurationStore.getConfigElement('uisettings.gallery_show_filter', false) &&
+            configurationStore.getConfigElement('uisettings.gallery_filter_userselectable', []).length > 0
+          "
           flat
           class="q-mr-sm"
           icon="filter"
@@ -99,14 +102,18 @@
     </q-header>
 
     <q-drawer
-      v-if="uiSettingsStore.uiSettings.gallery_show_filter && getFilterAvailable(itemRepository[currentSlideIndex]['media_type']) && showToolbar"
+      v-if="
+        configurationStore.getConfigElement('uisettings.gallery_show_filter', false) &&
+        getFilterAvailable(itemRepository[currentSlideIndex]['media_type']) &&
+        showToolbar
+      "
       id="gallery-drawer-filters"
       v-model="rightDrawerOpen"
       class="q-pa-sm"
       side="right"
       overlay
     >
-      <q-card v-for="filter in uiSettingsStore.uiSettings.gallery_filter_userselectable" :key="filter" class="q-mb-sm">
+      <q-card v-for="filter in configurationStore.getConfigElement('uisettings.gallery_filter_userselectable', [])" :key="filter" class="q-mb-sm">
         <q-card-section class="q-pa-sm">
           <q-img
             class="rounded-borders"
@@ -209,7 +216,11 @@
         </q-carousel>
       </div>
 
-      <q-page-sticky v-if="uiSettingsStore.uiSettings.gallery_show_qrcode && showToolbar" position="top-right" :offset="[30, 30]">
+      <q-page-sticky
+        v-if="configurationStore.getConfigElement('uisettings.gallery_show_qrcode', false) && showToolbar"
+        position="top-right"
+        :offset="[30, 30]"
+      >
         <div>
           <vue-qrcode
             type="image/png"
@@ -231,7 +242,7 @@
 <script>
 import VueQrcode from 'vue-qrcode';
 import { ref } from 'vue';
-import { useUiSettingsStore } from '../stores/ui-settings-store.js';
+import { useConfigurationStore } from '../stores/configuration-store.ts';
 import { openURL } from 'quasar';
 
 export default {
@@ -284,12 +295,12 @@ export default {
   },
   emits: ['closeEvent'],
   setup() {
-    const uiSettingsStore = useUiSettingsStore();
+    const configurationStore = useConfigurationStore();
     const rightDrawerOpen = ref(false);
 
     return {
       // you can return the whole store instance to use it in the template
-      uiSettingsStore,
+      configurationStore,
       openURL,
       fabRight: ref(false),
       currentSlideId: ref(''),
@@ -445,7 +456,7 @@ export default {
       this.remainingSecondsNormalized = 0;
     },
     startTimer() {
-      var duration = this.uiSettingsStore.uiSettings['AUTOCLOSE_NEW_ITEM_ARRIVED'];
+      var duration = this.configurationStore.getConfigElement('uisettings.AUTOCLOSE_NEW_ITEM_ARRIVED', 0);
       console.log(`starting newitemarrived timer, duration=${duration}`);
       this.remainingSeconds = duration;
 

diff --git a/src/css/app.scss b/src/css/app.scss
@@ -17,13 +17,10 @@ body {
   pointer-events: none;
 }
 #preview-stream {
-  background-size: cover;
+  background-size: contain; //cover
   background-repeat: no-repeat;
   background-position: center center;
 }
-#preview-stream.countdowncounting {
-  background-size: contain;
-}
 
 .action-button {
   font-size: 1.6rem;

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -5,9 +5,9 @@
 
       <!-- auto-start slideshow after timeout -->
       <RouteAfterTimeout
-        v-if="uiSettingsStore.uiSettings.show_automatic_slideshow_timeout > 0"
+        v-if="configurationStore.getConfigElement('uisettings.show_automatic_slideshow_timeout', 0) > 0"
         route="/slideshow/random"
-        :timeout-ms="uiSettingsStore.uiSettings.show_automatic_slideshow_timeout * 1000"
+        :timeout-ms="configurationStore.getConfigElement('uisettings.show_automatic_slideshow_timeout', 60) * 1000"
         :warning-message="$t('MSG_WARN_BEFORE_AUTO_SLIDESHOW')"
       ></RouteAfterTimeout>
     </q-page-container>
@@ -17,7 +17,7 @@
 <script>
 import { defineComponent } from 'vue';
 import { useStateStore } from '../stores/state-store.js';
-import { useUiSettingsStore } from '../stores/ui-settings-store.js';
+import { useConfigurationStore } from '../stores/configuration-store.ts';
 import { useRouter } from 'vue-router';
 import RouteAfterTimeout from 'src/components/RouteAfterTimeout.vue';
 
@@ -27,7 +27,7 @@ export default defineComponent({
   components: { RouteAfterTimeout },
   setup() {
     const stateStore = useStateStore();
-    const uiSettingsStore = useUiSettingsStore();
+    const configurationStore = useConfigurationStore();
     const router = useRouter();
 
     // watch state to force router to "/" if a capture is triggered
@@ -48,7 +48,7 @@ export default defineComponent({
 
     return {
       // you can return the whole store instance to use it in the template
-      uiSettingsStore,
+      configurationStore,
     };
   },
   computed: {},

diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
@@ -158,19 +158,14 @@
 
 <script>
 import { defineComponent, ref } from 'vue';
-import { useMainStore } from '../stores/main-store.js';
-import { remoteProcedureCall } from '../util/fetch_api.js';
+import { remoteProcedureCall } from '../util/fetch_api';
 import LanguageSwitcher from '../components/LanguageSwitcher.vue';
 
 export default defineComponent({
   name: 'MainLayout',
   components: { LanguageSwitcher },
   setup() {
-    const store = useMainStore();
-
     return {
-      // you can return the whole store instance to use it in the template
-      store,
       remoteProcedureCall,
       confirm_reboot: ref(false),
       confirm_shutdown: ref(false),