From 1de1110ed61cbc53566418118d4369aaf51abf52 Mon Sep 17 00:00:00 2001 From: breitenbach76 Date: Sun, 7 Jun 2026 15:18:44 +0200 Subject: [PATCH] v13 --- 04_Tablet-Quiz/app/index.html | 64 ++++++++++++++++++++++++++++++----- 04_Tablet-Quiz/app/sw.js | 2 +- 2 files changed, 56 insertions(+), 10 deletions(-) diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html index 0a7c4fb..e36a58d 100644 --- a/04_Tablet-Quiz/app/index.html +++ b/04_Tablet-Quiz/app/index.html @@ -93,6 +93,21 @@ .gateReq.ok { background:#f1faf4; color:#177a44; border:1px solid #cde6d6; } .gateReq.bad { background:#fdf3f3; color:#b5202a; border:1px solid #f0c9c9; } .choice[disabled] { opacity:.45; cursor:default; } + /* Rollen-Glossar als Overlay von links (Header-Button đŸ‘„ Rollen) */ + #rollenList { + position: fixed; top:0; left:0; bottom:0; width: 330px; max-width: 88vw; + background: var(--panel); border-right:1px solid var(--line); padding: 14px; + overflow:auto; z-index: 30; + transform: translateX(-100%); transition: transform .22s ease; + box-shadow: 0 0 40px rgba(20,30,50,.18); + } + body.rollenOpen #rollenList { transform: translateX(0); } + body.rollenOpen .navBackdrop { opacity:1; pointer-events:auto; } + body:not(.runMode) #rollenList { display:none; } + body:not(.runMode) #rollenBtn { display:none; } + #rollenList h3 { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:14px 0 4px; } + .rolleItem { display:flex; align-items:center; gap:10px; padding:6px 4px; font-size:13px; } + .rolleItem .rDot { width:12px; height:12px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.18); } .navTop { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .navTop b { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); } .navTop button { border:none; background:none; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; } @@ -270,6 +285,7 @@
+ @@ -279,6 +295,7 @@
+
@@ -358,6 +375,16 @@ const ROLLEN = { testmanagement:"Testmanagement", architektur:"Architektur", lieferant:"Lieferant", operations_manager:"Betrieb (AL B&C / AL App)", dpm:"Demand Portfolio Manager" }; +// Rollen-Glossar fuer das Overlay: gruppiert/eingefaerbt nach den 6 Figuren-Kategorien +// (Farbe = Filamentfarbe der Figuren). Deckt alle ROLLEN-Eintraege ab. +const ROLLEN_GRUPPEN = [ + { label:"Governance (Entscheider)", color:"#c9a227", roles:["spm","service_owner","sor"] }, + { label:"Umfeld / Auftraggeber", color:"#7d2e3f", roles:["dpm"] }, + { label:"Management (operative FĂŒhrung)", color:"#2f80c9", roles:["projektleitung","operations_manager","al_basis_cloud","al_applikationen","support_manager","problem_manager"] }, + { label:"Operative / Fachexperten", color:"#6b7686", roles:["queue_koordinator","first_level_agent","second_level_agent","testmanagement","architektur"] }, + { label:"Externe", color:"#cfd6df", roles:["lieferant"] }, + { label:"Teams (Sonderfiguren)", color:"#2f9e57", roles:["betriebsteam","service_support_team","projektteam"] } +]; const PHASEN = { design:{label:"Design", color:"var(--design)"}, transition:{label:"Transition", color:"var(--transition)"}, @@ -1075,10 +1102,26 @@ function renderAkte(){ const c = $("#akteClose"); if(c) c.onclick = ()=> document.body.classList.remove("akteOpen"); } +/* ====================== RENDER: ROLLEN-GLOSSAR (Overlay) ====================== */ +function renderRollen(){ + let html = `
đŸ‘„ Rollen
`; + html += `
RACI-Rollen im Lebenszyklus · Farbe = Figuren-Kategorie
`; + for(const g of ROLLEN_GRUPPEN){ + html += `

${g.label}

`; + g.roles.forEach(r=>{ + if(!ROLLEN[r]) return; + html += `
${ROLLEN[r]}
`; + }); + } + html += `

Hinweis: Die SOR ist ein Gremium (SPM · Betrieb · Support-Manager · Service Owner 
), das am Gate-Puck zusammenkommt — keine Einzelfigur.

`; + $("#rollenList").innerHTML = html; + const c = $("#rollenClose"); if(c) c.onclick = ()=> document.body.classList.remove("rollenOpen"); +} + /* ====================== VIEW DISPATCH ====================== */ function draw(){ document.body.classList.toggle("runMode", S.view==="run"); - if(S.view!=="run"){ document.body.classList.remove("navOpen"); document.body.classList.remove("akteOpen"); } + if(S.view!=="run"){ document.body.classList.remove("navOpen","akteOpen","rollenOpen"); } renderCardBadge(); if(S.view==="deck") return renderDeck(); if(S.view==="classify") return renderClassify(); @@ -1286,6 +1329,7 @@ function raciLegendHtml(){ function renderRun(){ renderList(); renderAkte(); + renderRollen(); const st = cur(); const ph = PHASEN[st.phase]; const chip = st.typ==="gate" @@ -1319,13 +1363,13 @@ function activitySteps(st){ { label:"Diskussion", frage:`Diskutiert gemeinsam: Was fĂ€llt alles unter „${st.name}"? Was stellt ihr euch darunter vor? Nennt Beispiele.`, auf:`

${st.beschreibung}

Das fÀllt darunter

` }, - { label:"Beteiligte Rollen", - frage:`Welche Rollen sind an dieser AktivitÀt beteiligt? Stellt ihre Figuren auf die Mulden des Station-Pucks.`, - auf:`

Beteiligte Rollen

${st.raci.map(([r])=>`${roleLabel(r)}`).join("")}
` }, + { label:"Operative Rollen (R)", + frage:`Welche Rollen setzen diese AktivitĂ€t operativ um — wer sorgt fĂŒr die Umsetzung (Responsible)? Stellt deren Figuren auf die Mulden des Station-Pucks.`, + auf:`

Operativ verantwortlich (R)

${(st.raci.filter(([r,c])=>c==="R").map(([r])=>`${roleLabel(r)}`).join("")) || '— (keine eigene R-Rolle)'}

Das sind die „Macher" der AktivitĂ€t. Wer dafĂŒr geradesteht (A) sowie beratend (C) bzw. informiert (I) ist, klĂ€rt Schritt 3.

` }, { label:"RACI", - frage:`KlĂ€rt die RACI: Wer ist R, A, C, I? Sortiert die Figuren ins Aktiv-Feld (R·A·C·I).`, + frage:`ErgĂ€nzt nun die vollstĂ€ndige RACI: Wer ist Accountable (trĂ€gt die Verantwortung), wer Consulted, wer Informed — zusĂ€tzlich zu den Responsible aus Schritt 2? Sortiert die Figuren ins Aktiv-Feld (R·A·C·I).`, legend: raciLegendHtml(), - auf:`

RACI

${raciTable(st)}` }, + auf:`

RACI (vollstÀndig)

${raciTable(st)}` }, { label:"Artefakt", artefakt:true, frage:`Welches Artefakt entsteht hier und kommt in die Service-Akte?`, auf:`

Artefakt

${st.artefakt}

` } @@ -1544,9 +1588,11 @@ function renderEnd(){ /* ====================== INIT ====================== */ (function init(){ $("#resetBtn").onclick = ()=>{ if(confirm("Neue Action Card ziehen und Durchlauf zurĂŒcksetzen?")){ S=defaultState(); save(); draw(); } }; - $("#stationsBtn").onclick = ()=>{ document.body.classList.remove("akteOpen"); document.body.classList.toggle("navOpen"); }; - $("#akteBtn").onclick = ()=>{ document.body.classList.remove("navOpen"); document.body.classList.toggle("akteOpen"); }; - $("#navBackdrop").onclick = ()=>{ document.body.classList.remove("navOpen"); document.body.classList.remove("akteOpen"); }; + const closeOverlays = ()=> document.body.classList.remove("navOpen","akteOpen","rollenOpen"); + $("#stationsBtn").onclick = ()=>{ const o=document.body.classList.contains("navOpen"); closeOverlays(); if(!o) document.body.classList.add("navOpen"); }; + $("#akteBtn").onclick = ()=>{ const o=document.body.classList.contains("akteOpen"); closeOverlays(); if(!o) document.body.classList.add("akteOpen"); }; + $("#rollenBtn").onclick = ()=>{ const o=document.body.classList.contains("rollenOpen"); closeOverlays(); if(!o) document.body.classList.add("rollenOpen"); }; + $("#navBackdrop").onclick = closeOverlays; draw(); })(); diff --git a/04_Tablet-Quiz/app/sw.js b/04_Tablet-Quiz/app/sw.js index 8368c3b..868fee2 100644 --- a/04_Tablet-Quiz/app/sw.js +++ b/04_Tablet-Quiz/app/sw.js @@ -1,5 +1,5 @@ /* Service Worker — SLC-Workshop Companion (App-Shell, offline-first) */ -const CACHE = "slc-companion-v12"; +const CACHE = "slc-companion-v14"; const SHELL = ["./", "index.html", "manifest.webmanifest", "icon.svg"]; // Action-Card-Grafiken (cards/s-c.png) fuer Offline vorab cachen (alle 30). const CARDS = [];