You've already forked gun-manager-frontend
What happens in vegas stays in vegas
This commit is contained in:
17
src/App.vue
Normal file
17
src/App.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="flex flex-row m-10 justify-around">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
</style>
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
0
src/axios/index.ts
Normal file
0
src/axios/index.ts
Normal file
42
src/main.ts
Normal file
42
src/main.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { createApp } from 'vue'
|
||||
// @ts-ignore
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import PrimeVue from 'primevue/config';
|
||||
import "primevue/resources/primevue.min.css";
|
||||
import "primevue/resources/themes/viva-dark/theme.css";
|
||||
import "./styles.css"
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.use(PrimeVue)
|
||||
|
||||
import Menubar from 'primevue/menubar';
|
||||
import Button from "primevue/button"
|
||||
import Card from 'primevue/card';
|
||||
import Calendar from "primevue/calendar";
|
||||
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')
|
||||
118
src/pages/Add.vue
Normal file
118
src/pages/Add.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<Card class="w-full md:w-2/3">
|
||||
<template #header>
|
||||
<div class="ml-5 mt-7">
|
||||
<h2 class="text-3xl">Add Gun</h2>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<div class="w-full">
|
||||
<div class="flex gap-2" style="flex-direction: column">
|
||||
<label for="make">Make</label>
|
||||
<InputText v-model="gun.make" id="make"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-5">
|
||||
<div class="flex gap-2" style="flex-direction: column">
|
||||
<label for="model">Model</label>
|
||||
<InputText v-model="gun.model" id="model"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-5">
|
||||
<div class="flex gap-2" style="flex-direction: column">
|
||||
<label for="serial_number">Serial Number</label>
|
||||
<InputText v-model="gun.serial_number" id="serial_number"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-5">
|
||||
<div class="flex gap-2" style="flex-direction: column">
|
||||
<label for="purchase_amount">Purchase Amount</label>
|
||||
<InputNumber
|
||||
v-model="gun.purchase_amount"
|
||||
:maxFractionDigits="0"
|
||||
:minFractionDigits="0"
|
||||
:min="0"
|
||||
id="purchase_amount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-5">
|
||||
<div class="flex gap-2" style="flex-direction: column">
|
||||
<label for="value_amount">Value Amount</label>
|
||||
<InputNumber
|
||||
v-model="gun.value_amount"
|
||||
:maxFractionDigits="0"
|
||||
:minFractionDigits="0"
|
||||
:min="0"
|
||||
id="value_amount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-5">
|
||||
<div class="flex gap-2" style="flex-direction: column">
|
||||
<label for="date_purchased">Date Purchased</label>
|
||||
<Calendar v-model="gun.date_purchased"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-5">
|
||||
<div class="flex gap-2" style="flex-direction: column">
|
||||
<label for="value_amount">Notes</label>
|
||||
<Textarea v-model="gun.notes"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-5">
|
||||
<div class="flex gap-2" style="flex-direction: column">
|
||||
<label for="value_amount">Photos</label>
|
||||
<FileUpload :showUploadButton="false" :showCancelButton="false" accept="image/*" multiple/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-5">
|
||||
<Button @click="save" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
|
||||
<router-link to="/guns">
|
||||
<Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
import {Nullable} from "primevue/ts-helpers";
|
||||
import axios from "axios";
|
||||
import {Response} from "../types/Response";
|
||||
|
||||
interface Data {
|
||||
gun: {
|
||||
make: string
|
||||
model: string
|
||||
serial_number: string
|
||||
purchase_amount: Nullable<number>
|
||||
value_amount: Nullable<number>
|
||||
date_purchased: string
|
||||
notes: string
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
data: (): Data => ({
|
||||
gun: {
|
||||
make: "",
|
||||
model: "",
|
||||
serial_number: "",
|
||||
purchase_amount: 0,
|
||||
value_amount: 0,
|
||||
date_purchased: "",
|
||||
notes: ""
|
||||
}
|
||||
}),
|
||||
methods: {
|
||||
save() {
|
||||
axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => {
|
||||
this.$router.push('/gun/' + r.data.payload.id)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
18
src/pages/Edit.vue
Normal file
18
src/pages/Edit.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<img :src="`${remoteUrl}/gun/photo/1/IMG_0436.jpg`" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
import axios from "axios"
|
||||
|
||||
export default defineComponent({
|
||||
created() {
|
||||
axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
|
||||
},
|
||||
computed: {
|
||||
remoteUrl() {
|
||||
return import.meta.env.VITE_API
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
65
src/pages/Guns.vue
Normal file
65
src/pages/Guns.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<Card>
|
||||
<template #title>
|
||||
Gun List
|
||||
</template>
|
||||
<template #content>
|
||||
<DataTable class="p-datatable-sm" :value="guns">
|
||||
<Column sortable field="id" header="ID"></Column>
|
||||
<Column sortable field="make" header="Make"></Column>
|
||||
<Column sortable field="model" header="Model"></Column>
|
||||
<Column sortable field="value_amount" header="Value">
|
||||
<template #body="slotProps">
|
||||
${{ slotProps.data.value_amount }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column>
|
||||
<template #body="slotProps">
|
||||
<router-link :to="`/edit/${slotProps.data.id}`">edit</router-link>
|
||||
</template>
|
||||
</Column>
|
||||
<template #footer>
|
||||
Total Value: ${{ total }}
|
||||
</template>
|
||||
</DataTable>
|
||||
</template>
|
||||
<template #footer>
|
||||
<router-link to="/add">
|
||||
<Button class="p-button-secondary">Add Gun</Button>
|
||||
</router-link>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
import {Guns} from "../types/guns";
|
||||
import {Response} from "../types/Response";
|
||||
import axios from 'axios'
|
||||
|
||||
interface Data {
|
||||
guns: Array<Guns>
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
data: (): Data => ({
|
||||
guns: []
|
||||
}),
|
||||
computed: {
|
||||
total() {
|
||||
let total = 0;
|
||||
|
||||
this.guns.map(g => {
|
||||
total += g.value_amount
|
||||
})
|
||||
|
||||
return total
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get(import.meta.env.VITE_API + '/gun')
|
||||
.then((r: Response<Array<Guns>>) => {
|
||||
this.guns = r.data.payload
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
15
src/pages/Index.vue
Normal file
15
src/pages/Index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<Card class="w-full lg:w-1/2 text-center">
|
||||
<template #title> Welcome to Your Gun Database </template>
|
||||
<template #content>
|
||||
<router-link to="/guns">
|
||||
<Button>Go To Gun List</Button>
|
||||
</router-link>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
|
||||
export default defineComponent({})
|
||||
</script>
|
||||
37
src/router/index.ts
Normal file
37
src/router/index.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
|
||||
|
||||
// @ts-ignore
|
||||
import Index from "../pages/Index.vue";
|
||||
// @ts-ignore
|
||||
import BulletCreate from "../pages/bullets/Create.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 = [
|
||||
{
|
||||
path: '/',
|
||||
component: Index
|
||||
},
|
||||
{
|
||||
path: '/guns',
|
||||
component: Guns
|
||||
},
|
||||
{
|
||||
path: '/add',
|
||||
component: Add
|
||||
},
|
||||
{
|
||||
path: '/edit/:id',
|
||||
component: Edit
|
||||
}
|
||||
] as RouteRecordRaw[]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
3
src/styles.css
Normal file
3
src/styles.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
8
src/types/Response.d.ts
vendored
Normal file
8
src/types/Response.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
import {AxiosResponse} from "axios";
|
||||
|
||||
export interface Response<T> extends AxiosResponse {
|
||||
data: {
|
||||
payload: T
|
||||
status: string
|
||||
}
|
||||
}
|
||||
6
src/types/guns.d.ts
vendored
Normal file
6
src/types/guns.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface Guns {
|
||||
id: Number
|
||||
make: string
|
||||
model: string
|
||||
value_amount: Number
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user