From 27c13c5fa854ea25406f54c7416a87f76a4d640d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Tue, 9 Jan 2024 17:47:04 +0100
Subject: [PATCH] working POC displaying data with state

---
 app.vue                                       |  4 ++
 classes/AppState.ts                           | 20 +++++++++
 composable/useElectron.ts                     | 44 -------------------
 ...wserWinHandler.ts => BrowserWinHandler.ts} |  0
 electron/UnzipData.ts                         |  2 +-
 electron/main.ts                              |  2 +-
 pages/index.vue                               | 34 +++++++++++++-
 7 files changed, 58 insertions(+), 48 deletions(-)
 create mode 100644 classes/AppState.ts
 delete mode 100644 composable/useElectron.ts
 rename electron/{browserWinHandler.ts => BrowserWinHandler.ts} (100%)

diff --git a/app.vue b/app.vue
index cfb1ae3..d242ed5 100644
--- a/app.vue
+++ b/app.vue
@@ -25,6 +25,7 @@ import Modal from "bootstrap/js/dist/modal";
 import KonamiCode from "konami-code-js";
 import Swal from "sweetalert2";
 import { defineComponent } from "vue";
+import AppState from "./classes/AppState";
 import dataJson from "./src/assets/data.json";
 import data from "data/test.json";
 
@@ -94,6 +95,9 @@ export default defineComponent({
         this.adminModal.show();
       });
     });
+
+    // * Set Data State
+    useState("dataJson", () => new AppState(this.dataJson));
   },
   methods: {
     itemClicked(item: Item): void {
diff --git a/classes/AppState.ts b/classes/AppState.ts
new file mode 100644
index 0000000..d811c36
--- /dev/null
+++ b/classes/AppState.ts
@@ -0,0 +1,20 @@
+export default class AppState {
+    /** Json data as exported from zip and compliant with schemas */
+    private jsonData: TypeApp;
+
+    constructor(jsonData: TypeApp) {
+        this.jsonData = jsonData;
+    }
+
+    public settings(): TypeSettings {
+        return this.jsonData.settings;
+    }
+
+    public brands(): Array<TypeBrand> {
+        return this.jsonData.items;
+    }
+
+    public brand(id:number): TypeBrand|undefined {
+        return this.jsonData.items.find(brand => brand.id === id);
+    }
+}
diff --git a/composable/useElectron.ts b/composable/useElectron.ts
deleted file mode 100644
index 9aa9030..0000000
--- a/composable/useElectron.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import log from "electron-log";
-
-export default function useElectron() {
-    const isServer = process.server || typeof window === "undefined" || typeof window.require === "undefined";
-    const isElectron = !isServer && navigator.userAgent.toLowerCase().includes("nuxt-app");
-    log.info(`isServer ${isServer}`);
-    log.info(`isElectron ${isElectron}`);
-    log.info(`userAgent ${navigator.userAgent.toLowerCase()}`);
-    if (!isElectron || isServer) return { isElectron };
-
-    // Initialize electron
-    const electron = window.require("electron");
-
-    // Window title bar actions
-    // ========================
-    const titleBarActions = {
-        minimize: () => electron.ipcRenderer.invoke("titlebar:action", "minimize"),
-        toggleMaximize: () => electron.ipcRenderer.invoke("titlebar:action", "toggleMaximize"),
-        isMaximized: () => electron.ipcRenderer.invoke("isMaximized:app", null),
-        close: () => electron.ipcRenderer.invoke("close:app", null)
-    };
-
-    // Window title bar stats
-    // ======================
-    const windowStats = ref({
-        isMaximized: false,
-        isFullscreen: false
-    });
-
-    electron.ipcRenderer.on("window:maximizeChanged", (_event, value) => {
-        windowStats.value.isMaximized = value;
-    });
-    electron.ipcRenderer.on("window:fullscreenChanged", (_event, value) => {
-        windowStats.value.isFullscreen = value;
-    });
-
-    // Get Json Data
-    const sendSync = (): TypeApp => {
-        return electron.ipcRenderer.sendSync("get-config", "");
-    };
-
-    // Initialize ipcRenderer
-    return { isElectron, titleBarActions, windowStats, sendSync };
-}
diff --git a/electron/browserWinHandler.ts b/electron/BrowserWinHandler.ts
similarity index 100%
rename from electron/browserWinHandler.ts
rename to electron/BrowserWinHandler.ts
diff --git a/electron/UnzipData.ts b/electron/UnzipData.ts
index 60d7b78..28dec99 100644
--- a/electron/UnzipData.ts
+++ b/electron/UnzipData.ts
@@ -10,7 +10,7 @@ import log from "electron-log/main";
  * In charge to unzip data from showroom Bo,
  * validate data config and check version
  */
-export default class UnzipData {
+export default abstract class UnzipData {
     static zipFileToUse: string|null;
 
     /**
diff --git a/electron/main.ts b/electron/main.ts
index 4149609..ba3f039 100755
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -1,8 +1,8 @@
 import path from "node:path";
 import { app, ipcMain } from "electron";
 import log from "electron-log/main";
+import BrowserWinHandler from "./BrowserWinHandler";
 import UnzipData from "./UnzipData";
-import BrowserWinHandler from "./browserWinHandler";
 
 // TODO: take inspiration form https://github.com/michalzaq12/electron-nuxt/tree/master/template/src/main.
 // Or https://github.com/EternalC0der/electron-nuxt3
diff --git a/pages/index.vue b/pages/index.vue
index ee46702..6069a64 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,17 +1,47 @@
 <template>
   <div class="page-home">
     <h1>Home</h1>
+    <br>
+    <div class="container">
+      <div
+        v-for="(brand, brandIndex) of dataJson.brands()"
+        :key="brandIndex"
+        :class="{
+          'row': true,
+          'flex-row-reverse': brandIndex %2 !== 0,
+          'mb-3': true,
+        }"
+        :style="{ 'background-color': brand.color }"
+      >
+        <div class="col-6">
+          {{ brand.name }}
+        </div>
+        <div class="col-6">
+          <img class="img-fluid" :src="`/assets/${brand.picture}`" :alt="`Marque ${brand.name}`" :title="`Le logo de la marque ${brand.name}`">
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import log from "electron-log";
 import { defineComponent } from "vue";
+import type AppState from "~/classes/AppState";
 
 export default defineComponent({
   name: "HomePage",
-  props: {
+  data() : {
+    dataJson: AppState;
+  } {
+    return {
+      dataJson: useState("dataJson").value as AppState
+    };
+  },
+  mounted() {
+    log.info("index page");
   },
   methods: {
-  }
+  },
 });
 </script>