ontwerp & bouw

App om de efficientie van KPN helpdesks live te monitoren: door doelen, verwachtingen en live verloop van callcenter activiteiten te vergelijken en te beoordelen. Ik doe de templating front-end, die wordt gekoppeld aan de back-end (Pyramid, Python)
Toon app template

Het leuke aan front-end TWIG templates maken met JSON koppelingen en jQuery, is dat je de complete scheiding tussen data en layout kan “recreëren” in je codeschetsen, zodat je kan zien in de code waar layout ophoudt en data begint

Je kunt javascript gebruiken in templates om de percentage-cirkels van kleur te laten veranderen. Als bijvoorbeeld de kleurcodes bepaald worden door de hoogte van het percentagegetal, dan hoef je die “status” niet persee server side naar de browser of app te sturen. De browser kan dat zelf regelen! Javascript wordt heel vaak gebruikt om “gedrag” te sturen in de browser van data dat opgehaald wordt. Geen wonder dat frameworks als
React zo populair aan het worden zijn voor het maken van apps in de browser.

Kijk naar de javascript code hiernaast hieronder. Hier staat letterlijk: is het percentage boven 95, maak de cirkels groen, is het percentage kleiner dan 90, maak de cirkels rood, is het percentage precies 90, maak ze geel!

Wil je meer flexibiliteit, en bijvoorbeeld de kleuren van de cirkels server-side naar de applicatie sturen, dan kan dat natuurlijk ook! In plaats van javascript (client side) kun je de layout manipuleren door CSS classes mee te zenden als variabelen in JSON textbestanden!

Kijk maar naar de JSON hiernaast hieronder. Neem bijvoorbeeld de variabele "status" die staat op "groen" Die veranderd/voegt de CSS class “groen” toe aan de percentage cirkel!

Of, een leuke twist: een CSS class meegeven aan een dagdeel/tijddeel dat momenteel actief is, zodat die gaat knipperen of -in en uit-faden! (class targetten met jQuery fade in en out)

  
"actief" : "momenteel"