Brauche Hilfe bei einem Terminplaner der in Ninox mit CSS und HTML geschrieben wurde.

[franco]

Hallo
Ich habe hier ein Planer erstellt.Es wurde zwar mit Ninox gemacht,aber das Problem ist im Code.
Ich bekomme es nicht hin das die 5. Spalte (STD heute) seine eigene Farbe im Timeblock hat.Es hat die gleiche Farbe wie Spalte 3 und 4.Kann mir einer helfen?

hier der Code und ein Bild.

let colorRosi := "linear-gradient(to right, #ADD8E6, #87CEEB)";
let colorNunzia := "linear-gradient(to right, #FFB6C1, #FF69B4)";
let colorHeader := "#1E90FF";
let colorBorder := "#4682B4";
let colorBorderBlack := "#000000";
let colorBackground := "#F5F5F5";
let dat := Datum;
let frisTab := (select Termine where date(start(Termin)) = dat);
let empl := (select resources where Auswahl = 1).Name;
let firstWeek := week(date(year(dat), 1, 1));
let currentWeek := week(dat);
let weekNumber := if currentWeek >= firstWeek then
currentWeek - firstWeek + 1
else
52 - firstWeek + currentWeek + 1
end;
function isInside(t : appointment,r : time) do
let no1 := floor(number(time(start(t))) / 60000);
let no2 := floor(number(time(endof(t))) / 60000);
let zeit := floor(number(r) / 60000);
contains(range(no1, no2), zeit)
end;
let css := "
<style>
.gridContainer {
display: grid;
grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 0.5fr;
grid-gap: 0;
border-radius: 0.5em;
border: 1px solid #4682B4;
padding: 1em;
background-color: #F5F5F5;
position: relative !important;
}

.gridFormat {
font-size: 1em;
text-align: center;
border-radius: 0;
color: #333;
background-color: #fff;
padding: 0.1em;
box-shadow: none;
position: relative;
}

.gridFormat:nth-child(6n+1) {
border-right: none !important;
border-bottom: none !important;
}

.gridTimeSmall {
height: 25px;
background-color: #87CEEB;
color: #000000;
border-bottom: 1px solid #000000;
}

.gridFormat:not(.hasAppointment):not(.hasAppointmentNunzia) {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.gridHeader {
grid-column: 1 / -1;
font-size: 1.5em;
font-weight: bold;
color: #fff;
background-color: #1E90FF;
padding: 1em;
border-radius: 0.5em 0.5em 0 0;
border: 1px solid #000000;
}

.gridFooter {
grid-column: 1 / -1;
text-align: center;
padding: 1em;
background-color: #1E90FF;
color: #fff;
border-radius: 0 0 0.5em 0.5em;
border: 1px solid #000000;
font-weight: bold;
font-size: 1.2em;
}
.gridTime {
height: 50px;
background-color: #7FFFD4;
color: #000000;
border-bottom: 3px solid #808080 !important;
}

.gridTimeSmall {
height: 35px;
background-color: #e8f0ea;
color: #000000;
border-bottom: 1px solid #000000;
}

.gridFormat:nth-child(6n+1) {
border-left: 1px solid #000000;
}

.gridFormat:nth-child(6n) {
border-right: 1px solid #000000;
}

.hasAppointment {
border-left: 8px solid #1E90FF !important;
margin-left: -1px;
}

.hasAppointmentNunzia {
border-left: 8px solid #FF69B4 !important;
margin-left: -1px;
}
</style>
";
let content := ---
<aside class='gridContainer'>
<header class='gridFormat gridHeader'>{ format(dat, "dddd DoMoY") } - KW { weekNumber }
</header>
<aside class='gridFormat gridsmall'><strong>Uhrzeit</strong></aside>{ for e in empl do }
<aside class='gridFormat gridsmall'>
<div style="display: flex; align-items: center; justify-content: center;">{ text(e) }
</div>
</aside>{ end }{ for i in range(8, 19, 0.25) do }
<aside class='gridFormat { if floor(i) = i then "gridTime" else "gridTimeSmall" end }'
title='Uhrzeit: { format(time(i, 0), "HH:mm") }'>{ format(time(i, 0), "HH:mm") }
</aside>{ for j in range(0, 5) do let result := frisTab[isInside(Termin, time(i, 0)) and text(MA) = item(empl, j)];
}
<aside class='gridFormat { if cnt(result) > 0 then "gridHover " +
if result.MA < 3 then
"hasAppointment"
else
"hasAppointmentNunzia"
end end }'
onclick='ui.popupRecord("{ record(Termine,first(result)).Nr }")'
style='background: { if cnt(result) > 0 then if time(i, 0) = result.time(start(Termin)) then
switch true do
case result.MA < 3:
colorRosi
default:
colorNunzia
end
else
switch true do
case result.MA < 3:
"radial-gradient(#87CEEB 1px, #ADD8E6 1px) 0 0/5px 5px"
default:
"radial-gradient(#FF69B4 1px, #FFB6C1 1px) 0 0/5px 5px"
end
end else if dat = today() then "OldLace" else "Gainsboro" end end }'>{ if time(i, 0) = result.time(start(Termin)) then "<strong>" + first(result.Kunde) + "</strong> - " + first(result.work) else "" end }
</aside>{ end }{ end }
<footer class='gridFooter'>Haarstudio YourStyle</footer>
</aside>
---;
html(css + content)

 

