From 1d127ea0278b95b31fd64127832f6cbcdba8cb61 Mon Sep 17 00:00:00 2001
From: Bruno Perel <brunoperel@gmail.com>
Date: Tue, 9 Jul 2024 14:56:36 +0200
Subject: [PATCH] whattheduck: Disable more things on offline mode

---
 apps/whattheduck/src/components/List.vue      | 15 +++++----------
 .../src/components/NavigationDrawer.vue       | 19 ++++++++++++++++---
 .../src/components/OwnedIssueCopies.vue       |  2 --
 apps/whattheduck/src/views/Authors.vue        | 15 ++++++++++-----
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/apps/whattheduck/src/components/List.vue b/apps/whattheduck/src/components/List.vue
index 84f4c301a..8ebc030bd 100644
--- 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
index 564b67517..9241fcb7d 100644
--- 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
index 8bae01252..192d87419 100644
--- 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
index 2c8a62038..776cb850a 100644
--- 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>
\ No newline at end of file
+</style>