426 lines
13 KiB
JavaScript
426 lines
13 KiB
JavaScript
import { api } from "./api.js";
|
||
|
||
const NAV = [
|
||
{ key: "timeline", index: "01", label: "Zeitachse" },
|
||
{ key: "capacity", index: "02", label: "Kapazitaet" },
|
||
{ key: "projects", index: "03", label: "Projekte & Aufgaben" },
|
||
{ key: "people", index: "04", label: "Team" }
|
||
];
|
||
|
||
const PERSON_PALETTE = ["#2F6F4F", "#C4622D", "#3E5C50", "#8A6D3B", "#4C5B7A", "#A63B2A"];
|
||
const PROJECT_PALETTE = ["#3E5C50", "#2F6F4F", "#8A6D3B", "#4C5B7A", "#A63B2A", "#C4622D"];
|
||
const PRIORITY_LABEL = { hoch: "Hoch", mittel: "Mittel", niedrig: "Niedrig" };
|
||
|
||
const MONTH_LABELS = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
|
||
const MONTH_LABELS_BY_KEY = {
|
||
"01": "Jan", "02": "Feb", "03": "Mär", "04": "Apr", "05": "Mai", "06": "Jun",
|
||
"07": "Jul", "08": "Aug", "09": "Sep", "10": "Okt", "11": "Nov", "12": "Dez"
|
||
};
|
||
|
||
function isLeap(year) {
|
||
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
|
||
}
|
||
|
||
function dayOfYear(dateStr, year) {
|
||
const d = new Date(`${dateStr}T00:00:00Z`);
|
||
const start = new Date(Date.UTC(year, 0, 1));
|
||
return Math.floor((d - start) / 86400000);
|
||
}
|
||
|
||
function capacityBarClassFor(month) {
|
||
if (month.overloaded) return "danger";
|
||
if (month.utilization >= 90) return "warn";
|
||
return "ok";
|
||
}
|
||
|
||
document.addEventListener("alpine:init", () => {
|
||
Alpine.data("app", () => ({
|
||
// ---------- global state ----------
|
||
currentYear: new Date().getFullYear(),
|
||
nav: NAV,
|
||
view: "timeline",
|
||
people: [],
|
||
projects: [],
|
||
tasks: [],
|
||
absences: [],
|
||
loading: true,
|
||
loadError: null,
|
||
|
||
personPalette: PERSON_PALETTE,
|
||
projectPalette: PROJECT_PALETTE,
|
||
priorityLabel: PRIORITY_LABEL,
|
||
monthLabels: MONTH_LABELS,
|
||
|
||
modalError: null,
|
||
modalSaving: false,
|
||
|
||
// ---------- person form ----------
|
||
personFormOpen: false,
|
||
personEditingId: null,
|
||
personDraft: { name: "", role: "", weeklyHours: 40, color: PERSON_PALETTE[0] },
|
||
|
||
// ---------- absence form ----------
|
||
absenceFormOpen: false,
|
||
absenceDraft: { personId: "", startDate: "", endDate: "", note: "" },
|
||
|
||
// ---------- project form ----------
|
||
projectFormOpen: false,
|
||
projectEditingId: null,
|
||
projectDraft: { name: "", description: "", color: PROJECT_PALETTE[0] },
|
||
|
||
// ---------- task form ----------
|
||
taskFormOpen: false,
|
||
taskEditingId: null,
|
||
taskDraft: {
|
||
projectId: "",
|
||
name: "",
|
||
startDate: "",
|
||
endDate: "",
|
||
estimatedHours: 8,
|
||
assigneeId: "",
|
||
priority: "mittel",
|
||
status: "geplant",
|
||
dependsOn: ""
|
||
},
|
||
|
||
// ---------- timeline ----------
|
||
timelineYear: new Date().getFullYear(),
|
||
|
||
// ---------- capacity ----------
|
||
capacityYear: new Date().getFullYear(),
|
||
capacityData: null,
|
||
capacityLoading: true,
|
||
capacityError: null,
|
||
|
||
init() {
|
||
this.reloadAll();
|
||
},
|
||
|
||
async reloadAll() {
|
||
try {
|
||
const [p, pr, t, a] = await Promise.all([
|
||
api.people.list(),
|
||
api.projects.list(),
|
||
api.tasks.list(),
|
||
api.absences.list()
|
||
]);
|
||
this.people = p;
|
||
this.projects = pr;
|
||
this.tasks = t;
|
||
this.absences = a;
|
||
this.loadError = null;
|
||
} catch (err) {
|
||
this.loadError = err.message;
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
|
||
setView(key) {
|
||
this.view = key;
|
||
if (key === "capacity") this.loadCapacity();
|
||
},
|
||
|
||
personById(id) {
|
||
return this.people.find((p) => p.id === id);
|
||
},
|
||
|
||
personNameOrUnknown(id) {
|
||
return this.personById(id)?.name || "Unbekannt";
|
||
},
|
||
|
||
assigneeName(id) {
|
||
return this.personById(id)?.name || "–";
|
||
},
|
||
|
||
sortedAbsences() {
|
||
return [...this.absences].sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||
},
|
||
|
||
tasksByProject(projectId) {
|
||
return this.tasks
|
||
.filter((t) => t.projectId === projectId)
|
||
.sort((a, b) => a.startDate.localeCompare(b.startDate));
|
||
},
|
||
|
||
// ---------- person CRUD ----------
|
||
openPersonForm(person = null) {
|
||
this.personEditingId = person ? person.id : null;
|
||
this.personDraft = person
|
||
? { name: person.name, role: person.role || "", weeklyHours: person.weeklyHours ?? 40, color: person.color || PERSON_PALETTE[0] }
|
||
: { name: "", role: "", weeklyHours: 40, color: PERSON_PALETTE[0] };
|
||
this.modalError = null;
|
||
this.personFormOpen = true;
|
||
this.$nextTick(() => document.getElementById("p-name")?.focus());
|
||
},
|
||
|
||
closePersonForm() {
|
||
this.personFormOpen = false;
|
||
},
|
||
|
||
async savePerson() {
|
||
this.modalError = null;
|
||
if (!this.personDraft.name.trim()) {
|
||
this.modalError = "Bitte einen Namen eingeben.";
|
||
return;
|
||
}
|
||
this.modalSaving = true;
|
||
try {
|
||
const payload = {
|
||
name: this.personDraft.name,
|
||
role: this.personDraft.role,
|
||
weeklyHours: Number(this.personDraft.weeklyHours),
|
||
color: this.personDraft.color
|
||
};
|
||
if (this.personEditingId) {
|
||
await api.people.update(this.personEditingId, payload);
|
||
} else {
|
||
await api.people.create(payload);
|
||
}
|
||
this.personFormOpen = false;
|
||
await this.reloadAll();
|
||
} catch (err) {
|
||
this.modalError = err.message;
|
||
} finally {
|
||
this.modalSaving = false;
|
||
}
|
||
},
|
||
|
||
async removePerson(id) {
|
||
if (!confirm("Diese Person inklusive ihrer Abwesenheiten wirklich entfernen?")) return;
|
||
await api.people.remove(id);
|
||
await this.reloadAll();
|
||
},
|
||
|
||
// ---------- absence CRUD ----------
|
||
openAbsenceForm() {
|
||
this.absenceDraft = { personId: this.people[0]?.id || "", startDate: "", endDate: "", note: "" };
|
||
this.modalError = null;
|
||
this.absenceFormOpen = true;
|
||
},
|
||
|
||
closeAbsenceForm() {
|
||
this.absenceFormOpen = false;
|
||
},
|
||
|
||
async saveAbsence() {
|
||
this.modalError = null;
|
||
const d = this.absenceDraft;
|
||
if (!d.personId || !d.startDate || !d.endDate) {
|
||
this.modalError = "Bitte Person, Start- und Enddatum angeben.";
|
||
return;
|
||
}
|
||
if (d.startDate > d.endDate) {
|
||
this.modalError = "Das Startdatum muss vor dem Enddatum liegen.";
|
||
return;
|
||
}
|
||
this.modalSaving = true;
|
||
try {
|
||
await api.absences.create({ personId: d.personId, startDate: d.startDate, endDate: d.endDate, note: d.note });
|
||
this.absenceFormOpen = false;
|
||
await this.reloadAll();
|
||
} catch (err) {
|
||
this.modalError = err.message;
|
||
} finally {
|
||
this.modalSaving = false;
|
||
}
|
||
},
|
||
|
||
async removeAbsence(id) {
|
||
await api.absences.remove(id);
|
||
await this.reloadAll();
|
||
},
|
||
|
||
// ---------- project CRUD ----------
|
||
openProjectForm(project = null) {
|
||
this.projectEditingId = project ? project.id : null;
|
||
this.projectDraft = project
|
||
? { name: project.name, description: project.description || "", color: project.color || PROJECT_PALETTE[0] }
|
||
: { name: "", description: "", color: PROJECT_PALETTE[0] };
|
||
this.modalError = null;
|
||
this.projectFormOpen = true;
|
||
this.$nextTick(() => document.getElementById("pr-name")?.focus());
|
||
},
|
||
|
||
closeProjectForm() {
|
||
this.projectFormOpen = false;
|
||
},
|
||
|
||
async saveProject() {
|
||
this.modalError = null;
|
||
if (!this.projectDraft.name.trim()) {
|
||
this.modalError = "Bitte einen Projektnamen eingeben.";
|
||
return;
|
||
}
|
||
this.modalSaving = true;
|
||
try {
|
||
const payload = {
|
||
name: this.projectDraft.name,
|
||
description: this.projectDraft.description,
|
||
color: this.projectDraft.color
|
||
};
|
||
if (this.projectEditingId) {
|
||
await api.projects.update(this.projectEditingId, payload);
|
||
} else {
|
||
await api.projects.create(payload);
|
||
}
|
||
this.projectFormOpen = false;
|
||
await this.reloadAll();
|
||
} catch (err) {
|
||
this.modalError = err.message;
|
||
} finally {
|
||
this.modalSaving = false;
|
||
}
|
||
},
|
||
|
||
async removeProject(id) {
|
||
if (!confirm("Projekt inklusive aller zugehoerigen Aufgaben wirklich loeschen?")) return;
|
||
await api.projects.remove(id);
|
||
await this.reloadAll();
|
||
},
|
||
|
||
// ---------- task CRUD ----------
|
||
openTaskForm(task = null, projectHint = null) {
|
||
this.taskEditingId = task ? task.id : null;
|
||
this.taskDraft = {
|
||
projectId: task?.projectId || projectHint || this.projects[0]?.id || "",
|
||
name: task?.name || "",
|
||
startDate: task?.startDate || "",
|
||
endDate: task?.endDate || "",
|
||
estimatedHours: task?.estimatedHours ?? 8,
|
||
assigneeId: task?.assigneeId || "",
|
||
priority: task?.priority || "mittel",
|
||
status: task?.status || "geplant",
|
||
dependsOn: task?.dependsOn || ""
|
||
};
|
||
this.modalError = null;
|
||
this.taskFormOpen = true;
|
||
this.$nextTick(() => document.getElementById("t-name")?.focus());
|
||
},
|
||
|
||
closeTaskForm() {
|
||
this.taskFormOpen = false;
|
||
},
|
||
|
||
taskDependencyOptions() {
|
||
return this.tasks.filter((t) => t.id !== this.taskEditingId);
|
||
},
|
||
|
||
async saveTask() {
|
||
this.modalError = null;
|
||
const d = this.taskDraft;
|
||
if (!d.projectId || !d.name.trim() || !d.startDate || !d.endDate) {
|
||
this.modalError = "Projekt, Name, Start- und Enddatum sind erforderlich.";
|
||
return;
|
||
}
|
||
if (d.startDate > d.endDate) {
|
||
this.modalError = "Das Startdatum muss vor dem Enddatum liegen.";
|
||
return;
|
||
}
|
||
this.modalSaving = true;
|
||
try {
|
||
const payload = {
|
||
projectId: d.projectId,
|
||
name: d.name,
|
||
startDate: d.startDate,
|
||
endDate: d.endDate,
|
||
estimatedHours: Number(d.estimatedHours),
|
||
assigneeId: d.assigneeId || null,
|
||
priority: d.priority,
|
||
status: d.status,
|
||
dependsOn: d.dependsOn || null
|
||
};
|
||
if (this.taskEditingId) {
|
||
await api.tasks.update(this.taskEditingId, payload);
|
||
} else {
|
||
await api.tasks.create(payload);
|
||
}
|
||
this.taskFormOpen = false;
|
||
await this.reloadAll();
|
||
} catch (err) {
|
||
this.modalError = err.message;
|
||
} finally {
|
||
this.modalSaving = false;
|
||
}
|
||
},
|
||
|
||
async removeTask(id) {
|
||
await api.tasks.remove(id);
|
||
await this.reloadAll();
|
||
},
|
||
|
||
// ---------- timeline ----------
|
||
timelineDaysInYear() {
|
||
return isLeap(this.timelineYear) ? 366 : 365;
|
||
},
|
||
|
||
timelineGrouped() {
|
||
return this.projects
|
||
.map((project) => ({
|
||
project,
|
||
tasks: this.tasks
|
||
.filter((t) => t.projectId === project.id)
|
||
.filter((t) => {
|
||
const startYear = Number(t.startDate.slice(0, 4));
|
||
const endYear = Number(t.endDate.slice(0, 4));
|
||
return startYear <= this.timelineYear && endYear >= this.timelineYear;
|
||
})
|
||
.sort((a, b) => a.startDate.localeCompare(b.startDate))
|
||
}))
|
||
.filter((g) => g.tasks.length > 0);
|
||
},
|
||
|
||
timelineBarStyle(task) {
|
||
const year = this.timelineYear;
|
||
const daysInYear = this.timelineDaysInYear();
|
||
const yearStart = `${year}-01-01`;
|
||
const yearEnd = `${year}-12-31`;
|
||
const clippedStart = task.startDate < yearStart ? yearStart : task.startDate;
|
||
const clippedEnd = task.endDate > yearEnd ? yearEnd : task.endDate;
|
||
const startDay = dayOfYear(clippedStart, year);
|
||
const endDay = dayOfYear(clippedEnd, year);
|
||
const leftPct = (startDay / daysInYear) * 100;
|
||
const widthPct = Math.max(((endDay - startDay + 1) / daysInYear) * 100, 0.6);
|
||
const person = this.personById(task.assigneeId);
|
||
const project = this.projects.find((p) => p.id === task.projectId);
|
||
return `left: ${leftPct}%; width: ${widthPct}%; background: ${person?.color || project?.color || "var(--accent)"};`;
|
||
},
|
||
|
||
// ---------- capacity ----------
|
||
async loadCapacity() {
|
||
this.capacityLoading = true;
|
||
try {
|
||
const res = await api.capacity.get(`${this.capacityYear}-01-01`, `${this.capacityYear}-12-31`);
|
||
this.capacityData = res;
|
||
this.capacityError = null;
|
||
} catch (err) {
|
||
this.capacityError = err.message;
|
||
} finally {
|
||
this.capacityLoading = false;
|
||
}
|
||
},
|
||
|
||
capacityPrevYear() {
|
||
this.capacityYear -= 1;
|
||
this.loadCapacity();
|
||
},
|
||
|
||
capacityNextYear() {
|
||
this.capacityYear += 1;
|
||
this.loadCapacity();
|
||
},
|
||
|
||
capacityMaxScale(person) {
|
||
return Math.max(1, ...person.months.map((m) => Math.max(m.capacityHours, m.assignedHours)));
|
||
},
|
||
|
||
capacityBarClass(month) {
|
||
return capacityBarClassFor(month);
|
||
},
|
||
|
||
monthLabel(monthKey) {
|
||
return MONTH_LABELS_BY_KEY[monthKey.slice(5)];
|
||
}
|
||
}));
|
||
});
|