WIP: Frontend implementation #1

Draft
fager wants to merge 19 commits from ch-frontend into main
4 changed files with 97 additions and 6 deletions
Showing only changes of commit 9fda6b5a5c - Show all commits

frontend: hide/show ServerCreate Form

Frank Agerholm 2026-01-25 18:12:35 +01:00
No known key found for this signature in database

View file

@ -177,13 +177,13 @@ onMounted(() => {
@click="saveEdit(server.id)"
class="bg-green-600 text-white px-2 py-1 rounded mr-2"
>
Speichern
<Icon name="heroicons:check" class="w-5 h-5" />
</button>
<button
@click="cancelEdit"
class="bg-gray-400 text-white px-2 py-1 rounded"
>
Abbrechen
<Icon name="heroicons:x-mark" class="w-5 h-5" />
</button>
</template>
@ -192,7 +192,7 @@ onMounted(() => {
@click="startEdit(server)"
class="bg-blue-600 text-white px-2 py-1 rounded"
>
Bearbeiten
<Icon name="heroicons:pencil-square" class="w-5 h-5" />
</button>
</template>
</td>
@ -202,11 +202,21 @@ onMounted(() => {
</div>
<button
@click="showCreateForm = !showCreateForm"
class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
class="flex items-center gap-2 text-blue-600 hover:text-blue-800"
>
{{ showCreateForm ? "Formular ausblenden" : "Neuen Server anlegen" }}
<Icon
v-if="showCreateForm"
name="heroicons:eye-slash"
class="w-5 h-5"
/>
<Icon
v-else
name="heroicons:document-plus"
class="w-5 h-5"
/>
</button>
<!-- Neues Server-Formular -->
<Transition name="fade">
<div v-if="showCreateForm" class="p-4 bg-white shadow rounded space-y-4">

View file

@ -1,6 +1,9 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: [ "@nuxtjs/tailwindcss" ],
modules: [
"@nuxtjs/tailwindcss",
"@nuxt/icon"
],
srr: true,
nitro: {
preset: "static"

View file

@ -7,6 +7,7 @@
"name": "frontend",
"hasInstallScript": true,
"dependencies": {
"@nuxt/icon": "^2.2.1",
"nuxt": "^4.3.0",
"vue": "^3.5.27",
"vue-router": "^4.6.4"
@ -28,6 +29,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@antfu/install-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
"integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
"license": "MIT",
"dependencies": {
"package-manager-detector": "^1.3.0",
"tinyexec": "^1.0.1"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@babel/code-frame": {
"version": "7.28.6",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
@ -992,6 +1006,47 @@
"node": ">=18"
}
},
"node_modules/@iconify/collections": {
"version": "1.0.642",
"resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.642.tgz",
"integrity": "sha512-SjQpWEQDG8votqjmF/G0CCmFFYaQfm+GECNjAEhzyIGB/RpzOUWcGCIBnFQA/YCg3I+wC5sZpWF/Mko6KWeMwg==",
"license": "MIT",
"dependencies": {
"@iconify/types": "*"
}
},
"node_modules/@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"license": "MIT"
},
"node_modules/@iconify/utils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
"integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
"license": "MIT",
"dependencies": {
"@antfu/install-pkg": "^1.1.0",
"@iconify/types": "^2.0.0",
"mlly": "^1.8.0"
}
},
"node_modules/@iconify/vue": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
"integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
"license": "MIT",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"vue": ">=3"
}
},
"node_modules/@ioredis/commands": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.0.tgz",
@ -1421,6 +1476,28 @@
"devtools-wizard": "cli.mjs"
}
},
"node_modules/@nuxt/icon": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.2.1.tgz",
"integrity": "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==",
"license": "MIT",
"dependencies": {
"@iconify/collections": "^1.0.641",
"@iconify/types": "^2.0.0",
"@iconify/utils": "^3.1.0",
"@iconify/vue": "^5.0.0",
"@nuxt/devtools-kit": "^3.1.1",
"@nuxt/kit": "^4.2.2",
"consola": "^3.4.2",
"local-pkg": "^1.1.2",
"mlly": "^1.8.0",
"ohash": "^2.0.11",
"pathe": "^2.0.3",
"picomatch": "^4.0.3",
"std-env": "^3.10.0",
"tinyglobby": "^0.2.15"
}
},
"node_modules/@nuxt/kit": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.0.tgz",

View file

@ -10,6 +10,7 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxt/icon": "^2.2.1",
"nuxt": "^4.3.0",
"vue": "^3.5.27",
"vue-router": "^4.6.4"