WIP first working solution (untested and not optimized)
This commit is contained in:
parent
cee3597e25
commit
9f8f8a96df
@ -19,7 +19,6 @@ Um die Verfügbarkeit für alle Mitglieder transparent zu halten und Überschnei
|
||||
|
||||
Weitere Infos zur Reservierung findest du unterhalb der Kalender.
|
||||
|
||||
{{< tsc/iframe >}}https://cloud.tsc-vfl.de/index.php/apps/calendar/embed/d5KikZAZJfJxMHyK-RyoP44ym84oa5NFm-8DBYtgZwmkDsdemr/listYear/now{{< /tsc/iframe >}}
|
||||
|
||||
{{<tsc/calendar-color-table>}}
|
||||
|
||||
@ -29,6 +28,9 @@ Weitere Infos zur Reservierung findest du unterhalb der Kalender.
|
||||
{{< tsc/calendar/schedule 10 22 "Mon" "Tue" "Wed" >}}
|
||||
|
||||
{{< tsc/show-calendar 10 22 "Mo" "Di" "Mi" >}}
|
||||
|
||||
{{< tsc/calendar/schedule 10 22 "Thu" "Fri" >}}
|
||||
|
||||
{{< tsc/show-calendar 10 22 "Do" "Fr" >}}
|
||||
|
||||
|
||||
|
||||
@ -11,9 +11,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mouse-available {
|
||||
@media screen and (pointer: fine) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,19 @@
|
||||
@use './responsive.scss' as r;
|
||||
@use './colors.scss' as *;
|
||||
|
||||
$calendar-height-row: 60px;
|
||||
|
||||
.calendar-schedule {
|
||||
display: grid;
|
||||
|
||||
font-size: xx-small;
|
||||
|
||||
@include r.media-large {
|
||||
& {
|
||||
font-size: x-small;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: contents;
|
||||
font-weight: bold;
|
||||
@ -19,13 +29,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.first-row {
|
||||
grid-row: 1;
|
||||
}
|
||||
.second-row {
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.times {
|
||||
@ -35,6 +38,57 @@
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
height: $calendar-height-row;
|
||||
|
||||
border-top: solid lightgray 1px;
|
||||
}
|
||||
|
||||
.main-entry {
|
||||
position: relative;
|
||||
|
||||
.event {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: calc($calendar-height-row * var(--minutes) / 60.0);
|
||||
height: calc($calendar-height-row * var(--duration) / 60.0);
|
||||
|
||||
width: 30%;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 0;
|
||||
// overflow: hidden;
|
||||
|
||||
--fg-color: black;
|
||||
|
||||
&.room-vorne {
|
||||
--bg-color: var(--color-vhvorne);
|
||||
left: 2.5%;
|
||||
}
|
||||
&.room-mitte {
|
||||
--bg-color: var(--color-vhmitte);
|
||||
left: 35%
|
||||
}
|
||||
&.room-hinten {
|
||||
--bg-color: var(--color-vhhinten);
|
||||
--fg-color: white;
|
||||
left: 67.5%;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
border-radius: 4px;
|
||||
|
||||
color: var(--fg-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.cal-main-content {
|
||||
grid-row: 3 / 100;
|
||||
position: relative;
|
||||
@ -88,14 +142,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
display: contents;
|
||||
|
||||
> * {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-grid-2-days {
|
||||
|
||||
@ -21,7 +21,39 @@
|
||||
{{ end }}
|
||||
<div class="second-row"></div>
|
||||
</div>
|
||||
<div class="times">
|
||||
{{ range (seq $start $end) }}
|
||||
{{- $currentHour := string . -}}
|
||||
{{- $addClass := "" -}}
|
||||
{{- $firstRow := eq . $start -}}
|
||||
{{- if eq . $start }}{{ $addClass = "first-main-row"}}{{ end -}}
|
||||
{{ warnf "Current hour: %s (%T)" $currentHour $currentHour }}
|
||||
<div class="table-row">{{ printf "%2d:00" . }}</div>
|
||||
{{- range $id, $day := $days }}
|
||||
<div class="table-row main-entry">
|
||||
{{- range $listSchedule }}
|
||||
{{- if ne .day $day }}{{ continue }}{{ end -}}
|
||||
{{- $sTime := time.AsTime (printf "2025-01-02T%s:00" .start) -}}
|
||||
{{- $evHour := $sTime.Format "15" -}}
|
||||
{{- if ne $currentHour $evHour }}{{ continue }}{{ end -}}
|
||||
{{- $hours := int ($sTime.Format "15") -}}
|
||||
{{- $minutes := int ($sTime.Format "4") -}}
|
||||
{{/* warnf "%T" $hours */}}
|
||||
{{/* $hours = add $hours (sub 0 $start) (div $minutes 60.0) */}}
|
||||
{{/* print $hours */}}
|
||||
{{/* $hours = $hours - 0 + ($minutes / 60.0) */}}
|
||||
{{- $style := printf "--duration: %d; --minutes: %d;" .duration $minutes -}}
|
||||
{{/* warnf "%s" $style */}}
|
||||
<div class="event room-{{ .roomId }}" style="{{ $style | safeCSS }}">
|
||||
<div>
|
||||
{{ .title }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{ end -}}
|
||||
<div class="table-row">{{ printf "%2d:00" . }}</div>
|
||||
{{ end }}
|
||||
<!--<div class="times">
|
||||
{{ range (seq $start $end) }}
|
||||
<div>{{ printf "%2d:00" . }}</div>
|
||||
<div>{{ printf "%2d:00" . }}</div>
|
||||
@ -49,70 +81,5 @@
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="background">
|
||||
{{ range $idx, $val := (seq $start $end)}}
|
||||
<div class="hor-line" style="grid-row-start: calc({{$idx}} + 1);"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}-->
|
||||
</div>
|
||||
<table class="calendar-manual">
|
||||
<tr>
|
||||
<th></th>
|
||||
{{ range $days }}
|
||||
<th colspan="3" class="day-title">{{ . }}</th>
|
||||
{{ end }}
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
{{ range $days }}
|
||||
<th class="first-col-of-room">vorne</th>
|
||||
<th>mitte</th>
|
||||
<th>hinten</th>
|
||||
{{ end }}
|
||||
<th></th>
|
||||
</tr>
|
||||
{{ range seq $start $end }}
|
||||
{{ $hour := . }}
|
||||
{{ range seq 0 15 45 }}
|
||||
{{ $firstMin := "" }}
|
||||
{{ if eq . 0 }}
|
||||
{{ $firstMin = "first-min" }}
|
||||
{{ end }}
|
||||
<tr class="{{ $firstMin }}">
|
||||
{{ $time := printf "%2d:%02d" $hour . }}
|
||||
{{ if or (eq . 0) (eq . 30) }}
|
||||
<td rowspan="2" class="time">{{ $time }}</td>
|
||||
{{ end }}
|
||||
{{ range $days }}
|
||||
{{ $day := . }}
|
||||
{{ $firstRoom := true }}
|
||||
{{ range slice "vorne" "mitte" "hinten" }}
|
||||
{{ $room := . }}
|
||||
{{ $addClass := "" }}
|
||||
{{ if $firstRoom }}
|
||||
{{ $addClass = "first-col-of-room" }}
|
||||
{{ $firstRoom = false }}
|
||||
{{ end }}
|
||||
{{ with index (index (index $calendar .) $day) $time }}
|
||||
<td class="calendar-block {{ $addClass }}">
|
||||
<div class="calendar-block-entity height-{{ .slots }}">
|
||||
<div class="room-block room-{{ $room }}">
|
||||
{{ .title }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{{ else }}
|
||||
<td class="{{ $addClass }}"></td>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if or (eq . 0) (eq . 30) }}
|
||||
{{ $time := printf "%2d.%02d" $hour . }}
|
||||
<td rowspan="2" class="time">{{ $time }}</td>
|
||||
{{ end }}
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</table>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user