ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add new input elements to feedback form

This commit is contained in:
Ramon Wenger 2022-11-23 20:20:22 +01:00
parent 425c91ff6b
commit be0a53c16d
3 changed files with 174 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
client/src/components/Feedback.vue
View File

@ -2,56 +2,140 @@
<div>
<h1>Feedback</h1>
<div>
<h1>Motivation</h1>
<p>Würden Sie den Kurs weiterempfehlen?</p>
<ItCheckbox :checked="recommend" @toggle="recommend = !recommend"/>
</div>
<div>
<h2>Zufriedenheit insgesamt</h2>
<ItCheckbox />
<ItRadioGroup v-model="satisfaction" label="Zufriedenheit insgesamt" :items="ratings"/>
<ItRadioGroup v-model="goalAttainment" label="Zielerreichung insgesamt" :items="ratings"/>
<ItRadioGroup v-model="proficiency"
label="Wie beurteilen Sie Ihre Sicherheit bezüglichen den Themen nach dem Kurs?"
:items="percentages"/>
</div>
<RadioGroup v-model="selected">
<RadioGroupLabel>Motivation</RadioGroupLabel>
<div class="flex flex-row justify-around">
<RadioGroupOption
v-for="motivation in motivations"
:key="motivation.id"
v-slot="{ checked }"
:value="motivation.id"
>
<div :class="checked ? 'bg-blue-200' : ''">
<RadioGroupLabel>
{{ motivation.name }}
</RadioGroupLabel>
</div>
</RadioGroupOption>
</div>
</RadioGroup>
<ItRadioGroup label="Motivation" v-model="selected" :items="motivations"/>
<ItRadioGroup v-model="materialsReceived" label="Haben Sie Vorbereitungsunterlagen (z.B. eLearning) erhalten?" :items="yesNo" />
<ItRadioGroup v-model="materialsRating" label="Falls ja: Wie beurteilen Sie die Vorbereitungsunterlagen (z.B.
eLearning)?" :items="ratings" />
<ItRadioGroup v-model="instructorCompetence" label="Der Kursleiter war themenstark, fachkompetent." :items="ratings" />
<ItRadioGroup v-model="instructorRespect" label="Fragen und Anregungen der Kursteilnehmenden wurden ernst
genommen u. aufgegriffen." :items="ratings" />
<ItRadioGroup v-model="howDiscovered" label="Wie sind Sie auf das Kursangebot aufmerksam geworden?" :items="discoveryReasons" />
<h3>Motivation</h3>
<ItCheckbox /> Persönliches Interesse
<ItCheckbox /> Berufliches Interesse
<ItCheckbox /> Pflichtkurs
<ItCheckbox /> Andere Gründe
</div>
</template>
<script setup>
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
import {
RadioGroup,
RadioGroupDescription,
RadioGroupLabel,
RadioGroupOption,
} from "@headlessui/vue";
import { ref } from "vue";
import ItCheckbox from '@/components/ui/ItCheckbox.vue';
import {ref} from 'vue';
import ItRadioGroup from '@/components/ui/ItRadioGroup.vue';
const motivations = [
const discoveryReasons = [
{
name: "Work",
name: 'Internet',
id: 'I'
},
{
name: 'Prospekt',
id: 'L'
},
{
name: 'Zeitung',
id: 'N'
},
{
name: 'Persönliche Empfehlung',
id: 'R'
},
{
name: 'Öffentliche Veranstaltung',
id: 'E'
},
{
name: 'Andere',
id: 'O'
},
];
const yesNo = [
{
name: 'Ja',
id: true
},
{
name: 'Nein',
id: false
},
];
const ratings = [
{
name: 'sehr unzufrieden',
id: 1,
},
{
name: "Fun",
name: 'unzufrieden',
id: 2,
},
{
name: 'zufrieden',
id: 3,
},
{
name: 'sehr zufrieden',
id: 4,
},
];
const percentages = [
{
name: '20%',
id: 20,
},
{
name: '40%',
id: 40,
},
{
name: '60%',
id: 60,
},
{
name: '80%',
id: 80,
},
{
name: '100%',
id: 100,
},
];
const motivations = [
{
name: 'Persönliches Interesse',
id: 1,
},
{
name: 'Berufliches Interesse',
id: 2,
},
{
name: 'Pflichtkurs',
id: 3,
},
{
name: 'Andere Gründe',
id: 4,
},
];
const selected = ref(motivations[0]);
const satisfaction = ref(0);
const selected = ref(null);
const satisfaction = ref(null);
const goalAttainment = ref(null);
const recommend = ref(true);
const proficiency = ref(null);
const materialsReceived = ref(null);
const materialsRating = ref(null);
const instructorCompetence = ref(null);
const instructorRespect = ref(null);
const howDiscovered = ref(null);
</script>

4
client/src/components/ui/ItCheckbox.vue
View File

@ -39,8 +39,8 @@ const input = (e: Event) => {
class="w-8 h-8 block flex-none bg-contain disabled:opacity-50 cy-checkbox cy-checkbox-checked"
:class="
checked
? 'bg-[url(\'/static/icons/icon-checkbox-checked.svg\')] hover:bg-[url(\'/static/icons/icon-checkbox-checked-hover.svg\')]'
: 'bg-[url(\'/static/icons/icon-checkbox-unchecked.svg\')] hover:bg-[url(\'/static/icons/icon-checkbox-unchecked-hover.svg\')]'
? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]'
: 'bg-[url(/static/icons/icon-checkbox-unchecked.svg)] hover:bg-[url(/static/icons/icon-checkbox-unchecked-hover.svg)]'
"
tabindex="0"
@keydown.stop="keydown"

46
client/src/components/ui/ItRadioGroup.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<RadioGroup :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
class="mt-2 flex flex-row justify-between">
<RadioGroupLabel>{{ label }}</RadioGroupLabel>
<div class="flex justify-items-center space-x-4">
<RadioGroupOption
as="template"
v-for="item in items"
:key="item.id"
v-slot="{ checked, active }"
:value="item.id"
>
<div class="" :class="[
checked ? 'bg-blue-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
active ? 'ring ring-offset-2 ring-indigo-500' : '',
'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase']">
<RadioGroupLabel as="span">
{{ item.name }}
</RadioGroupLabel>
</div>
</RadioGroupOption>
</div>
</RadioGroup>
</template>
<script setup lang="ts">
interface RadioItem {
id: string;
name: string;
}
import {
RadioGroup,
RadioGroupDescription,
RadioGroupLabel,
RadioGroupOption,
} from "@headlessui/vue";
const props = defineProps<{
modelValue: any,
items: RadioItem[],
label: string
}>();
defineEmits(['update:modelValue']);
</script>