basic image details, base and fullsize image displays

1 files changed, 68 insertions, 0 deletions

diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
new file mode 100644
index 0000000..6725595
--- /dev/null
+++ b/iridescence/src/components/ProductDetail.vue
@@ -0,0 +1,68 @@
+<template>
+  <div id="productDetail">
+    <div class="modal is-active">
+      <div class="modal-background"></div>
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-image">
+            <figure class="image ">
+              <a target="_blank" :href="fullsize">
+                <img :src="base" :alt="name" title="Click for fullsize" />
+              </a>
+            </figure>
+          </div>
+
+          <div class="card-content">
+            <div class="content">
+              <p class="title">
+                {{ name }}
+              </p>
+              <p class="subtitle">
+                {{ dollars }}
+              </p>
+              <p class="subtitle">{{ stock }}</p>
+            </div>
+
+            <div class="content">
+              {{ description }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-close is-large"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductDetail",
+  props: {
+    id: Number,
+    name: String,
+    quantity: Number,
+    cents: Number,
+    photo_base: String,
+    photo_fullsize: String,
+    description: String
+  },
+  computed: {
+    stock() {
+      if (this.quantity == 0) {
+        return "Made to order";
+      } else {
+        return [this.quantity, "in stock"].join(" ");
+      }
+    },
+    dollars() {
+      return "$ " + (this.cents / 100).toFixed(2);
+    },
+    base() {
+      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_base;
+    },
+    fullsize() {
+      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_fullsize;
+    }
+  }
+};
+</script>