TWS/kalkutago
8
0
Fork 1
Code Issues 9 Pull requests 1 Packages Projects 1 Releases Wiki Activity

Compare commits

base: TWS:7f2e12e91356c31457ca82fa8f4d6ea2c626b8ae
Branches Tags
TWS:main
TWS:feature/add-track-form
..
compare: TWS:75d9bab34d3a48f0aee340c76044e0c3b827740c
Branches Tags
TWS:main
TWS:feature/add-track-form

No commits in common. "7f2e12e91356c31457ca82fa8f4d6ea2c626b8ae" and "75d9bab34d3a48f0aee340c76044e0c3b827740c" have entirely different histories.
7f2e12e913 ... 75d9bab34d

13 changed files with 20 additions and 226 deletions
Show stats Expand all files Collapse all files

3
client/package.json
View file

@ -12,8 +12,7 @@
"dependencies": {
"bulma": "^0.9.4",
"sass": "^1.25.0",
"vue": "^3.2.47",
"vue-router": "4"
"vue": "^3.2.47"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",

13
client/src/App.vue
View file

@ -1,11 +1,14 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
import NavBar from './components/NavBar.vue'
import Table from "./components/Table.vue";
import { state } from "./state";
state.populate()
</script>
<template>
<div >
<NavBar />
<RouterView />
<div class="container">
<Table></Table>
</div>
</template>
<style scoped></style>

28
client/src/components/NavBar.vue
View file

@ -1,28 +0,0 @@
<script setup lang="ts">
import { RouterLink } from 'vue-router';
</script>
<template>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<h1 class="title navbar-item">Kalkutago</h1>
</div>
<div class="navbar-menu"></div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<RouterLink to="/" v-if="$route.path === '/new-track'">
<button class="button is-info">
Go Back
</button>
</RouterLink>
<RouterLink to="/new-track" v-else>
<button class="button is-primary">
Add Track
</button>
</RouterLink>
</div>
</div>
</div>
</nav>
</template>

5
client/src/components/Table.vue
View file

@ -2,9 +2,7 @@
<table class="table">
<thead>
<th>Date</th>
<th v-for="track in state.tracks" :key="track.id">
<TrackIcon :icon="track.icon" :id="track.id" />
</th>
<th v-for="track in state.tracks" :key="track.id">{{ track.icon }}</th>
</thead>
<tbody>
<tr v-for="date in dates" :key="date.valueOf()">
@ -20,7 +18,6 @@
<script setup lang="ts">
import TickComponent from "./TickComponent.vue";
import { state } from "../state";
import TrackIcon from "./TrackIcon.vue";
const today = new Date()
const ONE_DAY_MS = 86_400_000

16
client/src/components/TrackIcon.vue
View file

@ -1,16 +0,0 @@
<script setup lang="ts">
import { state } from '../state';
const props = defineProps<{icon: String, id: number|undefined}>()
const del = () => {
if(props.id)
if(confirm("are you sure you want to delete this track?"))
state.removeTrack(props.id)
}
</script>
<template>
<div @click=del>
{{props.icon}}
</div>
</template>

10
client/src/main.ts
View file

@ -1,12 +1,6 @@
import { createApp } from 'vue'
import './style.scss'
import router from './router'
import { state } from "./state";
import 'bulma/css/bulma.css'
import App from './App.vue'
import 'bulma/css/bulma.css'
const app = createApp(App)
app.use(router)
app.mount('#app')
state.populate()
createApp(App).mount('#app')

15
client/src/router.ts
View file

@ -1,15 +0,0 @@
import { createRouter, createWebHistory } from 'vue-router'
import TableView from './views/TableView.vue'
import NewTrackView from './views/NewTrackView.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: TableView },
{ path: '/new-track', component: NewTrackView }
// for other pages:
// {path: '/', component: import('./views/TableView.vue')}
]
})
export default router

32
client/src/state.ts
View file

