From 1ec0fd99cdf48fa3db61c7580d4e80a2c5216ed8 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Mon, 16 Nov 2020 22:32:15 -0500
Subject: basic image details, base and fullsize image displays

---
 iridescence/src/components/ProductDetail.vue | 68 ++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 iridescence/src/components/ProductDetail.vue

(limited to 'iridescence/src/components/ProductDetail.vue')

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>
-- 
cgit v1.2.3