Template
id what this is
This commit is contained in:
@@ -25,3 +25,7 @@ onBeforeUnmount(() => {
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import "vue-multiselect/dist/vue-multiselect.css";
|
||||
</style>
|
||||
|
||||
@@ -41,6 +41,7 @@ const currentGames = computed(() => {
|
||||
<div id="links">
|
||||
<NuxtLink to="/">Home</NuxtLink>
|
||||
<NuxtLink to="/words">Words</NuxtLink>
|
||||
<NuxtLink to="/concepts">Concepts</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div id="games">
|
||||
|
||||
@@ -40,11 +40,6 @@ async function deleteWord() {
|
||||
word.loading = false;
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
console.log(disabled.value);
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useGameStore } from "~/store/game.store";
|
||||
|
||||
const validPaths = ["/", "/rules", "/test", "/words"];
|
||||
const validPaths = ["/", "/rules", "/test", "/words", "/concepts"];
|
||||
|
||||
export default defineNuxtRouteMiddleware(async (to, from) => {
|
||||
const config = useRuntimeConfig();
|
||||
|
||||
+1
-1
Submodule netcode/events updated: fc3f0e1677...1473c5c132
@@ -0,0 +1,31 @@
|
||||
import { useConceptStore } from "~/store/concepts.store";
|
||||
import type {
|
||||
ConceptCreateEvent,
|
||||
ConceptDeleteEvent,
|
||||
ConceptDisableEvent,
|
||||
ConceptEditEvent,
|
||||
ConceptEnableEvent,
|
||||
} from "../events/concept.events";
|
||||
|
||||
export const handlers = {
|
||||
create: (event: ConceptCreateEvent) => {
|
||||
const conceptStore = useConceptStore();
|
||||
conceptStore.concepts[event.concept.id] = event.concept;
|
||||
},
|
||||
edit: (event: ConceptEditEvent) => {
|
||||
const conceptStore = useConceptStore();
|
||||
conceptStore.concepts[event.concept.id].value = event.concept.value;
|
||||
},
|
||||
delete: (event: ConceptDeleteEvent) => {
|
||||
const conceptStore = useConceptStore();
|
||||
delete conceptStore.concepts[event.id];
|
||||
},
|
||||
// enable: (event: ConceptEnableEvent) => {
|
||||
// const conceptStore = useConceptStore();
|
||||
// conceptStore.concepts[event.id].enabled = true;
|
||||
// },
|
||||
// disable: (event: ConceptDisableEvent) => {
|
||||
// const conceptStore = useConceptStore();
|
||||
// conceptStore.concepts[event.id].enabled = false;
|
||||
// },
|
||||
};
|
||||
Generated
+11
@@ -13,6 +13,7 @@
|
||||
"pinia": "^2.3.0",
|
||||
"reflect-metadata": "^0.2.2",
|
||||
"vue": "latest",
|
||||
"vue-multiselect": "^3.1.0",
|
||||
"vue-router": "latest"
|
||||
}
|
||||
},
|
||||
@@ -9502,6 +9503,16 @@
|
||||
"integrity": "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vue-multiselect": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.1.0.tgz",
|
||||
"integrity": "sha512-+i/fjTqFBpaay9NP+lU7obBeNaw2DdFDFs4mqhsM0aEtKRdvIf7CfREAx2o2B4XDmPrBt1r7x1YCM3BOMLaUgQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 14.18.1",
|
||||
"npm": ">= 6.14.15"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"pinia": "^2.3.0",
|
||||
"reflect-metadata": "^0.2.2",
|
||||
"vue": "latest",
|
||||
"vue-multiselect": "^3.1.0",
|
||||
"vue-router": "latest"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import Multiselect from "vue-multiselect";
|
||||
import { useConceptStore } from "~/store/concepts.store";
|
||||
|
||||
const newConcept = ref("");
|
||||
const conceptStore = useConceptStore();
|
||||
|
||||
await conceptStore.fetchConceptList();
|
||||
|
||||
const loading = ref(false);
|
||||
const conceptInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
async function createConcept() {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
await conceptStore.createConcept(newConcept.value);
|
||||
newConcept.value = "";
|
||||
} finally {
|
||||
nextTick(() => {
|
||||
loading.value = false;
|
||||
nextTick(() => {
|
||||
conceptInput.value?.focus();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function deleteConcept(id: number) {
|
||||
conceptStore.deleteConcept(id);
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
conceptStore.subscribe();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
conceptStore.close();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="concepts">
|
||||
<div class="header">
|
||||
<span>Concept</span>
|
||||
<span>Status</span>
|
||||
<span>Delete</span>
|
||||
<span>Type</span>
|
||||
</div>
|
||||
<div
|
||||
class="concept"
|
||||
v-for="concept in conceptStore.concepts"
|
||||
:key="concept.id"
|
||||
>
|
||||
<span>{{ concept.value }}</span>
|
||||
<input type="checkbox" checked="true" disabled="true" />
|
||||
<input type="button" value="Delete" @click="deleteConcept(concept.id)" />
|
||||
<Multiselect :options="[]"></Multiselect>
|
||||
</div>
|
||||
<div class="new-concept">
|
||||
<span>
|
||||
<input
|
||||
ref="conceptInput"
|
||||
type="text"
|
||||
:disabled="loading"
|
||||
@keypress.enter="createConcept"
|
||||
v-model="newConcept"
|
||||
/>
|
||||
<button :disabled="loading" @click="createConcept">Submit</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
div#concepts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
div.concept {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
div.header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
+2
-1
@@ -13,8 +13,9 @@ async function createGame() {
|
||||
loading.value = true;
|
||||
await lobbyStore
|
||||
.createGame()
|
||||
.then(() => {
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
navigateTo("/game/" + data.id);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.data.statusCode == 400) {
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { subscribe } from "~/netcode";
|
||||
import type { ConceptResponseDTO } from "~/netcode/events/dto/conceptresponse.dto";
|
||||
import { handlers } from "~/netcode/handlers/concept.handler";
|
||||
|
||||
export const useConceptStore = defineStore("concept", {
|
||||
state: () => ({
|
||||
concepts: {} as Record<string, ConceptResponseDTO>,
|
||||
eventSource: null as null | EventSource,
|
||||
}),
|
||||
actions: {
|
||||
async subscribe() {
|
||||
this.eventSource = subscribe(`/concepts/subscribe`);
|
||||
this.eventSource.addEventListener("message", async (message) => {
|
||||
const data = JSON.parse(message.data);
|
||||
const type = data.type as string;
|
||||
if (type in handlers) {
|
||||
handlers[type as keyof typeof handlers](data);
|
||||
}
|
||||
});
|
||||
},
|
||||
async close() {
|
||||
this.eventSource?.close();
|
||||
},
|
||||
async fetchConceptList() {
|
||||
const config = useRuntimeConfig();
|
||||
const data = await useFetch<ConceptResponseDTO[]>(
|
||||
config.public.endpoint + `/concepts/all`,
|
||||
{
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
if (data.data.value && !data.error.value) {
|
||||
for (const concept of data.data.value) {
|
||||
this.concepts[concept.id] = concept;
|
||||
}
|
||||
}
|
||||
return data;
|
||||
},
|
||||
async enableConcept(concepts: ConceptResponseDTO) {
|
||||
const config = useRuntimeConfig();
|
||||
const data = await $fetch<ConceptResponseDTO>(
|
||||
config.public.endpoint + `/concepts/` + concepts.id + "/enable",
|
||||
{
|
||||
credentials: "include",
|
||||
method: "PUT",
|
||||
}
|
||||
);
|
||||
// word.enabled = true;
|
||||
// return data;
|
||||
},
|
||||
async disableConcept(concepts: ConceptResponseDTO) {
|
||||
const config = useRuntimeConfig();
|
||||
const data = await $fetch<ConceptResponseDTO>(
|
||||
config.public.endpoint + `/concepts/` + concepts.id + "/disable",
|
||||
{
|
||||
credentials: "include",
|
||||
method: "PUT",
|
||||
}
|
||||
);
|
||||
// word.enabled = false;
|
||||
// return data;
|
||||
},
|
||||
|
||||
async createConcept(value: string) {
|
||||
const config = useRuntimeConfig();
|
||||
const data = await $fetch<ConceptResponseDTO>(
|
||||
config.public.endpoint + `/concepts/`,
|
||||
{
|
||||
credentials: "include",
|
||||
body: { value },
|
||||
method: "POST",
|
||||
}
|
||||
);
|
||||
},
|
||||
async deleteConcept(id: number) {
|
||||
const config = useRuntimeConfig();
|
||||
const data = await $fetch<ConceptResponseDTO>(
|
||||
config.public.endpoint + `/concepts/` + id,
|
||||
{
|
||||
credentials: "include",
|
||||
method: "DELETE",
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -49,7 +49,7 @@ export const useLobbyStore = defineStore("lobby", {
|
||||
}
|
||||
);
|
||||
// this.games[data.id] = data;
|
||||
// return data;
|
||||
return data;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user