Compare commits
11 Commits
| Author | SHA1 | Date |
|---|---|---|
valerio
|
ca0302d555 | |
Ann-Kathrin Stracke
|
3205f8bbf7 | |
|
valerio
|
9c6f8ff749 | |
|
valerio
|
92bba28b4c | |
|
valerio
|
03e6668070 | |
|
valerio
|
950b1bd731 | |
|
valerio
|
05c4e09ace | |
|
valerio
|
f208ddd171 | |
|
valerio
|
9195535aad | |
|
valerio
|
a37263efff | |
|
valerio
|
550c7ecc4b |
|
|
@ -19,7 +19,6 @@ coverage
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.vscode/*
|
.vscode/*
|
||||||
vue-project/.vscode/*
|
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
.idea
|
.idea
|
||||||
*.suo
|
*.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,59 @@
|
||||||
|
<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>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2"><strong>Durchschnittsnote:</strong></td>
|
||||||
|
<td colspan="2">{{ weightedMean }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2"><strong>Genug ECTS zum Anmelden der Thesis:</strong></td>
|
||||||
|
<td colspan="2">{{ startThesis }}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import ListItem from './ListItem.vue';
|
||||||
|
import {computed} from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps(['grades'])
|
||||||
|
const emit = defineEmits(['deleteGrade'])
|
||||||
|
const weightedMean = computed(() => {
|
||||||
|
if (props.grades.length === 0) return "Keine Noten vorhanden.";
|
||||||
|
const totalCredits = props.grades.reduce((sum, grade) => sum + grade.credits, 0);
|
||||||
|
const weightedSum = props.grades.reduce((sum, grade) => sum + (grade.note * grade.credits), 0);
|
||||||
|
return totalCredits ? (weightedSum / totalCredits).toFixed(1) : "Kein Wert.";
|
||||||
|
});
|
||||||
|
|
||||||
|
const startThesis = computed(() => {
|
||||||
|
if (props.grades.length === 0) return "Noch keine Credits gesammelt";
|
||||||
|
const requiredCredits = 50;
|
||||||
|
const totalCredits = props.grades.reduce((sum, grade) => sum + grade.credits, 0);
|
||||||
|
return totalCredits >= requiredCredits ? "Du genug Credits für die Thesis gesammelt!" : "Noch nicht genug Credits gesammelt (" + totalCredits + "/" + requiredCredits + ")";
|
||||||
|
});
|
||||||
|
|
||||||
|
function emitAgain(id) {
|
||||||
|
emit("deleteGrade", id)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="css">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<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>
|
||||||
|
import {computed} from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
kuerzel: null,
|
||||||
|
note: null,
|
||||||
|
credits: null,
|
||||||
|
id: null
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['deleteEntry'])
|
||||||
|
|
||||||
|
function emitData() {
|
||||||
|
emit("deleteEntry", props.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Colors = {
|
||||||
|
EXCELLENT: '#247d37',
|
||||||
|
GOOD: '#7ba656',
|
||||||
|
AVERAGE: '#ded147',
|
||||||
|
POOR: '#dea947',
|
||||||
|
FAIL: '#de6847',
|
||||||
|
};
|
||||||
|
|
||||||
|
const backgroundColor = computed(() => {
|
||||||
|
if (props.note <= 1.3)
|
||||||
|
return Colors.EXCELLENT;
|
||||||
|
if (props.note <= 2.3)
|
||||||
|
return Colors.GOOD;
|
||||||
|
if (props.note <= 3.3)
|
||||||
|
return Colors.AVERAGE;
|
||||||
|
if (props.note <= 4.3)
|
||||||
|
return Colors.POOR;
|
||||||
|
return Colors.FAIL;
|
||||||
|
});
|
||||||
|
|
||||||
|
</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