summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-06-29 16:52:17 -0400
committerAdam T. Carpenter <atc@53hor.net>2020-06-29 16:52:17 -0400
commit8ac8ad09c71b10597a354eabf81cbafa14f00940 (patch)
treed6aa383df6493ab9051ea15291d154e300db85b9
parent14ac25266a53ed986402f808cab0ef04237c1022 (diff)
downloadtheglassyladies-8ac8ad09c71b10597a354eabf81cbafa14f00940.tar.xz
theglassyladies-8ac8ad09c71b10597a354eabf81cbafa14f00940.zip
playing with filtering by category
Diffstat
-rw-r--r--iridescence/public/index.html16
-rw-r--r--iridescence/src/App.vue1
-rw-r--r--iridescence/src/components/InventorySearch.vue11
-rw-r--r--iridescence/src/components/Navbar.vue30
-rw-r--r--iridescence/src/models/category.js13
-rw-r--r--iridescence/src/store/index.js56
6 files changed, 76 insertions, 51 deletions
diff --git a/iridescence/public/index.html b/iridescence/public/index.html
index 4123528..393860e 100644
--- a/iridescence/public/index.html
+++ b/iridescence/public/index.html
@@ -1,15 +1,19 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="has-navbar-fixed-top">
<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ <strong
+ >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+ properly without JavaScript enabled. Please enable it to
+ continue.</strong
+ >
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
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: ""
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-13 20:38:47 +0000