whattheduck: Disable more things on offline mode

ducksmanager · Jul 9, 2024 · 1d127ea · 1d127ea
1 parent a9888e9
commit 1d127ea
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/apps/whattheduck/src/components/List.vue b/apps/whattheduck/src/components/List.vue
@@ -113,25 +113,20 @@ const {
   coverId: { services: coverIdServices },
 } = injectLocal(dmSocketInjectionKey)!;
 
-const cameraWidth = parseInt(String(window.screen.width * 0.5));
-const cameraHeight = parseInt(String((cameraWidth * 30) / 21));
-const cameraX = parseInt(String(cameraWidth / 2));
-const cameraY = 150 + parseInt(String(cameraHeight / 2));
-
 const cameraPreviewElementId = 'camera-preview';
 const { takePhoto } = useCoverSearch(useRouter(), coverIdServices);
 const { isCameraPreviewShown, filterText, selectedIssuenumbers, currentNavigationItem, publicationcode } =
   storeToRefs(app());
 
-watch(isCameraPreviewShown, () => {
+watch(isCameraPreviewShown, async () => {
   if (isCameraPreviewShown.value) {
+    await nextTick();
+    const cameraPreviewElementBoundingRect = document.getElementById('camera-preview')!.getBoundingClientRect();
+
     const cameraPreviewOptions: CameraPreviewOptions = {
       parent: cameraPreviewElementId,
       position: 'rear',
-      width: cameraWidth,
-      height: cameraHeight,
-      x: cameraX,
-      y: cameraY,
+      ...cameraPreviewElementBoundingRect,
     };
     CameraPreview.start(cameraPreviewOptions);
   } else {

diff --git a/apps/whattheduck/src/components/NavigationDrawer.vue b/apps/whattheduck/src/components/NavigationDrawer.vue
@@ -21,6 +21,7 @@
             <ion-item
               router-direction="root"
               :router-link="p.url"
+              :disabled="p.disabledOnOfflineMode && isOfflineMode"
               lines="none"
               :detail="false"
               :class="{ selected: route.path === p.url }"
@@ -36,6 +37,7 @@
         <ion-menu-toggle v-for="p in appFooterPages" :key="p.url" :auto-hide="false">
           <ion-item
             router-direction="root"
+            :disabled="p.disabledOnOfflineMode && isOfflineMode"
             :router-link="p.url"
             lines="none"
             :detail="false"
@@ -73,14 +75,24 @@ import { app } from '~/stores/app';
 import { wtdcollection } from '~/stores/wtdcollection';
 
 const { t } = useI18n();
-const { token } = storeToRefs(app());
+const { token, isOfflineMode } = storeToRefs(app());
 const collectionStore = wtdcollection();
 const points = computed(() => webStores.users().points);
 
-const appPages = [
+type AppPage = {
+  title: string;
+  url: string;
+  disabledOnOfflineMode?: boolean;
+  iosIcon: string;
+  mdIcon: string;
+  chip?: number;
+};
+
+const appPages: AppPage[] = [
   {
     title: t('Rechercher une histoire'),
     url: '/search',
+    disabledOnOfflineMode: true,
     iosIcon: searchOutline,
     mdIcon: searchSharp,
   },
@@ -120,10 +132,11 @@ router.beforeEach((to) => {
   }
 });
 
-const appFooterPages = [
+const appFooterPages: AppPage[] = [
   {
     iosIcon: warningOutline,
     mdIcon: warningSharp,
+    disabledOnOfflineMode: true,
     title: t('Signaler un problème'),
     url: '/report',
   },

diff --git a/apps/whattheduck/src/components/OwnedIssueCopies.vue b/apps/whattheduck/src/components/OwnedIssueCopies.vue
@@ -145,8 +145,6 @@ ion-content > ion-row {
     height: 40%;
   }
 
-  flex-wrap: nowrap;
-
   > ion-col {
     display: flex;
     align-items: center;

diff --git a/apps/whattheduck/src/views/Authors.vue b/apps/whattheduck/src/views/Authors.vue
@@ -28,7 +28,7 @@
           </ion-col>
           <ion-col size="5">
             <StarRating
-              :readonly="appStore.isOfflineMode"
+              :readonly="isOfflineMode"
               v-model:rating="author.notation"
               :max-rating="10"
               @update:rating="updateRating(author)"
@@ -38,14 +38,19 @@
             ></StarRating>
           </ion-col>
           <ion-col size="3">
-            <ion-button @click="deleteAuthor(author.personcode)">
+            <ion-button v-if="!isOfflineMode" @click="deleteAuthor(author.personcode)">
               {{ t('Supprimer') }}
             </ion-button>
           </ion-col>
         </ion-row>
       </div>
 
-      <ion-searchbar autocapitalize="words" v-model="authorName" :placeholder="t('Entrez le nom d\'un auteur')" />
+      <ion-searchbar
+        v-if="!isOfflineMode"
+        autocapitalize="words"
+        v-model="authorName"
+        :placeholder="t('Entrez le nom d\'un auteur')"
+      />
 
       <ion-list v-if="authorResults">
         <ion-item
@@ -78,7 +83,7 @@ const { t } = useI18n();
 const { loadRatings, searchAuthors, isAuthorWatched, createRating, updateRating, deleteAuthor } = stats();
 const { authorSearchResults: authorResults, ratings } = storeToRefs(stats());
 const { personNames } = storeToRefs(coa());
-const appStore = app();
+const { isOfflineMode } = storeToRefs(app());
 
 const authorName = ref('');
 
@@ -104,4 +109,4 @@ watch(
 ion-button {
   align-content: center;
 }
-</style>
+</style>