diff options
Diffstat (limited to 'iridescence/src')
| -rw-r--r-- | iridescence/src/App.vue | 1 | ||||
| -rw-r--r-- | iridescence/src/components/InventorySearch.vue | 11 | ||||
| -rw-r--r-- | iridescence/src/components/Navbar.vue | 30 | ||||
| -rw-r--r-- | iridescence/src/models/category.js | 13 | ||||
| -rw-r--r-- | iridescence/src/store/index.js | 56 |
5 files changed, 66 insertions, 45 deletions
diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue index 34aa1d9..4094265 100644 --- a/iridescence/src/App.vue +++ b/iridescence/src/App.vue @@ -21,4 +21,5 @@ export default { <style lang="scss"> @import "../node_modules/bulma/bulma.sass"; +@import url("https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap"); </style> diff --git a/iridescence/src/components/InventorySearch.vue b/iridescence/src/components/InventorySearch.vue index e9da6f6..6145246 100644 --- a/iridescence/src/components/InventorySearch.vue +++ b/iridescence/src/components/InventorySearch.vue @@ -14,11 +14,12 @@ <div class="control"> <div class="select is-primary is-medium"> <select> - <option>(Sort by...)</option> - <option>Age (Oldest to Newest)</option> - <option>Name</option> - <option>Price (Low to High)</option> - <option>Price (High to Low)</option> + <option>Featured</option> + <option>Name/A-Z</option> + <option>Newest to Oldest</option> + <option>Oldest to Newest</option> + <option>Low to High</option> + <option>High to Low</option> </select> </div> </div> diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue index b83834a..8c2f0a6 100644 --- a/iridescence/src/components/Navbar.vue +++ b/iridescence/src/components/Navbar.vue @@ -1,6 +1,6 @@ <template> <div id="navbar"> - <nav class="navbar is-primary"> + <nav class="navbar is-fixed-top is-transparent"> <div class="navbar-brand"> <div class="navbar-item"> <img src="@/assets/logo.png" /> @@ -26,6 +26,24 @@ </router-link> </div> <div class="navbar-end"> + <div + class="navbar-item has-dropdown is-active" + v-for="category in categories.keys()" + :key="category" + > + <div class="navbar-link"> + {{ category }} + </div> + + <div + class="navbar-dropdown" + v-for="subcategory in categories.get(category)" + :key="subcategory" + > + {{ subcategory }} + </div> + </div> + <div class="navbar-item"> <div class="buttons"> <button class="button"> @@ -43,6 +61,8 @@ </template> <script> +import Category from "~models/category.js"; + export default { name: "Navbar", data() { @@ -57,6 +77,14 @@ export default { } else { return "navbar-menu"; } + }, + categories() { + const inventory = this.$store.getters.inventory; + console.log(inventory); + console.log(inventory.map(item => item.categories)); + + //console.log(cats); + return []; } }, methods: { diff --git a/iridescence/src/models/category.js b/iridescence/src/models/category.js new file mode 100644 index 0000000..689c98f --- /dev/null +++ b/iridescence/src/models/category.js @@ -0,0 +1,13 @@ +export class Category { + name: string; + subcategory: Category; + + /** + * @param {string} name + * @param {Category=} subcategory + */ + constructor(name, subcategory) { + this.name = name; + this.subcategory = subcategory; + } +} diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js index 2d88e02..b5b0445 100644 --- a/iridescence/src/store/index.js +++ b/iridescence/src/store/index.js @@ -9,10 +9,12 @@ export default new Vuex.Store({ { id: 1, name: "Beach Box", - quantity: -1, // quantity of -1 could mean made on demand + quantity: 0, cents: 1100, imgPath: "/beach_box.jpg", - description: "This is a beach box." + description: "This is a beach box.", + featured: false, + category: { name: "Stained Glass", subcategory: { name: "Gardeny" } } }, { id: 2, @@ -20,7 +22,9 @@ export default new Vuex.Store({ quantity: 0, cents: 4500, imgPath: "/wind-chime.jpg", - description: "Makes noise when the wind blows." + description: "Makes noise when the wind blows.", + featured: false, + categories: ["Fused Glass", ["Beachy"]] }, { id: 3, @@ -28,7 +32,9 @@ export default new Vuex.Store({ quantity: 5, cents: 1100, imgPath: "/beach_box.jpg", - description: "This is a beach box." + description: "This is a beach box.", + featured: false, + categories: ["Stained Glass", ["Christmas"]] }, { id: 4, @@ -36,47 +42,19 @@ export default new Vuex.Store({ quantity: 2, cents: 4500, imgPath: "/wind-chime.jpg", - description: "Makes noise when the wind blows." + description: "Makes noise when the wind blows.", + featured: false, + categories: ["Fused Glass", ["Kiln-y"]] }, { id: 5, - name: "Beach Box", - quantity: 5, - cents: 1100, - imgPath: "/beach_box.jpg", - description: "This is a beach box." - }, - { - id: 6, - name: "Wind Chime", - quantity: 2, - cents: 4500, - imgPath: "/wind-chime.jpg", - description: "Makes noise when the wind blows." - }, - { - id: 7, - name: "Beach Box", + name: "Beach Box (New!)", quantity: 5, cents: 1100, imgPath: "/beach_box.jpg", - description: "This is a beach box." - }, - { - id: 8, - name: "Wind Chime", - quantity: 2, - cents: 4500, - imgPath: "/wind-chime.jpg", - description: "Makes noise when the wind blows." - }, - { - id: 9, - name: "Wind Chime", - quantity: 2, - cents: 4500, - imgPath: "/wind-chime.jpg", - description: "Makes noise when the wind blows." + description: "This is a beach box.", + featured: true, + categories: ["Stained Glass", ["Christmas"]] } ], term: "" |