feat: modals for import and export

kacperwyczawski · Feb 3, 2024 · c4ee61f · c4ee61f
1 parent 3f89b25
commit c4ee61f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 22 deletions.
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
@@ -2,10 +2,6 @@
 import type { Panel } from '@/core/panel';
 import { ref } from 'vue';
 
-defineProps<{
-    disableOptimization?: boolean;
-}>()
-
 const edgeReductionButtons = localStorage.getItem('edgeReductionButtons') || 'Combined';
 
 const length = ref(1);
@@ -18,7 +14,9 @@ const bottom = ref(false);
 const left = ref(false);
 
 const emit = defineEmits<{
-    addPanel: [{ panel: Panel, quantity: number} ];
+    addPanel: [panel: Panel, quantity: number],
+    import: [],
+    export: []
 }>()
 
 function reset() {
@@ -34,7 +32,6 @@ function reset() {
 
 function addPanel() {
     emit('addPanel', {
-        panel: {
             length: length.value,
             width: width.value,
             edgeReduction: {
@@ -45,8 +42,8 @@ function addPanel() {
                 thickness: parseInt(localStorage.getItem('panelEdgeReduction') || '3'),
             },
         },
-        quantity: quantity.value,
-    });
+        quantity.value,
+    );
     reset();
 }
 </script>
@@ -105,8 +102,11 @@ function addPanel() {
         <button @click="addPanel" class="btn btn-primary">
             Add panel
         </button>
-        <button class="btn btn-secondary" :disabled="disableOptimization">
-            Optimize
+        <button @click="$emit('import')" class="btn">
+            Import
+        </button>
+        <button @click="$emit('export')" class="btn btn-secondary">
+            Export
         </button>
     </div>
 </template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -54,15 +54,5 @@ watch(currentTheme, (x) => {
                 Settings
             </button>
         </RouterLink>
-        <RouterLink to="/import">
-            <button class="btn">
-                Import
-            </button>
-        </RouterLink>
-        <RouterLink to="/export">
-            <button class="btn btn-primary">
-                Export
-            </button>
-        </RouterLink>
     </header>
 </template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -3,11 +3,14 @@ import ControlPanel from '@/components/ControlPanel.vue';
 import Panels from '@/components/Panels.vue';
 import OptimizationResults from '@/components/OptimizationResults.vue';
 import type { Panel } from '@/core/panel';
-import { ref } from 'vue';
+import { ref, type Ref } from 'vue';
 import type { Sheet } from '@/core/sheet';
 
+// tabs
 const currentTab = ref('Panels');
 const tabList = ['Panels', 'Cuts'];
+
+// optimization
 const panels = ref<{ panel: Panel, quantity: number }[]>([]);
 const bladeThickness = parseFloat(localStorage.getItem('bladeThickness') ?? '3');
 const sheet: Sheet = {
@@ -21,13 +24,37 @@ const sheet: Sheet = {
     thickness: parseFloat(localStorage.getItem('sheetEdgeReduction') ?? '0'),
   }
 }
+
+// export and import modals
+const exportModal: Ref<HTMLDialogElement | null> = ref(null);
+const importModal: Ref<HTMLDialogElement | null> = ref(null);
 </script>
 
 <template>
   <div class="drawer md:drawer-open">
     <input id="sidebar" type="checkbox" class="drawer-toggle" />
     <div class="drawer-content p-2">
-      <ControlPanel @add-panel="(panel) => panels.push(panel)" :disable-optimization="panels.length === 0"/>
+      <ControlPanel @add-panel="(panel, quantity) => panels.push({ panel, quantity })"
+        @export="exportModal!.showModal()"
+        @import="importModal!.showModal()" />
+      <dialog id="exportModal" ref="exportModal" class="modal">
+        <div class="modal-box">
+          <h3 class="font-bold text-lg">Export</h3>
+          <p class="py-4">Not implemented yet, press <kbd class="kbd">ESC</kbd> or click outside to close</p>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button>close</button>
+        </form>
+      </dialog>
+      <dialog id="exportModal" ref="importModal" class="modal">
+        <div class="modal-box">
+          <h3 class="font-bold text-lg">Import</h3>
+          <p class="py-4">Not implemented yet, press <kbd class="kbd">ESC</kbd> or click outside to close</p>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button>close</button>
+        </form>
+      </dialog>
       <div v-if="panels.length === 0" role="alert" class="alert alert-info mt-2">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
+// TODO: one composable to rule them all
+
 const sheetLength = ref(parseInt(localStorage.getItem('sheetLength') || '2800'))
 watch(sheetLength, (x) => {
   localStorage.setItem('sheetLength', x.toString())