From 85307b799581160c600140ce414b31da44dd5c8a Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Thu, 13 Nov 2025 16:40:31 -0700
Subject: [PATCH] store with downloads only

---
 webapp/src/App.vue                   |   1 +
 webapp/src/layouts/DefaultLayout.vue |  17 ++
 webapp/src/router/index.ts           |   8 +
 webapp/src/views/Store.vue           | 315 +++++++++++++++++++++++++++
 4 files changed, 341 insertions(+)
 create mode 100644 webapp/src/layouts/DefaultLayout.vue
 create mode 100644 webapp/src/views/Store.vue

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 37d26af..c9ba146 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -37,6 +37,7 @@ const items = [
   { title: 'Home', icon: 'mdi-home', to: '/' },
   { title: 'Map', icon: 'mdi-map', to: '/map' },
   { title: 'Learn', icon: 'mdi-school', to: '/what-is-an-alpr' },
+  { title: 'Store', icon: 'mdi-shopping', to: '/store' },
 ]
 
 const contributeItems = [
diff --git a/webapp/src/layouts/DefaultLayout.vue b/webapp/src/layouts/DefaultLayout.vue
new file mode 100644
index 0000000..2fa21ca
--- /dev/null
+++ b/webapp/src/layouts/DefaultLayout.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <slot name="header" />
+
+    <!-- Main content -->
+    <main class="mb-16">
+      <slot />
+    </main>
+
+    <!-- Footer -->
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Footer from '../components/layout/Footer.vue'
+</script>
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index 66770c1..d8b42c7 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -155,6 +155,14 @@ const router = createRouter({
         title: 'Press | DeFlock'
       }
     },
+    {
+      path: '/store',
+      name: 'store',
+      component: () => import('../views/Store.vue'),
+      meta: {
+        title: 'Store | DeFlock'
+      }
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'not-found',
diff --git a/webapp/src/views/Store.vue b/webapp/src/views/Store.vue
new file mode 100644
index 0000000..ca1134a
--- /dev/null
+++ b/webapp/src/views/Store.vue
@@ -0,0 +1,315 @@
+<template>
+  <DefaultLayout>
+    <template #header>
+      <Hero
+        title="DeFlock Store"
+        description="Full store coming soon! In the meantime, check out our free Downloads."
+        gradient="linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgb(var(--v-theme-secondary)) 100%)"
+      />
+    </template>
+
+    <v-container>
+      <!-- Loading State -->
+      <div v-if="loading" class="text-center py-8">
+        <v-progress-circular indeterminate color="primary" size="64" />
+        <p class="mt-4 text-grey">Loading printables...</p>
+      </div>
+
+      <!-- Error State -->
+      <v-alert
+        v-else-if="error"
+        type="error"
+        variant="tonal"
+        class="mb-6"
+        closable
+        @click:close="error = null"
+      >
+        <strong>Failed to load printables:</strong> {{ error }}
+      </v-alert>
+
+      <!-- Printables Grid -->
+      <div v-else-if="printables.length > 0">
+        <h2 class="text-h4 mb-6 font-weight-bold text-center">Printables</h2>
+        
+        <!-- Filter Section -->
+        <div class="filter-section mb-6">
+          <v-row justify="center">
+            <v-col cols="12" md="6" lg="4">
+              <v-select
+                v-model="selectedType"
+                :items="typeOptions"
+                label="Filter by type"
+                prepend-inner-icon="mdi-filter"
+                variant="outlined"
+                clearable
+                hide-details
+                class="filter-select"
+              >
+                <template v-slot:item="{ props, item }">
+                  <v-list-item v-bind="props">
+                    <template v-slot:prepend>
+                      <v-icon :color="getTypeColor(item.raw.value)">{{ getTypeIcon(item.raw.value) }}</v-icon>
+                    </template>
+                  </v-list-item>
+                </template>
+                <template v-slot:selection="{ item }">
+                  <div class="d-flex align-center">
+                    <v-icon :color="getTypeColor(item.raw.value)" class="mr-2">{{ getTypeIcon(item.raw.value) }}</v-icon>
+                    <span class="text-capitalize">{{ item.raw.title }}</span>
+                  </div>
+                </template>
+              </v-select>
+            </v-col>
+          </v-row>
+        </div>
+
+        <v-row>
+          <v-col
+            v-for="printable in filteredPrintables"
+            :key="printable.id"
+            cols="12"
+            md="6"
+            lg="4"
+          >
+            <v-card
+              elevation="2"
+              height="100%"
+            >
+              <!-- Preview Image -->
+              <div class="position-relative">
+                <v-img
+                  :src="getImageUrl(printable.preview)"
+                  :alt="`${printable.title} preview`"
+                  aspect-ratio="1.414"
+                  contain
+                >
+                  <template v-slot:placeholder>
+                    <div class="d-flex align-center justify-center fill-height">
+                      <v-progress-circular
+                        color="grey-lighten-4"
+                        indeterminate
+                      />
+                    </div>
+                  </template>
+                  
+                  <!-- Type Badge -->
+                  <v-chip
+                    :color="getTypeColor(printable.type)"
+                    size="small"
+                    class="ma-2 text-capitalize"
+                    style="position: absolute; top: 0; right: 0;"
+                  >
+                    <v-icon start size="small">{{ getTypeIcon(printable.type) }}</v-icon>
+                    {{ printable.type }}
+                  </v-chip>
+                </v-img>
+              </div>
+
+              <!-- Card Content -->
+              <v-card-text class="pb-2">
+                <h3 class="text-h6 font-weight-bold mb-2">
+                  {{ printable.title }}
+                </h3>
+                
+                <div class="d-flex align-center text-caption text-grey mb-3">
+                  <v-icon size="small" class="mr-1">mdi-account</v-icon>
+                  by {{ printable.author }}
+                  <v-tooltip text="Licensed under CC BY-NC 4.0">
+                    <template v-slot:activator="{ props }">
+                      <v-icon 
+                        v-bind="props"
+                        size="small" 
+                        class="ml-1"
+                        color="grey"
+                      >
+                        mdi-creative-commons
+                      </v-icon>
+                    </template>
+                  </v-tooltip>
+                  <v-spacer />
+                  <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+                  {{ formatDate(printable.date_updated) }}
+                </div>
+
+                <!-- Download Options -->
+                <div class="download-section">
+                  <p class="text-body-2 text-grey-darken-1 mb-3">
+                    Download options:
+                  </p>
+                  
+                  <div class="d-flex gap-2">
+                    <v-btn
+                      v-if="printable.front"
+                      :href="getImageUrl(printable.front)"
+                      target="_blank"
+                      download
+                      variant="tonal"
+                      color="primary"
+                      size="small"
+                      prepend-icon="mdi-download"
+                      class="flex-1-1-50"
+                    >
+                      Front Side
+                    </v-btn>
+                    
+                    <v-btn
+                      v-if="printable.back"
+                      :href="getImageUrl(printable.back)"
+                      target="_blank"
+                      download
+                      variant="tonal"
+                      color="secondary"
+                      size="small"
+                      prepend-icon="mdi-download"
+                      class="flex-1-1-50"
+                    >
+                      Back Side
+                    </v-btn>
+                  </div>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </div>
+
+      <!-- Empty State -->
+      <div v-else class="text-center py-12">
+        <v-icon size="64" color="grey-lighten-1">mdi-inbox-outline</v-icon>
+        <h3 class="text-h5 mt-4 mb-2 text-grey">No printables available</h3>
+        <p class="text-grey">Check back later for new content!</p>
+      </div>
+    </v-container>
+  </DefaultLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import type { Ref } from 'vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import Hero from '@/components/layout/Hero.vue';
+
+// Types
+interface Printable {
+  id: number;
+  date_updated: string;
+  type: string;
+  author: string;
+  preview: string;
+  front: string | null;
+  back: string | null;
+  title: string;
+}
+
+interface CMSResponse {
+  data: Printable[];
+}
+
+// Reactive state
+const printables: Ref<Printable[]> = ref([]);
+const loading = ref(true);
+const error: Ref<string | null> = ref(null);
+const selectedType: Ref<string | null> = ref(null);
+
+// Computed properties
+const typeOptions = computed(() => {
+  const types = [...new Set(printables.value.map(p => p.type))];
+  return types.map(type => ({
+    title: type.charAt(0).toUpperCase() + type.slice(1),
+    value: type
+  }));
+});
+
+const filteredPrintables = computed(() => {
+  if (!selectedType.value) {
+    return printables.value;
+  }
+  return printables.value.filter(printable => printable.type === selectedType.value);
+});
+
+// Methods
+const fetchPrintables = async (): Promise<void> => {
+  try {
+    loading.value = true;
+    error.value = null;
+    
+    const response = await fetch('https://cms.deflock.me/items/Printables');
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const data: CMSResponse = await response.json();
+    printables.value = data.data || [];
+  } catch (err) {
+    console.error('Error fetching printables:', err);
+    error.value = err instanceof Error ? err.message : 'Failed to load printables';
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getImageUrl = (imageId: string): string => {
+  if (!imageId) return '';
+  return `https://cms.deflock.me/assets/${imageId}`;
+};
+
+const getTypeColor = (type: string): string => {
+  const colors: Record<string, string> = {
+    poster: 'primary',
+    yardSign: 'secondary',
+    sticker: 'accent',
+    bumperSticker: 'info'
+  };
+  return colors[type.toLowerCase()] || 'grey';
+};
+
+const getTypeIcon = (type: string): string => {
+  const icons: Record<string, string> = {
+    poster: 'mdi-post',
+    yardSign: 'mdi-sign-real-estate',
+    sticker: 'mdi-sticker-circle-outline',
+    bumperSticker: 'mdi-rectangle-outline',
+  };
+  return icons[type.toLowerCase()] || 'mdi-file';
+};
+
+const formatDate = (dateString: string): string => {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+};
+
+// Lifecycle
+onMounted(() => {
+  fetchPrintables();
+});
+</script>
+
+<style scoped>
+.filter-section {
+  background: rgba(var(--v-theme-surface-variant), 0.1);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.filter-select {
+  max-width: 100%;
+}
+
+.download-section {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  padding-top: 12px;
+  margin-top: 8px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.flex-1-1-50 {
+  flex: 1 1 50%;
+}
+</style>
\ No newline at end of file