staging changes before experimentation
This commit is contained in:
C committed
1 parent
2082bb7ba4
commit
71fee1eb11
6 files changed
+442
-20
No files matched your search
+162
-20
@@ -1,34 +1,141 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<v-navigation-drawer v-model="drawer">
|
||||
<!-- -->
|
||||
hello bleb smooch
|
||||
<v-list>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-view-dashboard"
|
||||
title="Dashboard"
|
||||
value="dashboard"
|
||||
to="/"
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-chart-box"
|
||||
title="Statistics"
|
||||
value="stats"
|
||||
to="/stats"
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-code-tags"
|
||||
title="Demo"
|
||||
value="demo"
|
||||
to="/demo"
|
||||
color="primary"
|
||||
/>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-cog"
|
||||
title="Settings"
|
||||
value="settings"
|
||||
to="/settings"
|
||||
/>
|
||||
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-app-bar>
|
||||
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
|
||||
<v-app-bar-title>Inventory System Status</v-app-bar-title>
|
||||
<v-app-bar-title>Dashboard</v-app-bar-title>
|
||||
|
||||
</v-app-bar>
|
||||
|
||||
<v-main>
|
||||
<v-pie
|
||||
title="Sets by theme"
|
||||
animation
|
||||
legend
|
||||
:palette="['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD',
|
||||
'#D4A5A5', '#9B59B6', '#3498DB', '#E74C3C', '#2ECC71',
|
||||
'#F1C40F', '#1ABC9C', '#D35400', '#C0392B', '#8E44AD',
|
||||
'#2980B9', '#27AE60', '#F39C12', '#16A085', '#E67E22',
|
||||
'#9B59B6', '#2C3E50', '#E84393', '#00B894', '#FD79A8',
|
||||
'#6C5CE7', '#A8E6CF', '#DCEDC1', '#FFD3B6', '#FFAAA5',
|
||||
'#FF8B94', '#A8D8EA']"
|
||||
tooltip
|
||||
reveal
|
||||
:items="items"
|
||||
/>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<!-- Column 1: Database Changes List -->
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="mb-4">
|
||||
<v-card-title>Recent Changes</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(change, index) in recentChanges"
|
||||
:key="index"
|
||||
:title="change.title"
|
||||
:subtitle="change.timestamp"
|
||||
:prepend-icon="change.type === 'add' ? 'mdi-plus-circle' : change.type === 'remove' ? 'mdi-minus-circle' : 'mdi-pencil'"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon :color="change.type === 'add' ? 'success' : change.type === 'remove' ? 'error' : 'info'">
|
||||
{{ change.type === 'add' ? 'mdi-plus-circle' : change.type === 'remove' ? 'mdi-minus-circle' : 'mdi-pencil' }}
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Column 2: Graphs and Statistics -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="mb-4">
|
||||
<v-card-title>Changes Over Time</v-card-title>
|
||||
<v-card-text>
|
||||
<v-sheet height="300">
|
||||
<!-- Placeholder for line chart - you can add your preferred charting library here -->
|
||||
<v-responsive class="text-center">
|
||||
Line Chart Coming Soon
|
||||
</v-responsive>
|
||||
</v-sheet>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mb-4">
|
||||
<v-card-title>Statistics</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-card variant="outlined">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h3">{{ totalSets }}</div>
|
||||
<div class="text-subtitle-1">Total Sets</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-card variant="outlined">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h3">{{ totalThemes }}</div>
|
||||
<div class="text-subtitle-1">Total Themes</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-card variant="outlined">
|
||||
<v-card-text class="text-center">
|
||||
<div class="text-h3">{{ changesThisWeek }}</div>
|
||||
<div class="text-subtitle-1">Changes This Week</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Column 3: Pie Chart -->
|
||||
<v-col cols="12" md="3">
|
||||
<v-card>
|
||||
<v-card-title>Theme Distribution</v-card-title>
|
||||
<v-card-text>
|
||||
<v-pie
|
||||
title="Sets by theme"
|
||||
animation
|
||||
legend
|
||||
:palette="['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD',
|
||||
'#D4A5A5', '#9B59B6', '#3498DB', '#E74C3C', '#2ECC71',
|
||||
'#F1C40F', '#1ABC9C', '#D35400', '#C0392B', '#8E44AD',
|
||||
'#2980B9', '#27AE60', '#F39C12', '#16A085', '#E67E22',
|
||||
'#9B59B6', '#2C3E50', '#E84393', '#00B894', '#FD79A8',
|
||||
'#6C5CE7', '#A8E6CF', '#DCEDC1', '#FFD3B6', '#FFAAA5',
|
||||
'#FF8B94', '#A8D8EA']"
|
||||
tooltip
|
||||
reveal
|
||||
:items="items"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
@@ -36,9 +143,44 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const drawer = ref(false)
|
||||
|
||||
// Statistics
|
||||
const totalSets = computed(() => items.reduce((acc, item) => acc + item.value, 0))
|
||||
const totalThemes = computed(() => items.length)
|
||||
const changesThisWeek = ref(12) // This could be computed from recentChanges if needed
|
||||
|
||||
// Sample recent changes data
|
||||
const recentChanges = [
|
||||
{
|
||||
title: "Added new Marvel set",
|
||||
timestamp: "2 minutes ago",
|
||||
type: "add"
|
||||
},
|
||||
{
|
||||
title: "Updated Harry Potter count",
|
||||
timestamp: "15 minutes ago",
|
||||
type: "update"
|
||||
},
|
||||
{
|
||||
title: "Removed duplicate Friends set",
|
||||
timestamp: "1 hour ago",
|
||||
type: "remove"
|
||||
},
|
||||
{
|
||||
title: "Added Star Wars set",
|
||||
timestamp: "2 hours ago",
|
||||
type: "add"
|
||||
},
|
||||
{
|
||||
title: "Updated Technic inventory",
|
||||
timestamp: "3 hours ago",
|
||||
type: "update"
|
||||
}
|
||||
]
|
||||
|
||||
const drawer = ref(null)
|
||||
const items = [
|
||||
{ key: 1, title: "Marvel", value: 1 },
|
||||
{ key: 2, title: "Duplo", value: 1 },
|
||||
|
||||
Reference in new issue
Block a user