Fachschaft/sprechstunden-go
7
1
Fork 0
Code Issues 8 Pull requests Releases Activity

ui: nice layout #18

Manually merged
johannes merged 13 commits from ui/enhance-layout into main 2023-07-10 11:37:13 +00:00
Conversation 3 Commits 13 Files changed 15 +313 -129
15 changed files with 313 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
controllers/timetable.go
View file

@ -55,9 +55,9 @@ func (b *BaseHandler) printTimetable(timetable map[models.Date]map[int]models.Of
for minute := 0; minute < 60; minute += b.config.Date.MinuteGranularity {
tableBody += "<tr>"
if minute == 0 {
tableBody += fmt.Sprintf("<td>%d Uhr</td>\n", hour)
tableBody += fmt.Sprintf("<td class=\"timetableRightBorder\">%d Uhr</td>\n", hour)
} else {
tableBody += "<td></td>\n"
tableBody += "<td class=\"timetableRightBorder\"></td>\n"
}
for day := 0; day < 5; day += 1 {
for slot := 0; slot < slots[day]; slot += 1 {
@ -96,7 +96,7 @@ func (b *BaseHandler) printTimetable(timetable map[models.Date]map[int]models.Of
}
} else {
if slot+1 == slots[day] {
tableBody += "<td style=\"border-right: 1px dotted\"></td>\n"
tableBody += "<td class=\"timetableRightBorder\"></td>\n"
} else {
tableBody += "<td></td>\n"
}

17
static/officeHours.css Normal file
View file

@ -0,0 +1,17 @@
/* mark required fields */
input.required ~ label::after, select.required ~ label::after {
content: ' *';
color: red;
}
/* improve indent of help texts below form fields */
.form-control ~ .form-text {
padding-left: 12px;
padding-right: 12px;
}
.timetableRightBorder {
border-right: 1px dotted;
}
td.officeHour {
border: 1px solid;
}

4
templating/templates/addFailure.html
View file

@ -1,7 +1,9 @@
{{define "title"}}Fehler{{end}}
{{define "title"}}Sprechstunde anlegen – Fehler{{end}}
{{define "content"}}
<div class="col-md-8 offset-md-2">
Irgendetwas ist schief gegangen. Bitte sende folgende Daten an <a href="mailto:sprechstundentool@mathebau.de">sprechstundentool@mathebau.de</a> mit einer Beschreibung, was du tun wolltest.
<br>
{{.}}
</div>
{{end}}

165
templating/templates/addMask.html
View file

@ -1,58 +1,153 @@
<{{define "title"}}Sprechstunde anlegen{{end}}
{{define "title"}}Sprechstunde anlegen{{end}}
{{define "content"}}
<p>
{{range .Errors}}{{.}}<br>{{end}}
</p>
<p>
<div class="col-md-12">
<div class="alert alert-info">
Für die vorlesungsfreie Zeit müssen und können keine Sprechstunden gebucht werden.
Nutzt die offenen Arbeitsräume in dieser Zeit, wann immer ihr sie braucht.
</p>
</div>
{{range .Errors}}
<div class="alert alert-danger">
<strong>Fehler: </strong> {{.}}
</div>
{{end}}
</div>
<div class="row">
<div class="col-lg-8 mb-4">
<form method="POST" action="addOfficeHour">
<label for="veranstaltung">Veranstaltung</label>:
<select name="veranstaltung" id="veranstaltung">
<div class="form-floating mb-3">
<input class="form-control required" required name="name" id="name" type="text" value="{{.Name}}" placeholder="">
<label for="name">Name</label>
</div>
<div class="form-floating mb-3">
<input class="form-control required" required name="email" id="email" type="email" value="{{.Email}}" placeholder="">
<label for="email">Email-Adresse</label>
<div class="form-text">
{{if ne .Config.Tutor.MailSuffix ""}}
Du musst hier eine Email-Adresse angeben, die auf „{{.Config.Tutor.MailSuffix}}“ endet.<br>
{{end}}
Die Email-Adresse dient der Vermeidung von Spam und wird nicht veröffentlicht.
</div>
</div>
<div class="form-floating mb-3">
<select class="form-control form-select required" required name="veranstaltung" id="veranstaltung">
{{range $course := .Courses}}
<option value="{{$course.Id}}"{{if eq $course.Id $.SelectedCourse}} selected{{end}}>{{$course.Name}}</option>
{{end}}
</select><br>
<small><span class="text-muted">Wenn du eine Veranstaltung hier vermisst, schreibe an
<a href="mailto:sprechstundentool@mathebau.de?subject=Sprechstundentool: Neue Veranstaltung&body=Hey liebe Sprechstundentool-Admins,%0D%0A%0D%0Ameine Veranstaltung fehlt im Auswahlmenü.%0D%0AEs ist die Veranstaltung%0D%0A%0D%0AViele Grüße%0D%0A">sprechstundentool@mathebau.de</a>.</span></small><br>
<label for="woche">Vorlesungswoche</label>:
<select name="woche" id="woche">
</select>
<label for="veranstaltung">Veranstaltung</label>
<div class="form-text">
Wenn du eine Veranstaltung hier vermisst, schreibe an
<a href="mailto:sprechstundentool@mathebau.de?subject=Sprechstundentool: Neue Veranstaltung&body=Hey liebe Sprechstundentool-Admins,%0D%0A%0D%0Ameine Veranstaltung fehlt im Auswahlmenü.%0D%0AEs ist die Veranstaltung%0D%0A%0D%0AViele Grüße%0D%0A" tabindex="-1">sprechstundentool@mathebau.de</a>.
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<select class="form-control form-select required" required name="woche" id="woche">
<option value="0"{{if eq 0 $.Date.Week}} selected{{end}}>Jede</option>
<option value="1"{{if eq 1 $.Date.Week}} selected{{end}}>Ungerade</option>
<option value="2"{{if eq 2 $.Date.Week}} selected{{end}}>Gerade</option>
</select><br>
<label for="tag">Tag</label>: <select name="tag" id="tag">
</select>
<label for="woche">Vorlesungswoche</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<select class="form-control form-select required" required name="tag" id="tag">
<option value="0"{{if eq 0 $.Date.Day}} selected{{end}}>Montag</option>
<option value="1"{{if eq 1 $.Date.Day}} selected{{end}}>Dienstag</option>
<option value="2"{{if eq 2 $.Date.Day}} selected{{end}}>Mittwoch</option>
<option value="3"{{if eq 3 $.Date.Day}} selected{{end}}>Donnerstag</option>
<option value="4"{{if eq 4 $.Date.Day}} selected{{end}}>Freitag</option>
</select><br>
<label for="startzeit">Startzeit</label>: <input type="time" name="startzeit" id="startzeit" min="{{printf "%02d" .EarliestStartTime.Hour}}:{{printf "%02d" .EarliestStartTime.Minute}}" max="{{printf "%02d" .LatestStartTime.Hour}}:{{printf "%02d" .LatestStartTime.Minute}}" {{if ge $.Date.Hour .EarliestStartTime.Hour}}value="{{printf "%02d" $.Date.Hour}}:{{printf "%02d" $.Date.Minute}}"{{end}} required><br>
<label for="dauer">Dauer in Minuten</label>: <input name="dauer" id="dauer" type="number" min="{{.MinuteGranularity}}" max="120" step="{{.MinuteGranularity}}" value="{{.Duration}}" required><br>
<label for="raum">Raum</label>:
<select name="raum" id="raum">
</select>
<label for="tag">Tag</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<input class="form-control required" required type="time" name="startzeit" id="startzeit"
min="{{printf "%02d" .EarliestStartTime.Hour}}:{{printf "%02d" .EarliestStartTime.Minute}}"
max="{{printf "%02d" .LatestStartTime.Hour}}:{{printf "%02d" .LatestStartTime.Minute}}"
{{if ge $.Date.Hour .EarliestStartTime.Hour}}value="{{printf "%02d" $.Date.Hour}}:{{printf "%02d" $.Date.Minute}}" {{end}}>
<label for="startzeit">Startzeit</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<input class="form-control required" required name="dauer" id="dauer" type="number"
min="{{.MinuteGranularity}}" max="120" step="{{.MinuteGranularity}}"
{{ if ne .Duration 0}}value="{{.Duration}}"{{end}} placeholder="">
<label for="dauer">Dauer in Minuten</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<select class="form-control form-select required" required name="raum" id="raum">
{{range $room := .Rooms}}
<option value="{{$room.Id}}"{{if eq $room.Id $.SelectedRoom}} selected{{end}}>{{$room.Name}}</option>
{{end}}
</select><br>
<label for="raumname">Raumname (für Sonderräume)</label>: <input type="text" name="raumname" id="raumname" value="{{.Roomname}}"><br>
<label for="name">Name</label>: <input name="name" id="name" type="text" size="50" value="{{.Name}}" required><br>
<label for="email">Email-Adresse</label>:
<input name="email" id="email" type="email" size="50" value="{{.Email}}" required><br>
<label for="info">Info</label>: <input name="info" id="info" type="text" size="50" value="{{.Info}}"><br>
<input type="submit">
</select>
<label for="raum">Raum</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<input class="form-control" type="text" name="raumname" id="raumname" value="{{.Roomname}}" placeholder="">
<label for="raumname">Raumname (für Sonderräume)</label>
</div>
</div>
</div>
<div class="form-floating mb-3">
<input class="form-control" name="info" id="info" type="text" value="{{.Info}}" placeholder="">
<label for="info">Info</label>
</div>
<div class="text-center">
<button class="btn btn-outline-primary" type="submit">Sprechstunde erstellen</button>
</div>
</form>
{{if ne .Config.Tutor.MailSuffix ""}}
Du musst hier eine Email-Adresse angeben, die auf „{{.Config.Tutor.MailSuffix}}“ endet.<br>
{{end}}
Außerdem dürfen in Räumen nur begrenzt viele Sprechstunden gleichzeitig stattfinden, nämlich
<dl>
</div>
<div class="col-lg-4">
<p>
Beachte, dass in den Arbeitsräumen nur begrenzt viele Sprechstunden gleichzeitig stattfinden dürfen.
Das Formular wird dich warnen, falls du versuchst deine Sprechstunde in einem zu vollen Raum anzulegen.
</p>
<ul class="list-group">
{{range $room := .Rooms}}
<dt>{{$room.Name}}</dt>
<dd>{{$room.MaxOccupy}} Sprechstunde{{if gt $room.MaxOccupy 1}}n{{end}}</dd>
{{ if ge 42 $room.MaxOccupy}}
<li class="list-group-item d-flex justify-content-between align-items-center">
{{$room.Name}}
<span class="badge bg-secondary rounded-pill">
{{$room.MaxOccupy}} Sprechstunde{{if gt $room.MaxOccupy 1}}n{{end}}
</span>
</li>
{{end}}
</dl>
{{end}}
</ul>
</div>
</div>
{{end}}

2
templating/templates/addSuccess.html
View file

@ -1,5 +1,7 @@
{{define "title"}}Sprechstunde anlegen{{end}}
{{define "content"}}
<div class="col-md-8 offset-md-2">
Die Sprechstunde wurde angelegt. Du solltest eine Mail mit einem Aktivierungslink erhalten haben.
</div>
{{end}}

27
templating/templates/base.html
View file

@ -7,21 +7,38 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/officeHours.css">
<title>{{block "title" .}}Start{{end}} – Sprechstunden</title>
</head>
<body>
<div class="container">
<div class="col-md-8 offset-md-2 bg-secondary bg-gradient mt-3 mb-2 p-3 rounded" style="--bs-bg-opacity: .3;">
<h5 class="text-center m-1">Sprechstunden für Matheveranstaltungen an der TU Darmstadt</h5>
<p class="text-center mb-0">
<a href="/">Startseite</a>
&bullet;
<a href="/addOfficeHour">Sprechstunde anlegen</a>
&bull;
<a href="/deleteOfficeHour">Sprechstunde löschen</a>
</p>
</div>
<div id="content">
<h1 class="h3 m-1 mb-3 text-center">{{template "title" .}}</h1>
{{block "content" .}}Du solltest dies nicht sehen.{{end}}
</div>
</div>
<footer class="container">
<a href="/">Startseite</a><br>
<a href="/addOfficeHour">Sprechstunde anlegen</a><br>
<a href="/deleteOfficeHour">Sprechstunde löschen</a><br>
<div class="col-md-8 offset-md-2 bg-secondary bg-gradient my-3 p-3 rounded" style="--bs-bg-opacity: .3;">
&COPY; <a class="text-body" href="https://mathebau.de/">Fachschaft Mathematik, TU Darmstadt</a>
<br>
<!-- NOTE: when updating this hard coded email adress, also update it in addMask.html -->
Technische Fragen an <a href="mailto:sprechstundentool@mathebau.de">sprechstundentool@mathebau.de</a><br>
Quellcode und Featurewünsche: <a href="https://gitea.mathebau.de/Fachschaft/sprechstunden-go">Gitea-Repository</a>
Technische Fragen an <a href="mailto:sprechstundentool@mathebau.de">sprechstundentool@mathebau.de</a>
<br>
Quellcode und Featurewünsche:&nbsp;<a href="https://gitea.mathebau.de/Fachschaft/sprechstunden-go">Gitea-Repository</a>
</div>
</footer>
<script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>

4
templating/templates/deleteFailure.html
View file

@ -1,5 +1,7 @@
{{define "title"}}Sprechstunde löschen{{end}}
{{define "title"}}Sprechstunde löschen – Fehler{{end}}
{{define "content"}}
<div class="col-md-8 offset-md-2">
Das Löschen der Sprechstunde ist fehlgeschlagen: {{.Error}}
</div>
{{end}}

22
templating/templates/deleteMailForm.html
View file

@ -1,19 +1,31 @@
{{define "title"}}Sprechstunde löschen{{end}}
{{define "content"}}
{{.Error}}
<div class="col-md-8 offset-md-2">
{{ if .Error }}
<div class="alert alert-danger">
<strong>Fehler:</strong> {{.Error}}
</div>
{{ end }}
<p>
Willst du die Sprechstunde<br>
{{printf "%02d" .OfficeHour.Date.Hour}}:{{printf "%02d" .OfficeHour.Date.Minute}} - {{printf "%02d" .OfficeHour.EndDate.Hour}}:{{printf "%02d" .OfficeHour.EndDate.Minute}}<br>
{{if eq .OfficeHour.Date.Week 1}}in ungeraden Vorlesungswochen<br>{{end}}{{if eq .OfficeHour.Date.Week 2}}in geraden Vorlesungswochen<br>{{end}}
{{.OfficeHour.Course.Name}}<br>
{{.OfficeHour.Tutor.Name}}<br>
{{.OfficeHour.Room.Name}}<br>
wirklich löschen? Bitte bestätige dies durch Angabe der Mailadresse, mit der die Sprechstunde angelegt wurde: <br>
wirklich löschen? Bitte bestätige dies durch Angabe der Mailadresse, mit der die Sprechstunde angelegt wurde:
</p>
<form method="POST" action="deleteOfficeHour">
<input type="hidden" name="id" value="{{.OfficeHour.Id}}">
<label for="email">Email-Adresse</label>:
<input name="email" id="email" type="email" size="50" required><br>
<input type="submit">
<div class="input-group">
<div class="form-floating">
<input class="form-control required" name="email" id="email" type="email" size="50" required placeholder="">
<label for="email">Email-Adresse</label>
</div>
<button class="btn btn-outline-primary" type="submit">Bestätigen</button>
</div>
</form>
</div>
{{end}}

2
templating/templates/deleteSuccess.html
View file

@ -1,6 +1,8 @@
{{define "title"}}Sprechstunde löschen{{end}}
{{define "content"}}
<div class="col-md-8 offset-md-2">
Du solltest eine Mail mit einem Bestätigungslink erhalten haben. <br>
Sie wurde an die Adresse geschickt, mit der die Sprechstunde angelegt wurde.<br>
</div>
{{end}}

2
templating/templates/executeFailure.html
View file

@ -1,7 +1,9 @@
{{define "title"}}Anfrage ausführen fehlgeschlagen{{end}}
{{define "content"}}
<div class="col-md-8 offset-md-2">
Irgendetwas ist schief gegangen. Bitte sende folgende Daten an <a href="mailto:sprechstundentool@mathebau.de">sprechstundentool@mathebau.de</a> mit einer Beschreibung, was du tun wolltest.
<br>
{{.}}
</div>"
{{end}}

2
templating/templates/executeSuccess.html
View file

@ -1,5 +1,7 @@
{{define "title"}}Anfrage ausgeführt{{end}}
{{define "content"}}
<div class="col-md-8 offset-md-2">
Deine Anfrage wurde ausgeführt.
</div>
{{end}}

42
templating/templates/index.html
View file

@ -1,25 +1,49 @@
{{define "title"}}Übersicht{{end}}
{{define "title"}}
Sprechstunden
{{- range $course := .Courses -}}
{{- if eq $course.Id $.SelectedCourse}} für {{$course.Name}}{{- end -}}
{{- end -}}
{{- range $room := .Rooms -}}
{{- if eq $room.Id $.SelectedRoom}} in Raum {{$room.Name}}{{- end -}}
{{- end -}}
{{end}}
{{define "content"}}
<div id="queryMask" class="col-md-8 offset-md-2">
<form method="GET" action="/getByCourse">
<label for="veranstaltung">Veranstaltung: </label>
<select name="veranstaltung" id="veranstaltung" size="1" onchange="document.forms[0].submit()">
<option value="">Alle</option>
<div class="input-group mb-3">
<div class="form-floating col-lg-8">
<select class="form-control form-select" name="veranstaltung" id="veranstaltung" size="1" onchange="document.forms[0].submit()">
<option value="">–– auswählen ––</option>
{{range $course := .Courses}}
<option value="{{$course.Id}}"{{if eq $course.Id $.SelectedCourse}} selected{{end}}>{{$course.Name}}</option>
{{end}}
</select>
<input type="submit" value="Auswählen">
<label for="veranstaltung">Veranstaltung</label>
</div>
<noscript>
<button class="btn btn-sm btn-outline-secondary col-lg-4" type="submit">Los!</button>
</noscript>
</div>
</form>
<form method="GET" action="/getByRoom">
<label for="raum">Raum: </label>
<select name="raum" id="raum" size="1" onchange="document.forms[1].submit()">
<option value="">Alle</option>
<div class="input-group mb-3">
<div class="form-floating">
<select class="form-control form-select" name="raum" id="raum" size="1" onchange="document.forms[1].submit()">
<option value="">–– auswählen ––</option>
{{range $room := .Rooms}}
<option value="{{$room.Id}}"{{if eq $room.Id $.SelectedRoom}} selected{{end}}>{{$room.Name}}</option>
{{end}}
</select>
<input type="submit" value="Auswählen">
<label for="raum">Raum</label>
</div>
<noscript>
<button class="btn btn-outline-secondary col-lg-4" type="submit">Los!</button>
</noscript>
</div>
</form>
</div>
<div id="timetable" style="overflow-x: scroll;">
{{.Timetable}}
</div>
{{end}}

14
templating/templates/officeHourTable.html
View file

@ -1,11 +1,11 @@
<table>
<table class="mx-auto">
<tr>
<th>&nbsp;</th>
<th colspan="{{.ColspanMon}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Montag</th>
<th colspan="{{.ColspanTue}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Dienstag</th>
<th colspan="{{.ColspanWed}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Mittwoch</th>
<th colspan="{{.ColspanThu}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Donnerstag</th>
<th colspan="{{.ColspanFri}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Freitag</th>
<th class="px-2 text-center timetableRightBorder">&nbsp;</th>
<th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanMon}}">Montag</th>
<th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanTue}}">Dienstag</th>
<th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanWed}}">Mittwoch</th>
<th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanThu}}">Donnerstag</th>
<th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanFri}}">Freitag</th>
</tr>
{{.TableBody}}
</table>

