siteworxpro/gun-manager-frontend
1
Fork 0
Code Pull Requests Releases Activity

Compare commits

base: siteworxpro:108ec64b5fbc8c0fad0bcf63ca5b6b546860bf9a
Branches Tags
siteworxpro:master
...
compare: siteworxpro:master
Branches Tags
siteworxpro:master

13 Commits
108ec64b5f ... master

Author SHA1 Message Date
Ron Rise
156d77850a updated page layouts and format 2025-07-30 11:32:53 -04:00
Ron Rise
7358bb1a4c layout 2025-07-29 13:44:47 -04:00
Ron Rise
e2bc025d6f env 2025-07-29 13:06:19 -04:00
Ron Rise
c049df9a9f Add Docker support and update project dependencies; refactor components to use async imports 2025-07-28 18:43:03 -04:00
Ron Rise
26f44fd4ab This was the most stupid bug in the world, fixed in the smartest way ever 2024-01-24 23:08:43 -05:00
Ron Rise
d49e27bbb0 This bug has driven lots of coders completely mad. You won't believe how it ended up being fixed 2024-01-24 23:00:57 -05:00
Ron Rise
1fe91f4dfa Never gonna make you cry 2024-01-24 22:39:01 -05:00
Ron Rise
d0803a69ea Pig 2023-08-07 22:47:26 -04:00
Ron Rise
ac85b16cd8 Ugh. Bad rebase. 2023-08-07 22:12:09 -04:00
Ron Rise
1260cd5a8b this is how we generate our shit. 2023-08-07 22:08:54 -04:00
Ron Rise
26da7c6281 last hope failed, maybe now 2023-08-07 22:04:04 -04:00
Ron Rise
b7b03f8bab derp, helper method rename 2023-08-07 21:17:33 -04:00
Ron Rise
5183277554 REALLY FUCKING FIXED 2023-08-07 20:55:32 -04:00
23 changed files with 4020 additions and 1428 deletions
Expand all files Collapse all files

3
.dockerignore Normal file
View File

@@ -0,0 +1,3 @@
.idea/
.dist/
node_modules/

1
.env
View File

@@ -1 +0,0 @@
VITE_API=http://localhost:8000

2
.gitignore vendored
View File

@@ -23,3 +23,5 @@ dist-ssr
*.sln *.sln
*.sw? *.sw?
.idea/ .idea/
.env

2
.nvmrc
View File

@@ -1 +1 @@
v19.6.0 v22.14.0

24
README.md
View File