[franco]

keiner eine Lösung ?

 

[Sempervivum]

Hallo @franco und willkommen im Forum!
Das Problem ist wahrscheinlich, dass sich hier keiner mit diesem Ninox auskennt, ich eingeschlossen.
Aber auch ohne groß Ahnung davon zu haben, scheinen die Hintergrundfarben durch diesen Code fest gelegt zu werden:

switch true do
   case result.MA < 3:
       colorRosi
   default:
       colorNunzia
   end
else
   switch true do
   case result.MA < 3:
       "radial-gradient(#87CEEB 1px, #ADD8E6 1px) 0 0/5px 5px"
   default:
       "radial-gradient(#FF69B4 1px, #FFB6C1 1px) 0 0/5px 5px"
   end

Versuche mal, das so zu erweitern:

switch true do
  case result.MA < 3:
    colorRosi
  case result.MA < 5:
    colorNunzia
  default:
    colorRosi
end
else
switch true do
  case result.MA < 3:
    "radial-gradient(#87CEEB 1px, #ADD8E6 1px) 0 0/5px 5px"
  case result.MA < 5:
    "radial-gradient(#FF69B4 1px, #FFB6C1 1px) 0 0/5px 5px"
  default:
    "radial-gradient(#87CEEB 1px, #ADD8E6 1px) 0 0/5px 5px"
end

 

[franco]

Manches ist so einfach....hat funktioniert

 

[franco]

Hab noch was das ich ändern möchte.Auch CASE Verhalten. Wenn ich aus einer Auswahl ( Dienstleistungsfeld) Urlaub auswähle,dann soll sich das Timeblock in Gelb färben.Im Moment ist es Magenta.Habe da den Code geschrieben aber es funktioniert nicht.

case result.MA + Dienstleistung = "Urlaub"

MA ist Auswahlfeld.


switch true do
case result.MA < 3:
colorRosi
case result.MA < 5:
colorNunzia
case result.MA + Dienstleistung = "Urlaub" < 6:
colorUrlaub
default:
colorSTD
end
else
switch true do
case result.MA < 3:
"radial-gradient(#87CEEB 1px, #ADD8E6 1px) 0 0/5px 5px"
case result.MA < 5:
"radial-gradient(#FF69B4 1px, #FFB6C1 1px) 0 0/5px 5px"
case result.MA + Dienstleistung = "Urlaub" < 6:
"radial-gradient(#87CEEB 1px, #87CEEB 1px) 0 0/5px 5px"
default:
colorSTD
end

 

[Sempervivum]

Da muss ich jetzt noch mehr raten als zuvor. Ich reime mir das so zusammen: Ist Urlaub ausgewählt, soll der Block gelb gefärbt werden, unabhängig um welchen Mitarbeiter es sich handelt, richtig?
Versuche es so:

switch true do
case result.Dienstleistung = "Urlaub":
colorUrlaub
case result.MA < 3:
colorRosi
case result.MA < 5:
colorNunzia
default:
colorSTD
end
else
switch true do
case result.Dienstleistung = "Urlaub":
"radial-gradient(#87CEEB 1px, #87CEEB 1px) 0 0/5px 5px"
case result.MA < 3:
"radial-gradient(#87CEEB 1px, #ADD8E6 1px) 0 0/5px 5px"
case result.MA < 5:
"radial-gradient(#FF69B4 1px, #FFB6C1 1px) 0 0/5px 5px"
default:
colorSTD
end

Unklar ist mir, wie man an den Wert der Auswahl heran kommt. Wie Du siehst, habe ich geraten result.Dienstleistung

 

[franco]

@Sempervivum
einfach Top geraten.....funktioniert.
Vielen Dank

 

[Sempervivum]

Das ist mehr als ich zu hoffen gewagt hatte.

 

[franco]

es funktioniert