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