11
templating/templates/requestNotFound.html
View file

@ -1,12 +1,19 @@
{{define "title"}}Anfrage bestätigen fehlgeschlagen{{end}}
{{define "content"}}
<div class="col-md-8 offset-md-2">
<p>
Dieser Bestätigungscode ist nicht verfügbar. <br>
Bitte gib deinen Bestätigungscode hier ein.
</p>
<form action="/confirmRequest">
<label for="code">Bestätigungscode</label>: <input type="text" name="code" id="code">
<input type="submit">
<div class="input-group">
<div class="form-floating">
<input class="form-control required" type="text" name="code" id="code" required placeholder="Bestätigungscode">
<label for="code">Bestätigungscode</label>
</div>
<button class="btn btn-outline-primary" type="submit">Bestätigen</button>
</div>
</div>
</form>
{{end}}

2
templating/templates/td.html
View file

@ -1,4 +1,4 @@
<td rowspan="{{divide .OfficeHour.Duration .MinuteGranularity}}" style="border: 1px solid">
<td class="officeHour" rowspan="{{divide .OfficeHour.Duration .MinuteGranularity}}">
{{if .DeleteIcons}}<div style="text-align: right;"><a href="/deleteOfficeHour?id={{.OfficeHour.Id}}">❌</a></div>{{end}}
{{printf "%02d" .OfficeHour.Date.Hour}}:{{printf "%02d" .OfficeHour.Date.Minute}} - {{printf "%02d" .OfficeHour.EndDate.Hour}}:{{printf "%02d" .OfficeHour.EndDate.Minute}}<br>
{{if eq .OfficeHour.Date.Week 1}}in ungeraden Vorlesungswochen<br>{{end}}{{if eq .OfficeHour.Date.Week 2}}in geraden Vorlesungswochen<br>{{end}}