add modal

s1rius · May 12, 2024 · fc41285 · fc41285
1 parent 78b482b
commit fc41285
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 21 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -19,7 +19,7 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^3.4.3",
     "typescript": "^4.6.4",
     "vite": "^4.0.0",
     "vue-tsc": "^1.0.11"

diff --git a/ui/src-tauri/tauri.conf.json b/ui/src-tauri/tauri.conf.json
@@ -41,6 +41,7 @@
         "fullscreen": false,
         "resizable": true,
         "title": "ezlog",
+        "theme": "Dark",
         "width": 800,
         "height": 600
       }

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -5,12 +5,23 @@ import { invoke } from "@tauri-apps/api/tauri";
 
 import { type Event, listen } from '@tauri-apps/api/event'
 import { ref } from "vue";
+import Modal from './Modal.vue'
 
 const logs = ref<Record[]>([]);
 const add = (items: Record[]) => {
   logs.value.push(...items)
 }
 
+const showModal = ref(false)
+const currentPath = ref("")
+const currentExtra = ref("")
+
+const logColors = new Map();
+
+logColors.set('a', 1);
+logColors.set('b', 2);
+logColors.set('c', 3);
+
 type Header = {
   timestamp: 0,
   version: 2,
@@ -34,7 +45,6 @@ export interface Record {
 async function fetchLogs(path: string, k: string, n: string) {
   await invoke('parse_log_file_to_records', { filePath: path, key: k, nonce: n })
     .then((logs: any) => {
-      console.log(logs)
       let records: Record[] = JSON.parse(logs).map((item: string) => <Record>JSON.parse(item));
       add(records)
     })
@@ -45,20 +55,27 @@ async function fetchLogs(path: string, k: string, n: string) {
 
 async function parse_header_and_extra(path: string) {
   console.log('parse file dropped:', path);
+  currentPath.value = path;
   await invoke('parse_header_and_extra', { filePath: path }).then(async (result: any) => {
     const header = JSON.parse(result as string) as Header
     console.log(header)
+    currentExtra.value = header.extra_encode + ":\n" + header.extra
     if (header.encrypt == 0) {
       fetchLogs(path, "", "")
     } else {
-
+      showModal.value = true;
     }
 
   }).catch((error: any) => {
     console.error("error", error);
   })
 }
 
+async function submit_with_key_and_nonce(key: string, nonce: string) {
+  showModal.value = false;
+  fetchLogs(currentPath.value, key, nonce);
+}
+
 listen('tauri://file-drop', (event: Event<string[]>) => {
   if (event.payload && event.payload.length > 0) {
     const firstFilePath = event.payload[0];
@@ -72,25 +89,32 @@ listen('tauri://file-drop', (event: Event<string[]>) => {
 </script>
 
 <template>
-  <div class="container w-full max-w-full">
+  <div class="container bg-white dark:bg-stone-700/0 w-full max-w-full p-3">
     <table class="table table-striped table-bordered border-separate border-spacing-x-3">
       <thead>
         <tr>
-          <th class="text-left">Time</th>
-          <th class="text-left">Target</th>
-          <th class="text-left w-30 mx-3">Level</th>
-          <th class="text-left">Message</th>
+          <th class="text-left text-slate-900 dark:text-white">Time</th>
+          <th class="text-left text-slate-900 dark:text-white">Target</th>
+          <th class="text-left w-30 mx-3 text-slate-900 dark:text-white">Level</th>
+          <th class="text-left text-slate-900 dark:text-white">Message</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(log, index) in logs" :key="index">
-          <td class="w-30 min-w-30 h-fit mx-1 whitespace-nowrap align-top">{{ log.t }}</td>
-          <td class="mx-1 align-top">{{ log.g }}</td>
-          <td class="w-30 mx-3 align-top">{{ log.l }}</td>
-          <td class="text-wrap text-left break-all">{{ log.c }}</td>
+          <td class="text-slate-900 dark:text-gray-400 w-30 min-w-30 h-fit mx-1 whitespace-nowrap align-top">{{ log.t }}</td>
+          <td class="text-slate-900 dark:text-gray-400 mx-1 align-top">{{ log.g }}</td>
+          <td class="text-slate-900 dark:text-gray-400 w-30 mx-3 align-top">{{ log.l }}</td>
+          <td class="text-slate-900 dark:text-gray-400 text-wrap text-left break-all">{{ log.c }}</td>
         </tr>
       </tbody>
     </table>
+
+    <modal :show="showModal" @submit="submit_with_key_and_nonce">
+      <template #header>
+        <h2>Fill Key and Nonce</h2>
+        <div>{{ currentExtra }}</div>
+      </template>
+    </modal>
   </div>
 </template>
 

diff --git a/ui/src/Modal.vue b/ui/src/Modal.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+    show: Boolean
+})
+
+const key = ref('')
+const nonce = ref('')
+
+</script>
+
+<template>
+    <Transition name="modal">
+        <div v-if="show" class="modal-mask">
+            <div class="modal-container bg-white dark:bg-stone-700">
+                <div class="modal-header">
+                    <slot name="header">default header</slot>
+                </div>
+
+                <div class="modal-body">
+                    <slot name="body">
+                        <div>
+                            <input class="px-5 py-2" v-model="key" placeholder="enter key" />
+                            <input class="px-5 py-2 mt-4" v-model="nonce" placeholder="enter nonce"/>
+                        </div>
+                    </slot>
+                </div>
+
+                <div class="modal-footer">
+                    <slot name="footer">
+                        <button class="modal-default-button px-5 py-2" @click="$emit('submit', key, nonce)">OK</button>
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style>
+.modal-mask {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    transition: opacity 0.3s ease;
+}
+
+.modal-container {
+    width: 300px;
+    margin: auto;
+    padding: 20px 30px;
+    border-radius: 2px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+    transition: all 0.3s ease;
+}
+
+.modal-header h3 {
+    margin-top: 0;
+    color: #42b983;
+}
+
+.modal-body {
+    margin: 20px 0;
+}
+
+.modal-default-button {
+    float: right;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter-from {
+    opacity: 0;
+}
+
+.modal-leave-to {
+    opacity: 0;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+}
+</style>
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'selector',
   content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
@@ -11,7 +12,6 @@ export default {
       }
     },
     container: {
-      padding: '1rem',
     },
   },
   plugins: [],