From 97af17e716c06d8c81f4e380c5a467c5d14daac9 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Fri, 25 Sep 2020 18:51:24 -0400
Subject: browser image parsing to base64/dataURL complete; further work on new
 product, added animate.css just for testing

---
 iridescence/src/App.vue                            |  4 ++
 iridescence/src/components/BusyBar.vue             | 20 ++++++
 iridescence/src/components/Navbar.vue              |  3 +
 iridescence/src/components/admin/NewProduct.vue    | 51 ++++++++++++--
 .../src/components/admin/NewProductModal.vue       | 45 ------------
 .../src/components/admin/ProductEditCard.vue       | 80 ++++++++++++++++------
 iridescence/src/store/index.js                     |  6 +-
 7 files changed, 138 insertions(+), 71 deletions(-)
 create mode 100644 iridescence/src/components/BusyBar.vue
 delete mode 100644 iridescence/src/components/admin/NewProductModal.vue

(limited to 'iridescence/src')

diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index 67e5d39..81a549c 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -1,18 +1,21 @@
 <template>
   <div id="app">
     <Navbar></Navbar>
+    <BusyBar></BusyBar>
     <router-view />
     <Footer></Footer>
   </div>
 </template>
 
 <script>
+import BusyBar from "@/components/BusyBar.vue";
 import Navbar from "@/components/Navbar.vue";
 import Footer from "@/components/Footer.vue";
 
 export default {
   name: "App",
   components: {
+    BusyBar,
     Navbar,
     Footer
   }
@@ -21,4 +24,5 @@ export default {
 
 <style lang="scss">
 @use "../node_modules/bulma/bulma.sass";
+@use "../node_modules/animate.css/animate.min.css";
 </style>
diff --git a/iridescence/src/components/BusyBar.vue b/iridescence/src/components/BusyBar.vue
new file mode 100644
index 0000000..fff2c4c
--- /dev/null
+++ b/iridescence/src/components/BusyBar.vue
@@ -0,0 +1,20 @@
+<template>
+  <div id="busyBar">
+    <progress
+      class="progress is-small is-primary"
+      max="100"
+      v-if="isBusy"
+    ></progress>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BusyBar",
+  computed: {
+    isBusy() {
+      return this.$store.getters.busy;
+    }
+  }
+};
+</script>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 16415bb..c4e9c35 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -24,6 +24,9 @@
           <router-link to="/about" class="navbar-item">
             About
           </router-link>
+          <router-link to="/admin" class="navbar-item">
+            Admin
+          </router-link>
         </div>
 
         <div class="navbar-end" v-if="routeName == 'Administration'">
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
index 5119031..1cc43cd 100644
--- a/iridescence/src/components/admin/NewProduct.vue
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -1,23 +1,64 @@
 <template>
   <div id="addNewProduct">
-    <button class="button is-primary">
+    <button class="button is-primary" @click="toggleModal">
       + Add New
     </button>
-    <NewProductModal v-if="modalEnabled"></NewProductModal>
+    <div class="modal is-active" v-if="modalEnabled">
+      <transition
+        name="modalTransition"
+        enter-active-class="animate__animated animate__animate__fadeIn animate__faster"
+        leave-active-class="animate__animated animate__animate__fadeOut animate__faster"
+      >
+        <div class="modal-background" v-if="modalEnabled"></div>
+      </transition>
+      <transition
+        name="cardTransition"
+        enter-active-class="animate__animated animate__fadeInDownBig animate__faster"
+        leave-active-class="animate__animated animate__animate__fadeOut animate__faster"
+      >
+        <div class="modal-card" v-if="modalEnabled">
+          <header class="modal-card-head">
+            <p class="modal-card-title">Add a new product</p>
+            <button class="delete" @click="toggleModal"></button>
+          </header>
+          <section class="modal-card-body">
+            <ProductEditCard v-bind:current-product="product"></ProductEditCard>
+          </section>
+          <footer class="modal-card-foot"></footer>
+        </div>
+      </transition>
+    </div>
   </div>
 </template>
 
 <script>
-import NewProductModal from "./NewProductModal.vue";
+import ProductEditCard from "./ProductEditCard.vue";
+
 export default {
   name: "AddNewProduct",
   components: {
-    NewProductModal
+    ProductEditCard
   },
   data: function() {
     return {
-      modalEnabled: true
+      modalEnabled: false,
+      product: {
+        id: 0,
+        name: "",
+        quantity: 0,
+        cents: 0,
+        imgPath: "",
+        description: "",
+        featured: false,
+        categories: []
+      },
+      addAnother: false
     };
+  },
+  methods: {
+    toggleModal() {
+      this.modalEnabled = !this.modalEnabled;
+    }
   }
 };
 </script>
diff --git a/iridescence/src/components/admin/NewProductModal.vue b/iridescence/src/components/admin/NewProductModal.vue
deleted file mode 100644
index 8df0faa..0000000
--- a/iridescence/src/components/admin/NewProductModal.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="modal " id="newProductModal">
-    <div class="modal-background"></div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title"></p>
-        <button class="delete" aria-label="close"></button>
-      </header>
-      <section class="modal-card-body">
-        <ProductEditCard v-bind:current-product="product"></ProductEditCard>
-      </section>
-      <footer class="modal-card-foot">
-        <label class="checkbox">
-          <input type="checkbox" v-model="addAnother" />
-          Add Another?
-        </label>
-      </footer>
-    </div>
-  </div>
-</template>
-
-<script>
-import ProductEditCard from "@/components/admin/ProductEditCard.vue";
-export default {
-  name: "NewProductModal",
-  components: {
-    ProductEditCard
-  },
-  data: function() {
-    return {
-      product: {
-        id: 0,
-        name: "",
-        quantity: 0,
-        cents: 0,
-        imgPath: "",
-        description: "",
-        featured: false,
-        categories: []
-      },
-      addAnother: false
-    };
-  }
-};
-</script>
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index 8ea23b1..eb4958d 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -5,16 +5,13 @@
         <p class="card-header-title" v-if="currentProduct.id > 0">
           {{ currentProduct.id }}: {{ currentProduct.name }}
         </p>
-        <p class="card-header-title" v-else>
-          Add New Product
-        </p>
       </div>
       <div class="card-content">
         <div class="field">
           <input
             class="input"
             type="text"
-            placeholder="product name"
+            placeholder="(product name)"
             v-model="newProduct.name"
           />
         </div>
@@ -33,12 +30,15 @@
             />
           </p>
           <div class="control">
-            <a class="button is-info" @click="incrementQuantity(-1)">
+            <a
+              class="button is-info is-outlined"
+              @click="incrementQuantity(-1)"
+            >
               ▼
             </a>
           </div>
           <div class="control">
-            <a class="button is-info" @click="incrementQuantity(1)">
+            <a class="button is-info is-outlined" @click="incrementQuantity(1)">
               ▲
             </a>
           </div>
@@ -59,12 +59,25 @@
           </p>
         </div>
         <div class="field">
-          <input
-            class="input"
-            type="text"
-            placeholder="image"
-            v-model="newProduct.imgPath"
-          />
+          <div class="file has-name is-boxed is-fullwidth">
+            <label class="file-label">
+              <input
+                class="file-input"
+                type="file"
+                name="image"
+                accept=".jpg,.jpeg,.JPG,.JPEG"
+                @change="previewFiles"
+              />
+              <span class="file-cta">
+                <span class="file-label has-text-centered">
+                  ↑ Choose a picture…
+                </span>
+              </span>
+              <span class="file-name">
+                {{ newProduct.imgPath }}
+              </span>
+            </label>
+          </div>
         </div>
         <div class="field">
           <label class="checkbox">
@@ -76,18 +89,22 @@
           <textarea
             class="textarea"
             type="text"
-            placeholder="description"
+            placeholder="(product description)"
             v-model="newProduct.description"
           >
           </textarea>
         </div>
+        <progress
+          class="progress is-primary"
+          v-bind:value="fileProgress"
+          max="100"
+          v-if="fileProgress < 100"
+          >{{ fileProgress }}%</progress
+        >
       </div>
-      <div class="card-footer" v-if="isDifferent && isValid">
-        <div class="card-footer-item">
-          <button
-            class="button is-link is-outlined is-fullwidth"
-            @click="saveProduct"
-          >
+      <div class="card-footer">
+        <div class="card-footer-item" v-if="isDifferent && isValid">
+          <button class="button is-primary is-fullwidth" @click="saveProduct">
             Save
           </button>
         </div>
@@ -112,7 +129,8 @@ export default {
         description: this.currentProduct.description,
         featured: this.currentProduct.featured,
         categories: this.currentProduct.categories.slice(0)
-      }
+      },
+      fileProgress: 100
     };
   },
   props: {
@@ -190,6 +208,28 @@ export default {
       if (this.newProduct.quantity + amount >= 0) {
         this.newProduct.quantity += amount;
       }
+    },
+    previewFiles(event) {
+      let file = event.target.files[0];
+      if (!file) {
+        return;
+      }
+
+      let reader = new FileReader();
+
+      reader.onprogress = e => {
+        if (e && e.lengthComputable) {
+          this.fileProgress = parseInt((e.loaded / e.total) * 100, 10);
+        }
+      };
+
+      reader.onloadend = e => {
+        console.log(e.target.result);
+        this.fileProgress = 100;
+        this.newProduct.imgPath = file.name;
+      };
+
+      reader.readAsDataURL(file);
     }
   }
 };
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index 0e5d3be..1a83c01 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -9,9 +9,13 @@ let dichroismApi = new Dichroism();
 export default new Vuex.Store({
   state: {
     searchTerm: "",
-    products: []
+    products: [],
+    busy: false
   },
   getters: {
+    busy(state) {
+      return state.busy;
+    },
     products(state) {
       return state.products.filter(item => {
         return JSON.stringify(item)
-- 
cgit v1.2.3