chaged vue to variant javascript added first forms
This commit is contained in:
Vendored
+1
-7
@@ -1,9 +1,3 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"vitest.explorer",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"EditorConfig.EditorConfig",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
|
||||
+2
-18
@@ -1,4 +1,4 @@
|
||||
# bamort
|
||||
# my-app
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
@@ -6,10 +6,6 @@ This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## 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 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
@@ -26,20 +22,8 @@ npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Run Unit Tests with [Vitest](https://vitest.dev/)
|
||||
|
||||
```sh
|
||||
npm run test:unit
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
|
||||
+1
-1
@@ -8,6 +8,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
Generated
+10
-4190
File diff suppressed because it is too large
Load Diff
+4
-27
@@ -1,44 +1,21 @@
|
||||
{
|
||||
"name": "bamort",
|
||||
"name": "my-app",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"test:unit": "vitest",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build",
|
||||
"lint": "eslint . --fix",
|
||||
"format": "prettier --write src/"
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"pinia": "^2.2.6",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.0",
|
||||
"@types/jsdom": "^21.1.7",
|
||||
"@types/node": "^22.9.3",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vitejs/plugin-vue-jsx": "^4.1.1",
|
||||
"@vitest/eslint-plugin": "1.1.10",
|
||||
"@vue/eslint-config-prettier": "^10.1.0",
|
||||
"@vue/eslint-config-typescript": "^14.1.3",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"eslint": "^9.14.0",
|
||||
"eslint-plugin-vue": "^9.30.0",
|
||||
"jsdom": "^25.0.1",
|
||||
"npm-run-all2": "^7.0.1",
|
||||
"prettier": "^3.3.3",
|
||||
"typescript": "~5.6.3",
|
||||
"vite": "^6.0.1",
|
||||
"vite-plugin-vue-devtools": "^7.6.5",
|
||||
"vitest": "^2.1.5",
|
||||
"vue-tsc": "^2.1.10"
|
||||
"vite-plugin-vue-devtools": "^7.6.5"
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import TheWelcome from './components/TheWelcome.vue'
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<form @submit.prevent="addItem">
|
||||
<input v-model="name" placeholder="Name" required />
|
||||
<input v-model.number="anzahl" type="number" placeholder="Anzahl" required />
|
||||
<input v-model.number="gewicht" type="number" placeholder="Gewicht" required />
|
||||
<button type="submit">Add Item</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '../utils/api'
|
||||
|
||||
export default {
|
||||
props: ['characterId'],
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
anzahl: 1,
|
||||
gewicht: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async addItem() {
|
||||
await API.post('/ausruestung', {
|
||||
character_id: this.characterId,
|
||||
name: this.name,
|
||||
anzahl: this.anzahl,
|
||||
gewicht: this.gewicht,
|
||||
})
|
||||
this.$emit('added')
|
||||
this.name = ''
|
||||
this.anzahl = 1
|
||||
this.gewicht = 0
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Ausruestung</h2>
|
||||
<ul>
|
||||
<li v-for="item in ausruestung" :key="item.ausruestung_id">
|
||||
{{ item.name }} - {{ item.anzahl }} ({{ item.gewicht }}kg)
|
||||
<button @click="deleteItem(item.ausruestung_id)">Delete</button>
|
||||
</li>
|
||||
</ul>
|
||||
<AusruestungForm @added="fetchAusruestung" :characterId="characterId" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '../utils/api'
|
||||
import AusruestungForm from './AusruestungForm.vue'
|
||||
|
||||
export default {
|
||||
components: { AusruestungForm },
|
||||
props: ['characterId'],
|
||||
data() {
|
||||
return {
|
||||
ausruestung: [],
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.fetchAusruestung()
|
||||
},
|
||||
methods: {
|
||||
async fetchAusruestung() {
|
||||
const response = await API.get(`/ausruestung/${this.characterId}`)
|
||||
this.ausruestung = response.data
|
||||
},
|
||||
async deleteItem(id) {
|
||||
await API.delete(`/ausruestung/${id}`)
|
||||
this.fetchAusruestung()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Your Characters</h2>
|
||||
<ul>
|
||||
<li v-for="character in characters" :key="character.character_id">
|
||||
{{ character.name }} ({{ character.rasse }})
|
||||
<button @click="goToAusruestung(character.character_id)">Manage Equipment</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '../utils/api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
characters: [],
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await API.get('/characters', {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
this.characters = response.data
|
||||
},
|
||||
methods: {
|
||||
goToAusruestung(characterId) {
|
||||
this.$router.push(`/ausruestung/${characterId}`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<form @submit.prevent="login">
|
||||
<h2>Login</h2>
|
||||
<input v-model="username" placeholder="Username" required />
|
||||
<input v-model="password" type="password" placeholder="Password" required />
|
||||
<button type="submit">Login</button>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '../utils/api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
error: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
try {
|
||||
const response = await API.post('/login', {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
})
|
||||
localStorage.setItem('token', response.data.token)
|
||||
this.$router.push('/dashboard')
|
||||
} catch (err) {
|
||||
this.error = 'Invalid credentials'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,6 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -0,0 +1,17 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import LoginView from '../views/LoginView.vue'
|
||||
import DashboardView from '../views/DashboardView.vue'
|
||||
import AusruestungView from '../views/AusruestungView.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', name: 'Login', component: LoginView },
|
||||
{ path: '/dashboard', name: 'Dashboard', component: DashboardView },
|
||||
{ path: '/ausruestung/:characterId', name: 'Ausruestung', component: AusruestungView },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,7 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const API = axios.create({
|
||||
baseURL: 'http://localhost:8080', // Replace with your backend URL
|
||||
})
|
||||
|
||||
export default API
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<AusruestungList :characterId="$route.params.characterId" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AusruestungList from '../components/AusruestungList.vue'
|
||||
|
||||
export default {
|
||||
components: { AusruestungList },
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<CharacterList />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CharacterList from '../components/CharacterList.vue'
|
||||
|
||||
export default {
|
||||
components: { CharacterList },
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<LoginForm />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoginForm from '../components/LoginForm.vue'
|
||||
|
||||
export default {
|
||||
components: { LoginForm },
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.vitest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"extends": "@tsconfig/node22/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.app.json",
|
||||
"exclude": [],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
|
||||
|
||||
"lib": [],
|
||||
"types": ["node", "jsdom"]
|
||||
}
|
||||
}
|
||||
@@ -2,14 +2,12 @@ import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
@@ -1,14 +0,0 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
|
||||
import viteConfig from './vite.config'
|
||||
|
||||
export default mergeConfig(
|
||||
viteConfig,
|
||||
defineConfig({
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
exclude: [...configDefaults.exclude, 'e2e/**'],
|
||||
root: fileURLToPath(new URL('./', import.meta.url)),
|
||||
},
|
||||
}),
|
||||
)
|
||||
Reference in New Issue
Block a user