327 lines
8.0 KiB
Vue
327 lines
8.0 KiB
Vue
<template>
|
|
<div class="profile-page">
|
|
<div class="card">
|
|
<form @submit.prevent="saveProfile" class="profile-form">
|
|
<div class="form-group">
|
|
<label for="fullName">Voller Name (optional)</label>
|
|
<input
|
|
type="text"
|
|
id="fullName"
|
|
v-model="form.fullName"
|
|
placeholder="z.B. Max Mustermann"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Email-Adresse</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
v-model="form.email"
|
|
placeholder="email@beispiel.de"
|
|
disabled
|
|
>
|
|
<small class="help-text">Die Email-Adresse kann derzeit nicht geändert werden</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="state">Bundesland</label>
|
|
<select
|
|
id="state"
|
|
v-model="form.stateId"
|
|
>
|
|
<option value="">Kein Bundesland ausgewählt</option>
|
|
<option
|
|
v-for="state in availableStates"
|
|
:key="state.id"
|
|
:value="state.id"
|
|
>
|
|
{{ state.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="weekWorkdays">Arbeitstage pro Woche</label>
|
|
<input
|
|
type="number"
|
|
id="weekWorkdays"
|
|
v-model.number="form.weekWorkdays"
|
|
min="1"
|
|
max="7"
|
|
required
|
|
>
|
|
<small class="help-text">Standard: 5 (Montag bis Freitag)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="dailyHours">Tägliche Arbeitsstunden (Grundwert)</label>
|
|
<input
|
|
type="number"
|
|
id="dailyHours"
|
|
v-model.number="form.dailyHours"
|
|
min="1"
|
|
max="24"
|
|
required
|
|
>
|
|
<small class="help-text">
|
|
Wird als Fallback verwendet, wenn kein spezifischer Zeitwunsch definiert ist.
|
|
Für detaillierte Zeitwünsche siehe <router-link to="/settings/timewish">Zeitwünsche</router-link>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="titleType">Anzeige in Seitentitel</label>
|
|
<select
|
|
id="titleType"
|
|
v-model.number="form.preferredTitleType"
|
|
>
|
|
<option :value="0">Restzeit für Tag ohne Korrektur</option>
|
|
<option :value="1">Restzeit für Tag, korrigiert nach Wochenarbeitszeit</option>
|
|
<option :value="2">Restzeit für Tag, korrigiert nach Gesamtarbeitszeit</option>
|
|
<option :value="3">Heute gearbeitete Zeit</option>
|
|
<option :value="4">Uhrzeit für Arbeitsende ohne Korrektur</option>
|
|
<option :value="5">Uhrzeit für Arbeitsende, korrigiert nach Wochenarbeitszeit</option>
|
|
<option :value="6">Uhrzeit für Arbeitsende, korrigiert nach Gesamtarbeitszeit</option>
|
|
<option :value="7">Nur App-Name</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" :disabled="loading">
|
|
{{ loading ? 'Wird gespeichert...' : 'Einstellungen speichern' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Modal-Komponente -->
|
|
<Modal
|
|
v-if="showModal"
|
|
:show="showModal"
|
|
:title="modalConfig.title"
|
|
:message="modalConfig.message"
|
|
:type="modalConfig.type"
|
|
:confirmText="modalConfig.confirmText"
|
|
:cancelText="modalConfig.cancelText"
|
|
@confirm="onConfirm"
|
|
@cancel="onCancel"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useAuthStore } from '../stores/authStore'
|
|
import { useModal } from '../composables/useModal'
|
|
import Modal from '../components/Modal.vue'
|
|
|
|
const authStore = useAuthStore()
|
|
const availableStates = ref([])
|
|
const loading = ref(false)
|
|
|
|
const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
|
|
|
|
const form = ref({
|
|
fullName: '',
|
|
email: '',
|
|
stateId: null,
|
|
weekWorkdays: 5,
|
|
dailyHours: 8,
|
|
preferredTitleType: 2
|
|
})
|
|
|
|
// Lade Profil
|
|
async function loadProfile() {
|
|
try {
|
|
loading.value = true
|
|
const response = await fetch('http://localhost:3010/api/profile', {
|
|
headers: {
|
|
'Authorization': `Bearer ${authStore.token}`
|
|
}
|
|
})
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden des Profils')
|
|
}
|
|
|
|
const profile = await response.json()
|
|
form.value = {
|
|
fullName: profile.fullName || '',
|
|
email: profile.email || '',
|
|
stateId: profile.stateId || null,
|
|
weekWorkdays: profile.weekWorkdays || 5,
|
|
dailyHours: profile.dailyHours || 8,
|
|
preferredTitleType: profile.preferredTitleType || 2
|
|
}
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden des Profils:', error)
|
|
await alert(`Fehler: ${error.message}`, 'Fehler')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// Lade Bundesländer
|
|
async function loadStates() {
|
|
try {
|
|
const response = await fetch('http://localhost:3010/api/profile/states', {
|
|
headers: {
|
|
'Authorization': `Bearer ${authStore.token}`
|
|
}
|
|
})
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden der Bundesländer')
|
|
}
|
|
|
|
availableStates.value = await response.json()
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Bundesländer:', error)
|
|
}
|
|
}
|
|
|
|
// Speichere Profil
|
|
async function saveProfile() {
|
|
try {
|
|
loading.value = true
|
|
const response = await fetch('http://localhost:3010/api/profile', {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${authStore.token}`
|
|
},
|
|
body: JSON.stringify({
|
|
fullName: form.value.fullName,
|
|
stateId: form.value.stateId,
|
|
weekWorkdays: form.value.weekWorkdays,
|
|
dailyHours: form.value.dailyHours,
|
|
preferredTitleType: form.value.preferredTitleType
|
|
})
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json()
|
|
throw new Error(error.message || 'Fehler beim Speichern des Profils')
|
|
}
|
|
|
|
await alert('Einstellungen erfolgreich gespeichert', 'Erfolg')
|
|
} catch (error) {
|
|
console.error('Fehler beim Speichern des Profils:', error)
|
|
await alert(`Fehler: ${error.message}`, 'Fehler')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// Initiales Laden
|
|
onMounted(async () => {
|
|
await Promise.all([
|
|
loadStates(),
|
|
loadProfile()
|
|
])
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.profile-page {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.profile-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
padding: 10px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-group input:disabled {
|
|
background: #f5f5f5;
|
|
color: #999;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: #4CAF50;
|
|
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
|
}
|
|
|
|
.help-text {
|
|
font-size: 12px;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.help-text a {
|
|
color: #4CAF50;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.help-text a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #4CAF50, #45a049);
|
|
color: white;
|
|
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
|
|
}
|
|
</style>
|
|
|