@@ -1,18 +1,6 @@
# Vue 3 + TypeScript + Vite ```shell
nvm use
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. npm run build
docker run -p 5173:80 -v $(PWD)/dist:/usr/share/caddy/ --rm caddy
## Recommended IDE Setup ```
[http://localhost:5173](http://localhost:5173)
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support For `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Load Data Manager</title> <title>Gun Manager</title>
<script src="https://kit.fontawesome.com/1a962b66c9.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/1a962b66c9.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>

4830
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@@ -9,19 +9,21 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"axios": "^1.4.0", "@primeuix/themes": "^1.2.2",
"primevue": "^3.30.2", "@tailwindcss/vite": "^4.1.11",
"sass": "^1.62.1", "axios": "^1.11.0",
"vue": "^3.3.4", "primevue": "^4.3.6",
"vue-router": "^4.2.4" "sass": "^1.89.2",
"vue": "^3.5.18",
"vue-router": "^4.5.1"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.1.0", "@vitejs/plugin-vue": "^6.0.1",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.21",
"postcss": "^8.4.23", "tailwindcss": "^4.1.11",
"tailwindcss": "^3.3.3", "typescript": "^5.8.3",
"typescript": "^5.0.2", "vite": "^7.0.6",
"vite": "^4.3.2", "vite-plugin-vue-devtools": "^8.0.0",
"vue-tsc": "^1.4.2" "vue-tsc": "^3.0.4"
} }
} }

6
postcss.config.js
View File

@@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

14
src/App.vue
View File

@@ -1,17 +1,11 @@
<template> <template>
<Toast />
<div class="flex flex-row flex-wrap m-10 justify-around"> <div class="flex flex-row flex-wrap m-10 justify-around">
<router-view /> <router-view />
</div> </div>
</template> </template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
<script> const Toast = defineAsyncComponent(() => import('primevue/toast'))
import { defineComponent } from "vue";
export default defineComponent({})
</script> </script>
<style>
body {
font-family: var(--font-family);
}
</style>

BIN
src/assets/guns.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 MiB

69
src/components/GunForm.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<Card> <Card>
<template #header> <template #title>
<div class="ml-5 pt-10"> <div class="ml-5 pt-10">
<h2 v-if="gun.id" class="text-3xl">Edit Gun</h2> <h2 v-if="gun.id" class="text-3xl">Edit Gun</h2>
<h2 v-else class="text-3xl">Add Gun</h2> <h2 v-else class="text-3xl">Add Gun</h2>
@@ -53,7 +53,7 @@
<div class="w-full mt-5"> <div class="w-full mt-5">
<div class="flex gap-2" style="flex-direction: column"> <div class="flex gap-2" style="flex-direction: column">
<label for="date_purchased">Date Purchased</label> <label for="date_purchased">Date Purchased</label>
<Calendar v-model="gun.date_purchased"/> <DatePicker date-format="mm/dd/yy" v-model="gun.date_purchased"/>
</div> </div>
</div> </div>
<div class="w-full mt-5"> <div class="w-full mt-5">
@@ -62,37 +62,80 @@
<Textarea v-model="gun.notes"/> <Textarea v-model="gun.notes"/>
</div> </div>
</div> </div>
<div class="w-full mt-5"> <div class="w-full mt-5" v-if="gun.id">
<div class="flex gap-2" style="flex-direction: column"> <div class="flex gap-2" style="flex-direction: column">
<label for="value_amount">Photos</label> <label for="value_amount">Photos</label>
<FileUpload <FileUpload
:showUploadButton="gun.id === false"
:showCancelButton="false" :showCancelButton="false"
accept="image/*" accept="image/*"
:multiple="gun.id === null" multiple
:url="`${url}/gun/photo/${gun.id}`"
@upload="$emit('upload')"
/> />
</div> </div>
</div> </div>
<div class="w-full mt-5"> <div class="w-full mt-5">
<Button @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
<router-link to="/guns"> <router-link to="/guns">
<Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/> <Button severity="secondary" class="mr-3" icon="fa-sharp fa-light fa-arrow-left" label="Back"/>
</router-link> </router-link>
<Button :loading="loading" @click="$emit('save')" severity="success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
<ConfirmPopup />
<Button @click="confirmDelete" v-if="gun.id" class="p-button-danger ml-3" icon="fa-sharp fa-light fa-trash" label="Delete"/>
</div> </div>
</div> </div>
</template> </template>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import {defineComponent} from "vue"; import { computed, defineAsyncComponent } from 'vue'
import axios from "axios"
import { useConfirm } from 'primevue/useconfirm'
import { useRouter } from 'vue-router'
export default defineComponent({ const confirm = useConfirm()
props: { const router = useRouter()
const ConfirmPopup = defineAsyncComponent(() => import('primevue/confirmpopup'))
const InputText = defineAsyncComponent(() => import('primevue/inputtext'))
const InputNumber = defineAsyncComponent(() => import('primevue/inputnumber'))
const DatePicker = defineAsyncComponent(() => import('primevue/datepicker'))
const Textarea = defineAsyncComponent(() => import('primevue/textarea'))
const FileUpload = defineAsyncComponent(() => import('primevue/fileupload'))
const Button = defineAsyncComponent(() => import('primevue/button'))
const Card = defineAsyncComponent(() => import('primevue/card'))
const props = defineProps({
loading: {
type: Boolean,
default: false
},
gun: { gun: {
type: Object, type: Object,
required: true required: true
} }
}
}) })
const url = computed(() => {
return import.meta.env.VITE_API
})
function confirmDelete() {
confirm.require({
message: 'Are you sure you want to delete this gun?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
deleteGun()
},
reject: () => {
}
});
}
function deleteGun() {
axios.delete(`${import.meta.env.VITE_API}/gun/${props.gun.id}`)
.then(() => {
router.push('/guns')
})
}
</script> </script>

21
src/localstorage/index.ts Normal file
View File

@@ -0,0 +1,21 @@
export function SaveToLocalStorage<T>(key: string, value: T): void {
try {
const serializedValue = JSON.stringify(value);
localStorage.setItem(key, serializedValue);
} catch (error) {
console.error("Error saving to localStorage", error);
}
}
export function GetFromLocalStorage<T>(key: string): T | null {
try {
const serializedValue = localStorage.getItem(key);
if (serializedValue === null) {
return null;
}
return JSON.parse(serializedValue) as T;
} catch (error) {
console.error("Error reading from localStorage", error);
return null;
}
}

46
src/main.ts
View File

@@ -1,42 +1,24 @@
import { createApp } from 'vue' import { createApp } from 'vue'
// @ts-ignore import Aura from '@primeuix/themes/aura';
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import PrimeVue from 'primevue/config'; import PrimeVue from 'primevue/config';
import "primevue/resources/primevue.min.css";
import "primevue/resources/themes/viva-dark/theme.css"; import './styles.css'
import "./styles.css"
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.use(PrimeVue) app.use(PrimeVue, {
theme: {
preset: Aura,
prefix: "p-",
},
})
import Menubar from 'primevue/menubar'; import ConfirmationService from 'primevue/confirmationservice'
import Button from "primevue/button" import ToastService from 'primevue/toastservice'
import Card from 'primevue/card'; app.use(ConfirmationService)
import Calendar from "primevue/calendar"; app.use(ToastService)
import Dropdown from 'primevue/dropdown';
import InputNumber from 'primevue/inputnumber';
import Textarea from 'primevue/textarea';
import FileUpload from 'primevue/fileupload';
import InputText from 'primevue/inputtext';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup';
import Row from 'primevue/row';
app.component('Button', Button);
app.component('Card', Card);
app.component('Menubar', Menubar);
app.component('Dropdown', Dropdown);
app.component('InputNumber', InputNumber);
app.component('FileUpload', FileUpload);
app.component('InputText', InputText);
app.component('DataTable', DataTable);
app.component('Column', Column);
app.component('ColumnGroup', ColumnGroup);
app.component('Calendar', Calendar);
app.component('Row', Row);
app.component('Textarea', Textarea);
app.mount('#app') app.mount('#app')

45
src/pages/Add.vue
View File

@@ -1,31 +1,20 @@
<template> <template>
<div class="md:w-2/3"> <div class="md:w-2/3">
<GunForm @save="save" :gun="gun" /> <GunForm :loading="loading" @save="save" :gun="gun" :photos="photos" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import {defineComponent} from "vue"; import { defineAsyncComponent, ref } from 'vue'
import {Nullable} from "primevue/ts-helpers";
import axios from "axios"; import axios from "axios";
import {Response} from "../types/Response"; import {Response} from "../types/Response";
import GunForm from "../components/GunForm.vue"; import { useRouter } from 'vue-router'
interface Data { const router = useRouter();
gun: {
make: string
model: string
serial_number: string
purchase_amount: Nullable<number>
value_amount: Nullable<number>
date_purchased: string
notes: string
}
}
export default defineComponent({ const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'));
components: {GunForm},
data: (): Data => ({ const loading = ref(false);
gun: { const gun = ref({
make: "", make: "",
model: "", model: "",
serial_number: "", serial_number: "",
@@ -33,14 +22,14 @@ export default defineComponent({
value_amount: 0, value_amount: 0,
date_purchased: "", date_purchased: "",
notes: "" notes: ""
} });
}),
methods: { const photos = ref<Array<File>>([]);
save() {
axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => { function save() {
this.$router.push('/gun/' + r.data.payload.id) loading.value = true
axios.post(import.meta.env.VITE_API + '/gun', gun.value).then((r: Response<{ id: number }>) => {
router.push(`/edit/${r.data.payload.id}`)
}) })
} }
}
})
</script> </script>

129
src/pages/Edit.vue
View File

@@ -1,65 +1,118 @@
<template> <template>
<div class="w-full flex flex-row flex-wrap justify-around"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
<div class="w-full lg:w-1/2 m-5"> <div class="w-full">
<GunForm @save="save" :gun="gun"/> <GunForm :loading="loading" @upload="getGun" v-if="gun" @save="save" :gun="gun"/>
</div> </div>
<div class="mt-10 w-full lg:w-1/2 m-5">
<div class="">
<Card> <Card>
<template #content v-if="gun != null"> <template #content v-if="gun != null">
<h3 class="text-lg font-bold"> <h3 class="text-lg font-bold">
Images Images
</h3> </h3>
<div style="border-top: 1px rgba(123,123,123,0.4) solid; border-bottom: 1px rgba(123,123,123,0.4) solid;" class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos"> <div
class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
<div> <div>
<a target="_blank" :href="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`"> <Image
<img :alt="photo.file_name" :src="`${remoteUrl}/gun/photo/${photo.id}/100/${photo.file_name}`"/> preview
{{ photo.file_name }} :src="`${remoteUrl}/gun/photo/${photo.id}/200/${photo.file_name}`"
</a> >
<template #original="slotProps">
<img
:style="slotProps.style"
:src="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`"
alt="Gun Photo"
/>
</template>
</Image>
</div> </div>
<div> <div>
<i style="color: red;" class="fa-regular fa-2x fa-trash"></i> <ConfirmPopup />
<Button size="small" @click="deletePhoto(photo.id)">
<i style="color: red;" class="fa-regular fa-1x fa-trash mr-1"></i> Delete Photo
</Button>
</div> </div>
</div> </div>
</template> </template>
</Card> </Card>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import {defineComponent} from "vue" import { computed, defineAsyncComponent, ref } from 'vue'
import axios from "axios" import axios from "axios"
import {Response} from "../types/Response" import {Response} from "../types/Response"
import {Guns} from "../types/guns"; import {Guns} from "../types/guns";
import GunForm from "../components/GunForm.vue"; import { useRoute } from 'vue-router'
import { useToast } from 'primevue'
import { useConfirm } from 'primevue/useconfirm'
interface Data { const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'))
gun: Guns | null const ConfirmPopup = defineAsyncComponent(() => import('primevue/confirmpopup'));
} const Image = defineAsyncComponent(() => import('primevue/image'));
const Button = defineAsyncComponent(() => import('primevue/button'));
const Card = defineAsyncComponent(() => import('primevue/card'));
export default defineComponent({ const route = useRoute()
components: {GunForm}, const toast = useToast()
data: (): Data => ({ const confirm = useConfirm()
gun: null
}), const loading = ref(false)
created() { const gun = ref<Guns | null>(null)
this.getGun()
}, const remoteUrl = computed(() => {
computed: {
remoteUrl() {
return import.meta.env.VITE_API return import.meta.env.VITE_API
}
},
methods: {
getGun() {
axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
.then((r: Response<Guns>) => {
this.gun = r.data.payload
}) })
},
save() {
} function getGun() {
} axios.get(import.meta.env.VITE_API + `/gun/${route.params.id}`)
.then((r: Response<Guns>) => {
gun.value = r.data.payload
}) })
}
function deletePhoto(photoId: number) {
confirm.require({
message: 'Are you sure you want to delete this photo?',
acceptClass: 'p-button-danger',
acceptIcon: 'fa-solid fa-trash',
rejectIcon: 'fa-solid fa-ban',
accept: () => {
deletePhotoConfirmed(photoId)
},
reject: () => {}
})
}
function deletePhotoConfirmed(photoId: number) {
axios.delete(import.meta.env.VITE_API + `/gun/photo/${photoId}`)
.then(() => {
toast.add({
severity: 'success',
summary: 'Success',
detail: 'Photo deleted successfully',
life: 3000
})
getGun()
})
}
function save() {
loading.value = true
axios.put(import.meta.env.VITE_API + `/gun/${route.params.id}`, gun.value)
.then(() => {
toast.add({
severity: 'success',
summary: 'Success',
detail: 'Gun updated successfully',
life: 3000
})
getGun()
})
.finally(() => {
loading.value = false
})
}
getGun()
</script> </script>

113
src/pages/Guns.vue
View File

@@ -1,14 +1,39 @@
<template> <template>
<Card> <Card class="w-full">
<template #title> <template #title>
Gun List Gun List
</template> </template>
<template #content> <template #content>
<DataTable class="p-datatable-sm" :value="guns"> <span class="p-input-icon-left w-full">
<Column sortable field="id" header="ID"></Column> <InputGroup class="mb-2">
<Column sortable field="make" header="Make"></Column> <InputGroupAddon>
<Column sortable field="model" header="Model"></Column> <i class="fa-solid fa-2x fa-magnifying-glass"></i>
<Column sortable field="value_amount" header="Value"> </InputGroupAddon>
<InputText
size="small"
v-model="filters.global.value"
class="w-full mb-3"
placeholder="Search"
/>
</InputGroup>
</span>
<DataTable
v-if="sortField"
:sortField="sortField.field"
:sortOrder="sortField.direction"
:globalFilterFields="['make', 'model']"
:loading="loading"
filterDisplay="row"
v-model:filters="filters"
:value="guns"
size="small"
@sort="onSortChange"
>
<Column :sortable="true" field="id" header="ID"></Column>
<Column :sortable="true" field="make" header="Make"></Column>
<Column :sortable="true" field="model" header="Model"></Column>
<Column :sortable="true" field="value_amount" header="Value">
<template #body="slotProps"> <template #body="slotProps">
${{ slotProps.data.value_amount }} ${{ slotProps.data.value_amount }}
</template> </template>
@@ -31,35 +56,81 @@
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent} from "vue"; const LocalStorageKey = 'sortField'
</script>
<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
import {Guns} from "../types/guns"; import {Guns} from "../types/guns";
import {Response} from "../types/Response"; import {Response} from "../types/Response";
import axios from 'axios' import axios from 'axios'
import { DataTableFilterMetaData, DataTableSortEvent } from 'primevue/datatable'
import Column from 'primevue/column';
import { GetFromLocalStorage, SaveToLocalStorage } from '../localstorage'
interface Data { const Button = defineAsyncComponent(() => import('primevue/button'));
guns: Array<Guns> const Card = defineAsyncComponent(() => import('primevue/card'));
const InputText = defineAsyncComponent(() => import('primevue/inputtext'));
const DataTable = defineAsyncComponent(() => import('primevue/datatable'));
const InputGroup = defineAsyncComponent(() => import('primevue/inputgroup'));
const InputGroupAddon = defineAsyncComponent(() => import('primevue/inputgroupaddon'));
const guns = ref<Guns[]>([])
const loading = ref<boolean>(false)
const filters = ref<{global: DataTableFilterMetaData}>({
global: {
value: "",
matchMode: "contains"
} as DataTableFilterMetaData
})
const sortField = ref<{ field: string, direction: number } | null>(GetFromLocalStorage(LocalStorageKey))
if (!sortField.value) {
sortField.value = { field: 'id', direction: 1 }
} }
export default defineComponent({ const total = computed(() => {
data: (): Data => ({
guns: []
}),
computed: {
total() {
let total = 0; let total = 0;
this.guns.map(g => { guns.value.map(g => {
total += g.value_amount total += g.value_amount
}) })
return total return total
} })
},
created() { function fetchGuns() {
loading.value = true
axios.get(import.meta.env.VITE_API + '/gun') axios.get(import.meta.env.VITE_API + '/gun')
.then((r: Response<Array<Guns>>) => { .then((r: Response<Array<Guns>>) => {
this.guns = r.data.payload guns.value = r.data.payload
}) })
}, .finally(() => {
loading.value = false
})
}
function onSortChange(event: DataTableSortEvent) {
let field = event.sortField || 'id'
let direction = event.sortOrder || 1
if (typeof field !== 'string') {
field = 'id'
}
if (!direction || typeof direction === 'undefined') {
direction = 1
}
SaveToLocalStorage<{ field: string, direction: number }>(LocalStorageKey, {
field: field,
direction: direction
})
console.log('onSortChange', event)
}
onMounted(() => {
fetchGuns()
}) })
</script> </script>

