From c9bcdd5e34acddda6bb6326f7e5543512e04bcb3 Mon Sep 17 00:00:00 2001
From: Xinos <userxinos@gmail.com>
Date: Sun, 5 May 2024 16:21:19 +0700
Subject: [PATCH] modal info for compendium tech

---
 src/pages/CompendiumTech.vue | 54 ++++++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/pages/CompendiumTech.vue b/src/pages/CompendiumTech.vue
index 16598d8bf..89a186f97 100644
--- a/src/pages/CompendiumTech.vue
+++ b/src/pages/CompendiumTech.vue
@@ -12,7 +12,7 @@
         />
       </div>
 
-      <modal
+      <Modal
         v-model:open="openModal"
         v-bind="modalOpts"
       >
@@ -23,6 +23,11 @@
                 <!--suppress TypeScriptUnresolvedReference -->
                 <h2>{{ $t(modalOpts.data.value.TID) }}</h2>
                 <p>{{ t('TID_SOCIAL_TIMESTAMP', [sec2biggestTime(modalOpts.data.lastAgoUpdate)]) }}</p>
+                <button
+                  v-t="'TID_MORE_INFO_BTN'"
+                  class="button accent"
+                  @click="openModalInfo = true"
+                />
                 <div />
               </div>
               <ModalIcon />
@@ -38,7 +43,16 @@
             </div>
           </div>
         </template>
-      </modal>
+      </Modal>
+
+      <Modal
+        v-model:open="openModalInfo"
+        v-bind="modalOptsInfo"
+      >
+        <template #body>
+          <VData v-bind="modalOptsInfo.data" />
+        </template>
+      </Modal>
 
     </div>
   </CompendiumPage>
@@ -46,7 +60,7 @@
 
 <!--suppress TypeScriptCheckImport, TypeScriptUnresolvedReference -->
 <script setup lang="ts">
-import { ref, reactive, h, VNode, onUnmounted } from 'vue';
+import { ref, reactive, h, VNode, onUnmounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { getTechIndex } from 'bot_client';
 import compendiumTechListLogic from '@/composables/compendiumTechList';
@@ -59,6 +73,7 @@ import { getModulesMinLvl } from '@/components/ModulePage.vue';
 import CompendiumPage from '../components/CompendiumPage.vue';
 import CompendiumTechList from '../components/TechList.vue';
 import NumberPicker from '../components/NumberPicker.vue';
+import VData from '@/components/Data.vue';
 
 import globals from '@Data/globals.js';
 import shipsData from '@Data/capital_ships.js';
@@ -66,6 +81,7 @@ import allianceData from '@Data/alliance_levels.js';
 import spaceBuildingsData from '@Data/spacebuildings.js';
 import modulesData from '@Data/modules.js';
 import { TechLevel } from 'bot_client/src/bot_api';
+import { tableOpts } from '@/components/ModulePage.vue';
 
 const spaceBuildings = { RedStarScanner: spaceBuildingsData.RedStarScanner, ShipmentRelay: spaceBuildingsData.ShipmentRelay };
 const ships = { Transport: shipsData.Transport, Miner: shipsData.Miner, Battleship: shipsData.Battleship };
@@ -88,6 +104,7 @@ const { data, levelMap, setTechLevel } = compendiumTechListLogic();
 const { t } = useI18n();
 const title = t('HS_COMPENDIUM');
 const openModal = ref(false);
+const openModalInfo = ref(false);
 const modalOpts = reactive({
     size: SIZES.SMALL,
     title: t('TECHNOLOGIES'),
@@ -101,6 +118,15 @@ const modalOpts = reactive({
         },
     },
 });
+const modalOptsInfo = reactive({
+    size: SIZES.LARGE,
+    title: t('TECHNOLOGIES'),
+    data: {
+        data: computed(() => modalOpts.data.value),
+        iconDir: computed(() => getIconDir(modalOpts.data.value)),
+        tableOpts: computed(tableOpts),
+    },
+});
 
 const dateInterval = setInterval(updateLastAgo, 5000);
 
@@ -141,15 +167,27 @@ function getDataByKey(key: string): TechLevel|null {
 }
 function ModalIcon(): VNode {
     const m = modalOpts.data.value;
+    const dir = getIconDir(m);
 
     if (m.Icon) {
-        return h(Icon, { name: m.Icon, dir: m.specialIcon ? 'icons' : 'game/Modules' });
+        return h(Icon, { name: m.Icon, dir });
     }
     if (m.Model) {
-        return h(Icon, { name: m.Model[(getDataByKey(m.Name as string)?.level - 1) || 5], dir: 'game/Ships' });
+        return h(Icon, { name: m.Model[(getDataByKey(m.Name as string)?.level - 1) || 5], dir });
     }
     if (m.PrefabModel) {
-        return h(Icon, { name: m.PrefabModel, dir: 'game/SpaceBuildings' });
+        return h(Icon, { name: m.PrefabModel, dir });
+    }
+}
+function getIconDir(value: Record<string, unknown>): string {
+    if (value.Icon) {
+        return value.specialIcon ? 'icons' : 'game/Modules';
+    }
+    if (value.Model) {
+        return 'game/Ships';
+    }
+    if (value.PrefabModel) {
+        return 'game/SpaceBuildings';
     }
 }
 function updateLastAgo() {
@@ -191,6 +229,10 @@ $plan-color: #ded45a;
       margin-bottom: 2%;
     }
 
+      p {
+          padding-bottom: 10px;
+      }
+
     > div:first-child {
       flex: 3;
     }