staging changes before experimentation
This commit is contained in:
C committed
1 parent
2082bb7ba4
commit
71fee1eb11
6 files changed
+430
-8
No files matched your search
+150
-8
@@ -1,19 +1,122 @@
|
||||
<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
|
||||
<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
|
||||
@@ -27,8 +130,12 @@
|
||||
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 },
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<v-navigation-drawer v-model="drawer">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-view-dashboard"
|
||||
title="Dashboard"
|
||||
value="dashboard"
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-chart-box"
|
||||
title="Statistics"
|
||||
value="stats"
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-cog"
|
||||
title="Settings"
|
||||
value="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>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-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const drawer = ref(false)
|
||||
const items = [
|
||||
{ key: 1, title: "Marvel", value: 1 },
|
||||
{ key: 2, title: "Duplo", value: 1 },
|
||||
{ key: 3, title: "Harry Potter", value: 1 },
|
||||
{ key: 4, title: "Friends", value: 2 }, // Listed twice in original list
|
||||
{ key: 5, title: "Sonic", value: 1 },
|
||||
{ key: 6, title: "Mario", value: 1 },
|
||||
{ key: 7, title: "DC", value: 1 },
|
||||
{ key: 8, title: "Avatar", value: 1 },
|
||||
{ key: 9, title: "Classic", value: 1 },
|
||||
{ key: 10, title: "City", value: 1 },
|
||||
{ key: 11, title: "Fortnite", value: 1 },
|
||||
{ key: 12, title: "Wednesday", value: 1 },
|
||||
{ key: 13, title: "Wicked", value: 1 },
|
||||
{ key: 14, title: "Speed Champs", value: 1 },
|
||||
{ key: 15, title: "Animal Crossing", value: 1 },
|
||||
{ key: 16, title: "Creator", value: 1 },
|
||||
{ key: 17, title: "Ideas", value: 2 }, // Listed twice in original list
|
||||
{ key: 18, title: "Ninjago", value: 1 },
|
||||
{ key: 19, title: "JP", value: 1 },
|
||||
{ key: 20, title: "Star Wars", value: 1 },
|
||||
{ key: 21, title: "Architecture", value: 1 },
|
||||
{ key: 22, title: "Icons", value: 1 },
|
||||
{ key: 23, title: "Dots", value: 1 },
|
||||
{ key: 24, title: "Dreamzzz", value: 1 },
|
||||
{ key: 25, title: "One Piece", value: 1 },
|
||||
{ key: 26, title: "Bluey", value: 1 },
|
||||
{ key: 27, title: "Disney", value: 1 },
|
||||
{ key: 28, title: "Technic", value: 1 },
|
||||
{ key: 29, title: "Art", value: 1 },
|
||||
{ key: 30, title: "Botanicals", value: 1 }
|
||||
]
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({ drawer: null }),
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<v-pie
|
||||
title="Dynamic Sets by Theme"
|
||||
animation
|
||||
legend
|
||||
:palette="palette"
|
||||
tooltip
|
||||
reveal
|
||||
:items="dynamicItems"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
// Sample API endpoint - replace with your actual data source
|
||||
const API_URL = 'https://api.example.com/themes'
|
||||
|
||||
const 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'
|
||||
]
|
||||
|
||||
const dynamicItems = ref([])
|
||||
|
||||
// Simulated API call - replace this with your actual data fetching logic
|
||||
const fetchThemeData = async () => {
|
||||
try {
|
||||
// In a real application, you would fetch data from your API
|
||||
// const response = await fetch(API_URL)
|
||||
// const data = await response.json()
|
||||
|
||||
// For demonstration, we'll simulate some dynamic data
|
||||
const mockData = await simulateAPICall()
|
||||
dynamicItems.value = mockData
|
||||
} catch (error) {
|
||||
console.error('Error fetching theme data:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// This function simulates an API call - replace with your actual data source
|
||||
const simulateAPICall = () => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// This generates random values for demonstration
|
||||
const themes = [
|
||||
'Marvel', 'Duplo', 'Harry Potter', 'Friends', 'Star Wars',
|
||||
'City', 'Technic', 'Creator', 'Ninjago', 'Disney'
|
||||
]
|
||||
|
||||
const data = themes.map((theme, index) => ({
|
||||
key: index + 1,
|
||||
title: theme,
|
||||
value: Math.floor(Math.random() * 5) + 1 // Random value between 1-5
|
||||
}))
|
||||
|
||||
resolve(data)
|
||||
}, 1000) // Simulate network delay
|
||||
})
|
||||
}
|
||||
|
||||
// Fetch data when component mounts
|
||||
onMounted(() => {
|
||||
fetchThemeData()
|
||||
})
|
||||
</script>
|
||||
Whitespace-only changes.
Whitespace-only changes.
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card class="mb-4">
|
||||
<v-card-title>Demo Components</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Basic Card -->
|
||||
<v-col cols="12" md="4">
|
||||
<v-card>
|
||||
<v-card-title>Basic Card</v-card-title>
|
||||
<v-card-text>
|
||||
This is a basic card component with title and content.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Card with Actions -->
|
||||
<v-col cols="12" md="4">
|
||||
<v-card>
|
||||
<v-card-title>Interactive Card</v-card-title>
|
||||
<v-card-text>
|
||||
This card has buttons and actions.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="primary">Action</v-btn>
|
||||
<v-btn color="secondary">Cancel</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Card with Icon -->
|
||||
<v-col cols="12" md="4">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<v-icon start>mdi-star</v-icon>
|
||||
Card with Icon
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
This card shows how to use icons.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Form Elements -->
|
||||
<v-row class="mt-4">
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Form Elements</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
label="Text Input"
|
||||
placeholder="Enter some text"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
label="Select Option"
|
||||
:items="['Option 1', 'Option 2', 'Option 3']"
|
||||
variant="outlined"
|
||||
></v-select>
|
||||
<v-checkbox
|
||||
label="Checkbox Example"
|
||||
></v-checkbox>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Data Display -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Data Display</v-card-title>
|
||||
<v-card-text>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(item, i) in demoItems"
|
||||
:key="i"
|
||||
:title="item.title"
|
||||
:subtitle="item.subtitle"
|
||||
:prepend-icon="item.icon"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const demoItems = [
|
||||
{
|
||||
title: 'List Item 1',
|
||||
subtitle: 'With an icon and subtitle',
|
||||
icon: 'mdi-account'
|
||||
},
|
||||
{
|
||||
title: 'List Item 2',
|
||||
subtitle: 'Another example item',
|
||||
icon: 'mdi-bell'
|
||||
},
|
||||
{
|
||||
title: 'List Item 3',
|
||||
subtitle: 'One more for good measure',
|
||||
icon: 'mdi-cog'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
Reference in new issue
Block a user