1<?php 2if (!defined('DOKU_INC')) die(); 3 4class syntax_plugin_fho extends DokuWiki_Syntax_Plugin { 5 6 public function getType() { 7 return 'substition'; 8 } 9 10 public function getPType() { 11 return 'block'; 12 } 13 14 public function getSort() { 15 return 10; 16 } 17 18 public function connectTo($mode) { 19 $this->Lexer->addSpecialPattern('{{fho}}', $mode, 'plugin_fho'); 20 } 21 22 public function handle($match, $state, $pos, Doku_Handler $handler) { 23 return array(); 24 } 25 26 public function render($mode, Doku_Renderer $renderer, $data) { 27 if ($mode === 'xhtml') { 28 // Hier fügen wir sicherheitshalber das CSS direkt hinzu 29 $renderer->doc .= '<style> 30 table.status-table { 31 width: 100%; 32 max-width: 100%; 33 border-collapse: collapse; 34 border-radius: 8px; 35 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 36 margin-bottom: 20px; 37 overflow: auto; 38 display: block; 39 } 40 table.status-table th, table.status-table td { 41 padding: 10px; 42 border: 1px solid #ddd; 43 text-align: center; 44 white-space: nowrap; 45 } 46 table.status-table th { 47 background-color: #f5f5f5; 48 font-weight: bold; 49 } 50 table.status-table td { 51 background-color: #fff; 52 transition: background-color 0.3s ease; 53 } 54 table.status-table td:hover { 55 background-color: #eaeaea; 56 } 57 .legend { 58 display: flex; 59 gap: 15px; 60 margin-top: 15px; 61 } 62 .legend span { 63 display: inline-block; 64 width: 20px; 65 height: 20px; 66 border-radius: 3px; 67 cursor: pointer; 68 } 69 .legend-blue { background-color: blue; } 70 .legend-green { background-color: green; } 71 .legend-yellow { background-color: yellow; } 72 .legend-red { background-color: red; } 73 .legend-delete { 74 background-color: #fff; 75 border: 1px solid black; 76 } 77 button#save-button { 78 margin-top: 10px; 79 padding: 10px 15px; 80 background-color: #007bff; 81 color: #fff; 82 border: none; 83 border-radius: 5px; 84 cursor: pointer; 85 transition: background-color 0.3s ease, transform 0.2s ease; 86 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 87 } 88 button#save-button:hover { 89 background-color: #0056b3; 90 transform: scale(1.05); 91 } 92 </style>'; 93 94 // Dann die HTML-Tabelle 95 $renderer->doc .= '<div id="statusanzeige">'; 96 $renderer->doc .= $this->generateTable(); 97 $renderer->doc .= '<button id="save-button">Speichern</button>'; 98 $renderer->doc .= '<button id="load-button" style="display:none;">Laden</button>'; 99 $renderer->doc .= '</div>'; 100 } 101 return true; 102} 103 104 private function generateTable() { 105 $employees = $GLOBALS['EMPLOYEE_LIST']; 106 $html = '<table class="status-table">'; 107 $html .= '<thead><tr><th>Name</th>'; 108 109 for ($i = 6; $i <= 22; $i++) { 110 $html .= "<th>$i:00</th><th>$i:15</th><th>$i:30</th><th>$i:45</th>"; 111 } 112 113 $html .= '</tr></thead><tbody>'; 114 foreach ($employees as $employee) { 115 $html .= "<tr><td>$employee</td>"; 116 for ($i = 6; $i <= 22; $i++) { 117 for ($j = 0; $j < 4; $j++) { 118 $html .= '<td class="status-cell" data-status=""></td>'; // Zellen mit data-status 119 } 120 } 121 $html .= '</tr>'; 122 } 123 124 $html .= '</tbody></table>'; 125 126 // Farbcode-Legende hinzufügen 127 $html .= '<div class="legend">'; 128 $html .= '<p><span class="legend-blue" style="background-color: blue; border: 1px solid black; display: inline-block; width: 20px; height: 20px;"></span> Anwesend in Präsenz</p>'; 129 $html .= '<p><span class="legend-green" style="background-color: green; border: 1px solid black; display: inline-block; width: 20px; height: 20px;"></span> Im mobilen Homeoffice erreichbar und aktiv</p>'; 130 $html .= '<p><span class="legend-yellow" style="background-color: yellow; border: 1px solid black; display: inline-block; width: 20px; height: 20px;"></span> Tel. erreichbar aber inaktiv (keinen umgehenden Zugriff auf Arbeitsumgebung (z.B. Einkaufen, Werkstatt, Kinder, Eltern etc.)) </p>'; 131 $html .= '<p><span class="legend-red" style="background-color: red; border: 1px solid black; display: inline-block; width: 20px; height: 20px;"></span> Im mobilen Homeoffice nicht erreichbar und inaktiv (Pause oder Unterbrechung)</p>'; 132 $html .= '<p><span class="legend-delete" style="background-color: #fff; border: 1px solid black; display: inline-block; width: 20px; height: 20px; cursor:pointer;"></span> Farbe löschen</p>'; 133 $html .= '</div>'; 134 135 return $html; 136 } 137} 138?> 139