Compare commits
9 Commits
main
...
7_löschen_
| Author | SHA1 | Date |
|---|---|---|
valerio
|
e697e85cd3 | |
Ann-Kathrin Stracke
|
6a91d56794 | |
|
valerio
|
03e6668070 | |
|
valerio
|
950b1bd731 | |
|
valerio
|
05c4e09ace | |
|
valerio
|
f208ddd171 | |
|
valerio
|
9195535aad | |
|
valerio
|
a37263efff | |
|
valerio
|
550c7ecc4b |
|
|
@ -19,7 +19,6 @@ coverage
|
|||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
vue-project/.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
# 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
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# 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
|
||||
```
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"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.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
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