WIP create calendar
This commit is contained in:
parent
7fd921b66e
commit
cee3597e25
@ -26,6 +26,8 @@ Weitere Infos zur Reservierung findest du unterhalb der Kalender.
|
||||
|
||||
## Raumbelegung - planmäßig
|
||||
|
||||
{{< tsc/calendar/schedule 10 22 "Mon" "Tue" "Wed" >}}
|
||||
|
||||
{{< tsc/show-calendar 10 22 "Mo" "Di" "Mi" >}}
|
||||
{{< tsc/show-calendar 10 22 "Do" "Fr" >}}
|
||||
|
||||
|
||||
9
themes/tsc_vfl/assets/css/_colors.scss
Normal file
9
themes/tsc_vfl/assets/css/_colors.scss
Normal file
@ -0,0 +1,9 @@
|
||||
$color-red: #cd1013;
|
||||
|
||||
$color-background-mobile-menu: #f5f5f5;
|
||||
$color-background-mobile-menu-header: #e0e0e0;
|
||||
$color-hor-line: #a5a5a5;
|
||||
|
||||
$color-vh-vorne: #ddcb55;
|
||||
$color-vh-mitte: #c98879;
|
||||
$color-vh-hinten: #0082c9;
|
||||
223
themes/tsc_vfl/assets/css/_schedule.scss
Normal file
223
themes/tsc_vfl/assets/css/_schedule.scss
Normal file
@ -0,0 +1,223 @@
|
||||
@use './responsive.scss' as r;
|
||||
@use './colors.scss' as *;
|
||||
|
||||
.calendar-schedule {
|
||||
display: grid;
|
||||
|
||||
.header {
|
||||
display: contents;
|
||||
font-weight: bold;
|
||||
div {
|
||||
justify-self: center;
|
||||
}
|
||||
.rooms {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
flex: 1 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.first-row {
|
||||
grid-row: 1;
|
||||
}
|
||||
.second-row {
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.times {
|
||||
display: contents;
|
||||
div {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.cal-main-content {
|
||||
grid-row: 3 / 100;
|
||||
position: relative;
|
||||
|
||||
&.day-0 {
|
||||
grid-column: 2;
|
||||
}
|
||||
&.day-1 {
|
||||
grid-column: 3;
|
||||
}
|
||||
&.day-2 {
|
||||
grid-column: 4;
|
||||
}
|
||||
// grid-column: 2;
|
||||
|
||||
.event {
|
||||
position: absolute;
|
||||
|
||||
width: 30%;
|
||||
// height: 100%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
display: contents;
|
||||
|
||||
> * {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-grid-2-days {
|
||||
grid-template-columns: auto repeat(2, 1fr) auto;
|
||||
|
||||
.cal-main-content {
|
||||
// grid-column-end: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-grid-3-days {
|
||||
grid-template-columns: auto repeat(3, 1fr) auto;
|
||||
|
||||
.cal-main-content {
|
||||
// grid-column-end: span 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy styling
|
||||
.calendar-manual {
|
||||
font-size: xx-small;
|
||||
|
||||
@include r.media-large {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 20px;
|
||||
|
||||
&.first-min {
|
||||
border-top: solid lightgray 1px;
|
||||
}
|
||||
|
||||
&:nth-of-type(n) {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.time {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.time:last-of-type, .first-col-of-room {
|
||||
border-left: solid lightgray 1px;
|
||||
}
|
||||
|
||||
.day-title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-block {
|
||||
position: relative;
|
||||
|
||||
.calendar-block-entity {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 1.5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
&.height-1 {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.height-2 {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.height-3 {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
&.height-4 {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
&.height-5 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
&.height-6 {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
&.height-7 {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
&.height-8 {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
&.height-9 {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
&.height-10 {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.room-block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.room-vorne {
|
||||
background-color: var(--color-vhvorne);
|
||||
}
|
||||
|
||||
.room-mitte {
|
||||
background-color: var(--color-vhmitte);
|
||||
}
|
||||
|
||||
.room-hinten {
|
||||
background-color: var(--color-vhhinten);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,11 @@
|
||||
@use 'responsive.scss' as r;
|
||||
@use './schedule.scss';
|
||||
@use './colors.scss' as *;
|
||||
|
||||
/* Variables */
|
||||
$total-width: 95%;
|
||||
$color-red: #cd1013;
|
||||
$color-background-mobile-menu: #f5f5f5;
|
||||
$color-background-mobile-menu-header: #e0e0e0;
|
||||
$color-hor-line: #a5a5a5;
|
||||
$gap-columns-persons: 25px;
|
||||
$left-menu-width: 180px;
|
||||
$color-vh-vorne: #ddcb55;
|
||||
$color-vh-mitte: #c98879;
|
||||
$color-vh-hinten: #0082c9;
|
||||
|
||||
|
||||
/* Mixins */
|
||||
@ -129,138 +124,10 @@ h1 {
|
||||
max-width: 100%;
|
||||
hyphens: auto;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
td, th {
|
||||
padding: 5px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #dedede;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
thead > tr {
|
||||
background-color: $color-red;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-manual {
|
||||
font-size: xx-small;
|
||||
|
||||
@include r.media-large {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 20px;
|
||||
|
||||
&.first-min {
|
||||
border-top: solid lightgray 1px;
|
||||
}
|
||||
|
||||
&:nth-of-type(n) {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.time {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.time:last-of-type, .first-col-of-room {
|
||||
border-left: solid lightgray 1px;
|
||||
}
|
||||
|
||||
.day-title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-block {
|
||||
position: relative;
|
||||
|
||||
.calendar-block-entity {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 1.5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
&.height-1 {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.height-2 {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.height-3 {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
&.height-4 {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
&.height-5 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
&.height-6 {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
&.height-7 {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
&.height-8 {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
&.height-9 {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
&.height-10 {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.room-block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.room-vorne {
|
||||
background-color: var(--color-vhvorne);
|
||||
}
|
||||
|
||||
.room-mitte {
|
||||
background-color: var(--color-vhmitte);
|
||||
}
|
||||
|
||||
.room-hinten {
|
||||
background-color: var(--color-vhhinten);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @include schedule.legacy;
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
margin: 7px 0 7px 15px;
|
||||
@ -299,6 +166,33 @@ h1 {
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
td, th {
|
||||
padding: 5px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #dedede;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
thead > tr {
|
||||
background-color: $color-red;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// @include schedule.legacy;
|
||||
|
||||
#header {
|
||||
border-bottom: 2px solid rgba(173, 173, 173, 50%);
|
||||
margin: 0 auto 30px;
|
||||
|
||||
18
themes/tsc_vfl/layouts/partials/tsc/calendar/list.html
Normal file
18
themes/tsc_vfl/layouts/partials/tsc/calendar/list.html
Normal file
@ -0,0 +1,18 @@
|
||||
{{ $calendars := site.Data.schedule.calendars -}}
|
||||
{{- $list := slice -}}
|
||||
{{- range $room, $roomData := $calendars -}}
|
||||
{{- if ($roomData.ignore | default false) -}}{{ continue }}{{- end -}}
|
||||
{{- $roomName := $roomData.name | default $room -}}
|
||||
{{/* warnf "%s " $room */}}
|
||||
{{- range $roomData.schedule -}}
|
||||
{{- $addData := dict "room" $roomName "roomId" $room "weight" 0 -}}
|
||||
{{- $addData = merge $addData . -}}
|
||||
{{/* warnf "%#v" $addData */}}
|
||||
{{- $list = $list | append $addData -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- $list = sort $list "start" -}}
|
||||
{{- $list = sort $list "title" -}}
|
||||
{{- $list = sort $list "weight" -}}
|
||||
{{/* warnf "%#v" $list */}}
|
||||
{{- return $list -}}
|
||||
118
themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html
Normal file
118
themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html
Normal file
@ -0,0 +1,118 @@
|
||||
{{- $start := .Get 0 -}}
|
||||
{{- $end := .Get 1 -}}
|
||||
{{- $days := after 2 .Params -}}
|
||||
{{- $numDays := len $days -}}
|
||||
{{- $calendar := $.Site.Data.calendar.calendar -}}
|
||||
{{- $listSchedule := partialCached "tsc/calendar/list" . }}
|
||||
<div class="calendar-schedule calendar-grid-{{ $numDays }}-days">
|
||||
<div class="header">
|
||||
<div class="first-row"></div>
|
||||
{{ range $days }}
|
||||
<div class="first-row">{{ . }}</div>
|
||||
{{ end }}
|
||||
<div class="first-row"></div>
|
||||
<div class="second-row"></div>
|
||||
{{ range $days }}
|
||||
<div class="rooms second-row">
|
||||
<div>Vorne</div>
|
||||
<div>Mitte</div>
|
||||
<div>Hinten</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="second-row"></div>
|
||||
</div>
|
||||
<div class="times">
|
||||
{{ range (seq $start $end) }}
|
||||
<div>{{ printf "%2d:00" . }}</div>
|
||||
<div>{{ printf "%2d:00" . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ range $id, $day := $days }}
|
||||
<div class="cal-main-content day-{{$id}}">
|
||||
{{ range $listSchedule }}
|
||||
{{- if ne .day $day }}{{ continue }}{{ end }}
|
||||
{{- $sTime := time.AsTime (printf "2025-01-02T%s:00" .start) -}}
|
||||
{{- $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) */}}
|
||||
{{- $top := mul $hours 60 -}}
|
||||
{{- $height := mul (div .duration 60.0) 60 -}}
|
||||
{{- $style := printf "top: %1.0fpx; height: %1.0fpx;" $top $height -}}
|
||||
{{/* warnf "%s" $style */}}
|
||||
<div class="event room-{{ .roomId }}" style="{{ $style | safeCSS }}">
|
||||
<div>
|
||||
{{ .title }}
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
@ -1,23 +1,7 @@
|
||||
{{ $calendars := .Site.Data.schedule.calendars -}}
|
||||
{{- $list := slice -}}
|
||||
{{- range $room, $roomData := $calendars -}}
|
||||
{{- if ($roomData.ignore | default false) -}}{{ continue }}{{- end -}}
|
||||
{{- $roomName := $roomData.name | default $room -}}
|
||||
{{/* warnf "%s " $room */}}
|
||||
{{- range $roomData.schedule -}}
|
||||
{{- $addData := dict "room" $roomName "weight" 0 -}}
|
||||
{{- $addData = merge $addData . -}}
|
||||
{{/* warnf "%#v" $addData */}}
|
||||
{{- $list = $list | append $addData -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- $list := partialCached "tsc/calendar/list" . -}}
|
||||
{{- $cat := .Get "category" -}}
|
||||
{{/* warnf "%#v" $cat */}}
|
||||
{{- $showAge := .Get "showAge" | default false -}}
|
||||
{{- $list = sort $list "start" -}}
|
||||
{{- $list = sort $list "title" -}}
|
||||
{{- $list = sort $list "weight" -}}
|
||||
{{/* warnf "%#v" $list */}}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user