summaryrefslogtreecommitdiff
path: root/iridescence
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-09-25 18:51:24 -0400
committerAdam T. Carpenter <atc@53hor.net>2020-09-25 18:51:24 -0400
commit97af17e716c06d8c81f4e380c5a467c5d14daac9 (patch)
treea645d3c441e92bb14342826f7f0eccecc059f13f /iridescence
parent74c5bb3fa6fd725685ad549c972ec0dee58f1b6b (diff)
downloadtheglassyladies-97af17e716c06d8c81f4e380c5a467c5d14daac9.tar.xz
theglassyladies-97af17e716c06d8c81f4e380c5a467c5d14daac9.zip
browser image parsing to base64/dataURL complete; further work on new product, added animate.css just for testing
Diffstat (limited to 'iridescence')
-rw-r--r--iridescence/package.json1
-rw-r--r--iridescence/src/App.vue4
-rw-r--r--iridescence/src/components/BusyBar.vue20
-rw-r--r--iridescence/src/components/Navbar.vue3
-rw-r--r--iridescence/src/components/admin/NewProduct.vue51
-rw-r--r--iridescence/src/components/admin/NewProductModal.vue45
-rw-r--r--iridescence/src/components/admin/ProductEditCard.vue80
-rw-r--r--iridescence/src/store/index.js6
-rw-r--r--iridescence/yarn.lock5
9 files changed, 144 insertions, 71 deletions
diff --git a/iridescence/package.json b/iridescence/package.json
index 5314f4f..ab8e4f0 100644
--- a/iridescence/package.json
+++ b/iridescence/package.json
@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
+ "animate.css": "^4.1.1",
"bulma": "^0.9.0",
"core-js": "^3.6.5",
"vue": "^2.6.11",
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)
diff --git a/iridescence/yarn.lock b/iridescence/yarn.lock
index b2c3bd3..2efc913 100644
--- a/iridescence/yarn.lock
+++ b/iridescence/yarn.lock
@@ -1596,6 +1596,11 @@ alphanum-sort@^1.0.0:
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
+animate.css@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+ integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
ansi-colors@^3.0.0:
version "3.2.4"
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"