@ -1,6 +1,5 @@
import { reactive } from "vue"
import { Track } from "./track"
import { Tick } from './ticks'
import { error } from "./error"
enum State {
@ -27,7 +26,7 @@ export const state = reactive({
source.addEventListener('message', event => console.log(event))
source.addEventListener('TickAdded', event => {
console.log(event)
const tick: Tick = Tick.fromJSON(JSON.parse(event.data))
const tick: Tick = JSON.parse(event.data)
const tracks = this.tracks.map(track => {
if (track.id === tick.track_id) {
const ticks = track.ticks ?? []
@ -39,12 +38,9 @@ export const state = reactive({
})
this.tracks = tracks
})
source.addEventListener('TrackAdded', ({ data }) => {
const track: Track = Track.fromJSON(JSON.parse(data))
this.tracks = [track, ...this.tracks]
})
source.addEventListener('TickDropped', event => {
const tick: Tick = Tick.fromJSON(JSON.parse(event.data))
console.log(event)
const tick: Tick = JSON.parse(event.data)
const tracks = this.tracks.map(track => {
if (track.id === tick.track_id) {
track.ticks = track.ticks?.filter($tick => $tick.id !== tick.id)
@ -53,14 +49,6 @@ export const state = reactive({
})
this.tracks = tracks
})
source.addEventListener('TrackDropped', ({ data }) => {
const track: Track = Track.fromJSON(JSON.parse(data))
this.tracks = this.tracks.filter($track => $track.id !== track.id)
})
source.addEventListener('TrackChanged', ({ data }) => {
const track: Track = Track.fromJSON(JSON.parse(data))
this.tracks = this.tracks.map($track => $track.id === track.id ? track : $track)
})
source.addEventListener('Lagged', event => {
console.log(event)
// Refresh the page, refetching the list of tracks and ticks
@ -97,19 +85,5 @@ export const state = reactive({
const { ok, status, statusText } = await fetch(`/api/v1/tracks/${track.id}/all-ticks?${query.toString()}`, { method: 'DELETE' })
if (!ok)
error(`error deleting ticks for ${track.id}: ${statusText} (${status})`)
},
async addTrack(track: Track): Promise<boolean> {
const response = await fetch('/api/v1/tracks', {
method: "POST",
body: JSON.stringify(track),
headers: { "Content-Type": "application/json" }
})
if (!response.ok)
error(`error submitting track: ${track}: ${response.statusText} (${response.status})`)
return response.ok
},
async removeTrack(trackID: number) {
const response = await fetch(`/api/v1/tracks/${trackID}`, { method: "DELETE" })
if (!response.ok) error(`error deleting track with ID ${trackID}: ${response.statusText} (${response.status})`)
}
})

4
client/src/ticks.ts
View file

@ -1,4 +1,4 @@
export interface ITick {
interface ITick {
id: number
track_id?: number
year?: number
@ -10,7 +10,7 @@ export interface ITick {
has_time_info?: number
}
export class Tick implements ITick {
class Tick implements ITick {
id: number
track_id?: number
year?: number

6
client/src/track.ts
View file

@ -1,7 +1,7 @@
import { error } from "./error"
export interface ITrack {
id?: number
id: number
name: String
description: String
icon: String
@ -13,7 +13,7 @@ export interface ITrack {
}
export class Track implements ITrack {
id?: number
id: number
name: String
description: String
icon: String
@ -24,7 +24,7 @@ export class Track implements ITrack {
ticks?: Array<Tick>
constructor(
id: number | undefined,
id: number,
name: String,
description: String,
icon: String,

91
client/src/views/NewTrackView.vue
View file

@ -1,91 +0,0 @@
<script setup lang="ts">
import { RouterLink, useRouter } from 'vue-router';
import { Track } from '../track';
import { computed, ref } from 'vue';
import { state } from '../state';
const props = defineProps<{ initialState?: Track }>()
const router = useRouter()
const name = ref(props.initialState?.name ?? "")
const description = ref(props.initialState?.description?.toString() ?? "")
const icon = ref(props.initialState?.icon ?? "")
const enabled = ref(props.initialState?.enabled ?? true)
const multipleEntriesPerDay = ref(props.initialState?.multiple_entries_per_day ?? false)
const color = ref(props.initialState?.color ?? undefined)
const order = ref<any>(props.initialState?.order ?? undefined)
const submittingNow = ref(false)
const submitButtonClass = computed(() => 'button is-primary' + (submittingNow.value ? ' is-loading' : ''))
const submit = async () => {
submittingNow.value = true
// if you make a change to order then erase the value in the box it's ""
if (order.value === "") order.value = undefined
if (order.value instanceof String || typeof order.value === 'string') order.value = Number(order.value)
const track = new Track(undefined, name.value, description.value,
icon.value, Number(enabled.value), Number(multipleEntriesPerDay.value),
color.value, order.value)
if (await state.addTrack(track))
router.push('/')
}
</script>
<template>
<section class="section">
<div class="field">
<label for="name" class="label">Name</label>
<div class="control">
<input type="text" name="name" class="input" v-model="name" />
</div>
</div>
<div class="field">
<label for="description" class="label">Description</label>
<div class="control">
<textarea name="description" cols="30" rows="5" v-model="description"></textarea>
</div>
</div>
<div class="field">
<label for="icon" class="label">Icon</label>
<div class="control">
<input type="text" name="icon" class="input" v-model="icon" />
</div>
</div>
<div class="field is-grouped">
<div class="control">
<label for="enabled" class="label">
<input type="checkbox" name="enabled" class="checkbox" v-model="enabled" />
Enabled?
</label>
</div>
<div class="control">
<label for="multiple-entries" class="label">
<input type="checkbox" name="multiple-entries" class="checkbox" v-model="multipleEntriesPerDay" />
Multiple Entries per Day?
</label>
</div>
</div>
<div class="field">
<div class="control">
TODO color choice
</div>
</div>
<div class="field">
<div class="control">
<label for="order" class="label">
<input type="number" name="order" class="input" v-model="order" />
Order
</label>
</div>
</div>
<div class="buttons">
<RouterLink to="/">
<button class="button is-danger">
Cancel
</button>
</RouterLink>
<button :class="submitButtonClass" @click="submit">
Save
</button>
</div>
</section>
</template>

11
client/src/views/TableView.vue
View file

@ -1,11 +0,0 @@
<script setup lang="ts">
import Table from "../components/Table.vue";
</script>
<template>
<div class="container">
<Table></Table>
</div>
</template>
<style scoped></style>

12
client/yarn.lock
View file

@ -213,11 +213,6 @@
"@vue/compiler-dom" "3.3.4"
"@vue/shared" "3.3.4"
"@vue/devtools-api@^6.5.0":
version "6.5.0"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
"@vue/reactivity-transform@3.3.4":
version "3.3.4"
resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
@ -527,13 +522,6 @@ vite@^4.3.9:
optionalDependencies:
fsevents "~2.3.2"
vue-router@4:
version "4.2.2"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.2.tgz#b0097b66d89ca81c0986be03da244c7b32a4fd81"
integrity sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==
dependencies:
"@vue/devtools-api" "^6.5.0"
vue-template-compiler@^2.7.14:
version "2.7.14"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"