summaryrefslogtreecommitdiff
path: root/iridescence/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components')
-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
5 files changed, 129 insertions, 70 deletions
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);
}
}
};
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 09:36:26 +0000