14
src/pages/Index.vue
View File

@@ -1,15 +1,19 @@
<template> <template>
<Card class="w-full lg:w-1/2 text-center"> <Card class="w-full md:w-1/2 text-center">
<template #title> Welcome to Your Gun Database</template> <template #title> Welcome to Your Gun Database</template>
<template #content> <template #content>
<img :src="imgUrl" alt="Gun Database Logo" />
<router-link to="/guns"> <router-link to="/guns">
<Button>Go To Gun List</Button> <Button class="mt-3">Go To Gun List</Button>
</router-link> </router-link>
</template> </template>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import {defineComponent} from "vue"; import { defineAsyncComponent } from 'vue'
export default defineComponent({}) import imgUrl from '../assets/guns.gif'
const Card = defineAsyncComponent(() => import('primevue/card'));
const Button = defineAsyncComponent(() => import('primevue/button'));
</script> </script>

15
src/router/index.ts
View File

@@ -1,14 +1,9 @@
import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router"; import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
// @ts-ignore const Index = () => import('../pages/Index.vue');
import Index from "../pages/Index.vue"; const Guns = () => import('../pages/Guns.vue');
// @ts-ignore const Add = () => import('../pages/Add.vue');
import BulletCreate from "../pages/bullets/Create.vue"; const Edit = () => import('../pages/Edit.vue');
// @ts-ignore
import BulletList from "../pages/bullets/List.vue";
import Guns from "../pages/Guns.vue";
import Add from "../pages/Add.vue";
import Edit from "../pages/Edit.vue";
const routes = [ const routes = [
{ {

4
src/styles.css
View File

@@ -1,3 +1 @@
@tailwind base; @import "tailwindcss";
@tailwind components;
@tailwind utilities;

6
src/types/guns.d.ts vendored
View File

@@ -1,13 +1,13 @@
export interface Guns { export interface Guns {
id: Number id: number
make: string make: string
model: string model: string
value_amount: Number value_amount: number
purchase_amount: number purchase_amount: number
photos: Array<Photo> photos: Array<Photo>
} }
export interface Photo { export interface Photo {
id: Number id: number
file_name: string file_name: string
} }

6
tailwind.config.js
View File

@@ -1,5 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./src/**/*.{html,js,vue}"], content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: { theme: {
extend: {}, extend: {},
}, },

8
vite.config.ts
View File

@@ -1,7 +1,13 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue(), tailwindcss(), vueDevTools(
{
launchEditor: 'webstorm'
}
)],
}) })