Compare commits
3 Commits
7_löschen_
...
main
| Author | SHA1 | Date |
|---|---|---|
valerio
|
ad1a4d789a | |
|
valerio
|
c8ac50fcc0 | |
|
valerio
|
258acaea12 |
|
|
@ -19,6 +19,7 @@ coverage
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.vscode/*
|
.vscode/*
|
||||||
|
vue-project/.vscode/*
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
.idea
|
.idea
|
||||||
*.suo
|
*.suo
|
||||||
|
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
.DS_Store
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
coverage
|
|
||||||
*.local
|
|
||||||
|
|
||||||
/cypress/videos/
|
|
||||||
/cypress/screenshots/
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
|
|
||||||
*.tsbuildinfo
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
{
|
|
||||||
"recommendations": ["Vue.volar"]
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
{
|
|
||||||
"explorer.fileNesting.enabled": true,
|
|
||||||
"explorer.fileNesting.patterns": {
|
|
||||||
"tsconfig.json": "tsconfig.*.json, env.d.ts",
|
|
||||||
"vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
|
|
||||||
"package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
# vue-project
|
|
||||||
|
|
||||||
This template should help get you started developing with Vue 3 in Vite.
|
|
||||||
|
|
||||||
## Recommended IDE Setup
|
|
||||||
|
|
||||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
|
||||||
|
|
||||||
## Customize configuration
|
|
||||||
|
|
||||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
|
||||||
|
|
||||||
## Project Setup
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compile and Hot-Reload for Development
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compile and Minify for Production
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="">
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="src/assets/global.css">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<link rel="icon" href="/favicon.ico">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Vue Test Projekt</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./src/*"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"exclude": ["node_modules", "dist"]
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,19 +0,0 @@
|
||||||
{
|
|
||||||
"name": "vue-project",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"private": true,
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"vue": "^3.5.13"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
|
||||||
"vite": "^6.0.11",
|
|
||||||
"vite-plugin-vue-devtools": "^7.7.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,28 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import {ref} from "vue";
|
|
||||||
import InputMask from "@/components/InputMask.vue";
|
|
||||||
|
|
||||||
|
|
||||||
const counter = ref(0)
|
|
||||||
|
|
||||||
function incrementCounter() {
|
|
||||||
counter.value++
|
|
||||||
}
|
|
||||||
|
|
||||||
const name = ref('')
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
name.value = 'Bob'
|
|
||||||
}, 1000)
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<h1>Hello {{ name }}</h1>
|
|
||||||
<button @click="incrementCounter">click me for cookies</button>
|
|
||||||
You have {{ counter }} cookies
|
|
||||||
<InputMask/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-mask {
|
|
||||||
background-color: aquamarine;
|
|
||||||
padding: 1em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
padding: 1em;
|
|
||||||
background-color: cadetblue;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 8px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
}
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="input-mask">
|
|
||||||
<span>Ich bin InputMask.vue</span>
|
|
||||||
<form @submit.prevent="addGrade">
|
|
||||||
<label>
|
|
||||||
Modulkürzel
|
|
||||||
<input type="text" placeholder="z.B. 'IWS'" v-model="grade_form_input.kuerzel">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Note
|
|
||||||
<input type="number" min="1" max="5" placeholder="1.0" step="0.1" v-model="grade_form_input.note">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Credits
|
|
||||||
<input type="number" min="2" max="30" placeholder="5" v-model="grade_form_input.credits">
|
|
||||||
</label>
|
|
||||||
<button type="submit">Note Eintragen</button>
|
|
||||||
</form>
|
|
||||||
<!-- @deleteEntry="deleteGrade"-->
|
|
||||||
<List :grades="grades" @deleteGrade="deleteGrade"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {ref} from 'vue';
|
|
||||||
import List from './List.vue';
|
|
||||||
|
|
||||||
const grade_form_input = ref({
|
|
||||||
kuerzel: "",
|
|
||||||
note: 1.0,
|
|
||||||
credits: 5
|
|
||||||
})
|
|
||||||
const id = ref(4)
|
|
||||||
const grades = ref([
|
|
||||||
{kuerzel: "IWS", note: 1.0, credits: 5, id: 1},
|
|
||||||
{kuerzel: "KRY", note: 2.0, credits: 6, id: 2},
|
|
||||||
{kuerzel: "WIF", note: 1.7, credits: 4, id: 3},
|
|
||||||
])
|
|
||||||
|
|
||||||
function addGrade() {
|
|
||||||
const is_every_input_set = validateInput();
|
|
||||||
if (is_every_input_set) {
|
|
||||||
grades.value.push({
|
|
||||||
kuerzel: grade_form_input.value.kuerzel,
|
|
||||||
note: grade_form_input.value.note,
|
|
||||||
credits: grade_form_input.value.credits,
|
|
||||||
id: id.value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// clear inputmask variables
|
|
||||||
grade_form_input.value = {kuerzel: "", note: 1.0, credits: 5}
|
|
||||||
id.value++
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateInput() {
|
|
||||||
const grade_steps = [1.0, 1.3, 1.5, 1.7, 2.0, 2.3, 2.5, 2.7, 3.0, 3.3, 3.5, 3.7, 4.0, 5.0];
|
|
||||||
const not_empty = Object.values(grade_form_input.value).every(value => value !== "");
|
|
||||||
const valid_grade = grade_steps.includes(parseFloat(grade_form_input.value.note));
|
|
||||||
return valid_grade && not_empty ? true : false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteGrade(id) {
|
|
||||||
grades.value = grades.value.filter(e => e.id !== id)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="list">
|
|
||||||
<span>Ich bin List.vue</span>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Kürzel</th>
|
|
||||||
<th>Note</th>
|
|
||||||
<th>Credits</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<ListItem @deleteEntry="emitAgain" v-for="(entry, index) in props.grades" :kuerzel="entry.kuerzel"
|
|
||||||
:credits="entry.credits"
|
|
||||||
:note="entry.note" :id="entry.id"/>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import ListItem from './ListItem.vue';
|
|
||||||
|
|
||||||
const props = defineProps(['grades'])
|
|
||||||
const emit = defineEmits(['deleteGrade'])
|
|
||||||
|
|
||||||
function emitAgain(id) {
|
|
||||||
emit("deleteGrade", id)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="css">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<tr :style="{ backgroundColor: backgroundColor }">
|
|
||||||
<td>{{ kuerzel }}</td>
|
|
||||||
<td>{{ note }}</td>
|
|
||||||
<td>{{ credits }}</td>
|
|
||||||
<td>{{ id }}</td>
|
|
||||||
<td>
|
|
||||||
<button @click="emitData">Löschen</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
kuerzel: null,
|
|
||||||
note: null,
|
|
||||||
credits: null,
|
|
||||||
id: null
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['deleteEntry'])
|
|
||||||
|
|
||||||
function emitData() {
|
|
||||||
emit("deleteEntry", props.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
import { createApp } from 'vue'
|
|
||||||
import App from './App.vue'
|
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
import { fileURLToPath, URL } from 'node:url'
|
|
||||||
|
|
||||||
import { defineConfig } from 'vite'
|
|
||||||
import vue from '@vitejs/plugin-vue'
|
|
||||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [
|
|
||||||
vue(),
|
|
||||||
vueDevTools(),
|
|
||||||
],
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue