From af597adb7e9ea1768e1b1fa760f765b0454ba0a3 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Mon, 9 Jan 2023 21:06:29 +0800
Subject: [PATCH] fix: frontend

---
 index.html | 28 +++++-----------------------
 1 file changed, 5 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index d1e7ec5..3b917df 100644
--- a/index.html
+++ b/index.html
@@ -8,23 +8,10 @@
     <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
     <title>Automated Garbage Segregation</title>
     <style>
-        /* strict dark theme from simple.css */
-        /* :root {
-            color-scheme:dark;
-            --bg: #212121;
-            --accent-bg: #2b2b2b;
-            --text: #dcdcdc;
-            --text-light: #ababab;
-            --accent: #ffb300;
-            --code: #f06292;
-            --preformatted: #ccc;
-            --disabled: #111
+        body {
+            grid-template-columns: 1fr min(75rem, 90%) 1fr;
         }
 
-        img,video {
-            opacity: .8
-        } */
-
         body, html {
             padding: 0;
             margin: 0;
@@ -50,7 +37,9 @@
 <body>
     <div id="main" v-scope @mounted="mounted()" @unmounted="unmounted()">
         <div id="image">
-            <img :src="image" alt="item">
+            <img v-if="state =='put'" :src="placeholder" alt="placeholder">
+            <img v-else-if="state =='camera'" :src="loader" alt="loader">
+            <img v-else :src="imageUrl" alt="item">
         </div>
         <div id="status">
             <h1>{{ status }}</h1>
@@ -66,12 +55,6 @@
             imageUrl: "/photo",
             type: "未知",
             state: "put",
-            get image() {
-                if (this.state == "put") return this.placeholder;
-                if (this.state == "camera") return this.loader;
-
-                return this.imageUrl;
-            },
             get status() {
                 let data = {
                     "put": "請放置垃圾",
@@ -94,7 +77,6 @@
             update(data) {
                 let state = data.state;
                 if (state == "identified") this.type = data.type;
-                if (state == "identify") this.imageUrl = data.imageUrl;
 
                 this.state = state;
             },
