Revert "Ensure properly encoded popup title", fix PHP instead
[infodrom.org/service.infodrom.org] / src / Infodrom / calendar / index.wml
1 #include <infodrom.style>
2
3 <future>
4 <page func="Infodrom Oldenburg" title="Termine">
5 <script type="text/javascript" src="<root_prefix>jquery.editable.js"></script>
6
7 <style type="text/css">
8 @media only screen and (max-device-width: 400px) {
9     div.view {
10         margin-left: 100px;
11     }
12 }
13
14 @media only screen and (max-device-width: 980px) {
15      button {
16         width: 3em;
17     }
18 }
19
20 div.view {
21     float:right;
22     margin-top:-30px;
23 }
24 div.clear {
25     clear: both;
26     margin-bottom: 3px;
27 }
28 table#calendar tr.row:hover {
29     background: yellow;
30 }
31 table#calendar tr.newkw td {
32     border-top: 1px solid #999;
33 }
34 table#calendar tr.month {
35     background: #a7efff;
36 }
37 table#calendar tr.current {
38     background: orange;
39 }
40 div.bimonth div.monthcolumn {
41     float: left;
42     width: 50%;
43 }
44 div.onemonth div.monthcolumn {
45     float: left;
46     width: 100%;
47 }
48 div.head {
49     font-weight: bold;
50     border-bottom: 1px solid #ccc;
51     text-align: center;
52 }
53 div.day {
54     position: relative;
55     border-bottom: 1px solid #ccc;
56 }
57 div.sunday {
58     border-bottom: 1px solid black;
59 }
60 div.today {
61     background: #90ee90;
62 }
63 div div.wday {
64     width: 1.6em;
65     margin-right: 2px;
66     float: left;
67 }
68 div div.date {
69     width: 1.6em;
70     margin-right: 2px;
71     float: left;
72 }
73 div.kw {
74     position: absolute;
75     top: 0px;
76     right: 1px;
77     color: #999;
78 }
79 div.month table thead td.title {
80   background: #b0e2ff;
81 }
82 div.month table tbody td {
83     height: 100px;
84     vertical-align: top;
85     position: relative;
86 }
87 div.month table tbody td.empty {
88     background: #ddd;
89 }
90 div.month table tbody td span {
91     font-size: 90%;
92 }
93
94 div#termine span {
95     padding-left: 1px;
96     padding-right: 1px;
97 }
98
99 span.menu_title {
100     padding-left: 2px;
101     padding-right: 2px;
102     background: #e0e0e0;
103     font-weight: bold;
104     border-bottom: 1px solid #8f8f8f;
105     display: block;
106 }
107 div.menu {
108     background: #fffb71;
109     position: absolute;
110     border: 1px solid #8f8f8f;
111     z-index: 10;
112 }
113 span.menu {
114     padding-left: 2px;
115     padding-right: 2px;
116     display: block;
117     cursor: default;
118 }
119 span.menu:hover {
120     background: #96ccff;
121 }
122
123 div.popup_body div#log div.caltitle {
124     border-top: 0px !important;
125 }
126 div.logl {
127     float: left;
128     width: 120px;
129 }
130 div.logr {
131     float: left;
132 }
133 div.popup_body div#log div.row0,
134 div.popup_body div#log div.row1 {
135     margin: 0;
136     padding: 0;
137     font-size: 90%;
138     border-top: 1px solid #ccc;
139 }
140 div.popup_body div#log div.row0
141 {
142     background: #eee;
143 }
144 </style>
145
146 <?php
147   $textbrowser = strpos($_SERVER['HTTP_USER_AGENT'], 'Lynx/') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'w3m/') !== false;
148 ?>
149
150 <input type="hidden" id="thismonth">
151 <div id="termine">
152 <?php
153   if ($textbrowser || (isset($_GET['month']) && $_GET['month'] == 'normal')) {
154 ?>
155 <table id="calendar" width="100%" class="smallfont border" cellspacing="0" summary="">
156 <tr class="head">
157 <th width="5%">KW</th>
158 <th width="20%">Datum</th>
159 <th width="55%">Beschreibung</th>
160 <th width="20%">Location</th>
161 </tr>
162
163 <?php
164   setlocale('LC_TIME', 'de_DE');
165   $now = date('Y-m-d H:i:s');
166   $pivot = date('Y-m-d H:i:s', time()+(7*24*60*60));
167
168   $item = new Calendar();
169   $month = '';
170
171   if (empty($_GET['year'])) {
172     $from = time();
173     $to = false;
174   } else {
175     $from = mktime(0,0,0,1,1,intval($_GET['year']));
176     $to = mktime(0,0,0,1,1,intval($_GET['year'])+1) - 1;
177   }
178   $kw = '';
179   foreach ($item->getItems($from, $to) as $row) {
180     $start = new DateTime($row->dtstart);
181     $newmonth = $start->format('F Y');
182     if ($month != $newmonth) {
183       $month = $newmonth;
184       if ($textbrowser)
185           printf('<tr><td colspan="4">&nbsp;</td></tr>');
186       printf('<tr class="month" month="%s"><td colspan="4">%s</td></tr>',
187              $start->format('Y-m'), $month);
188       $kw = '';
189     }
190
191     $tooltip = '';
192     if (strlen($row->description))
193       $tooltip = sprintf(' title="%s"', htmlspecialchars($row->description));
194
195     $class = 'row';
196     if ($row->dtstart >= $now && $row->dtstart < $pivot)
197       $class .= ' current';
198     if (strlen($kw) && $kw != $row->kw)
199       $class .= ' newkw';
200       
201     $item = new Calendar_Item($row->dav_id);
202     printf('<tr id="%d" class="%s"><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>',
203            $row->dav_id,
204            $class,
205            $kw != $row->kw ? $row->kw : '&nbsp;',
206            Calendar::formatTimespan($row->dtstart, $row->dtend),
207            utf8_decode($item->toSpan()),
208            utf8_decode($row->location));
209     $kw = $row->kw;
210   }
211
212 ?>
213
214 </table>
215 <?php
216   } // $textbrowser || month == 'monat'
217 ?>
218 </div>
219 <div class="clear"></div>
220
221 <div id="menu" class="menu" style="display:none;">
222 <span class="menu_title" onmouseup="\$(this).parent().hide()">Titel</span>
223 <span class="menu" onmouseup="add_comment()">Comment</span>
224 <span class="menu" onmouseup="show_log()">Protocol</span>
225 <span class="menu" onmouseup="colorise()">Color</span>
226 <span class="menu" onmouseup="menu_close()">close</span>
227 </div>
228
229 <select name="colorpicker" style="display:none;">
230   <option value="#5484ed">Bold blue</option>
231   <option value="#a4bdfc">Blue</option>
232   <option value="#63b8ff">Steel blue</option>
233   <option value="#87ceeb">Sky blue</option>
234   <option value="#46d6db">Turquoise</option>
235   <option value="#7ae7bf">Light green</option>
236   <option value="#c0ff3e">Olive</option>
237   <option value="#7bd148">Green</option>
238   <option value="#51b749">Bold green</option>
239   <option value="#ffff00">Yellow</option>
240   <option value="#fbd75b">Yellow</option>
241   <option value="#ffb878">Orange</option>
242   <option value="#f4a460">Sandy brown</option>
243   <option value="#ff6a6a">IndianRed</option>
244   <option value="#ffa500">Orange</option>
245   <option value="#ff8247">Sienna</option>
246   <option value="#ff887c">Red</option>
247   <option value="#dc2127">Bold red</option>
248   <option value="#ff7f00">Dark orange</option>
249   <option value="#ee82ee">Violett</option>
250   <option value="#dbadff">Purple</option>
251   <option value="#ff00ff">Magenta</option>
252   <option value="#d4d4d4">Gray</option>
253   <option value="#e1e1e1">Gray</option>
254   <option value="#ededed">Light gray</option>
255 </select>
256
257 <protect><script type="text/javascript">
258 function menu_close()
259 {
260     $('div#menu').hide();
261 }
262
263 function dom_enhance()
264 {
265     var html = ['<div class="view">',
266                 '<button id="prev" style="display:none;"><img src="'+site_url('pix/left.png')+'" /></button>',
267                 '&nbsp;&nbsp;',
268                 '<button id="sync" style="display:none;"><img src="'+site_url('pix/sync.png')+'" /></button>',
269                 '&nbsp;&nbsp;',
270                 '<button id="next" style="display:none;"><img src="'+site_url('pix/right.png')+'" /></button>',
271                 '&nbsp;&nbsp;',
272                 '<select id="month" style="display:none;">',
273                 '<option value="">jetzt</option>',
274                 '</select>',
275                 '&nbsp;&nbsp;',
276                 '<select id="view">',
277                 '<option value="normal">Normal</option>',
278                 '<option value="bimonth">2 Monate</option>',
279                 '<option value="onemonth">1 Monat</option>',
280                 '<option value="month">Monat</option>',
281                 '</select>',
282                 '</div>'];
283
284     $(html.join('')).insertAfter('h3');
285     $.invoke('Calendar/Months');
286 }
287
288 var logwindow = false;
289 function show_log()
290 {
291     menu_close()
292
293     if (!logwindow) {
294         logwindow = new Popup('Protocol', '460px', false, '<div id="log"></div>');
295         logwindow.centerPopup();
296     } else {
297         logwindow.openPopup();
298     }
299
300     $.invoke('Calendar_Item/Log', {id: $('div#menu').attr('dav_id')}, function(data){
301         if (!is_mobile())
302             make_editable('div#log div.editable');
303     });
304 }
305
306 var commentwindow = false;
307 function add_comment()
308 {
309     menu_close()
310
311     if (!commentwindow) {
312         var html = ['<form id="comment">',
313                     '<input type="hidden" name="id">',
314                     '<label for="name">Name</label>',
315                     '<input name="name" style="width: 296px;">',
316                     '<label for="url">Link</label>',
317                     '<input name="url" style="width: 296px;">',
318                     '<label for="comment">Bemerkung</label>',
319                     '<textarea name="comment" style="width: 296px; height:65px;"></textarea>',
320                     '<div style="text-align: center; margin-top: 5px;"><input type="submit" value="Speichern"></div>',
321                     '</form>'];
322         commentwindow = new Popup('Bemerkung hinzuf├╝gen', '300px', false, html.join(''));
323         commentwindow.centerPopup();
324         $('form#comment input[type="submit"]').click(function(e){
325             $.invoke('Calendar_Item/AddLog', $('form#comment').serialize(), function(data){
326                 commentwindow.closePopup();
327             });
328             return false;
329         });
330     } else {
331         commentwindow.openPopup();
332     }
333     $('form#comment input,form#comment textarea').not('form#comment input[type="submit"]').val('');
334     $('form#comment input[name="id"]').val($('div#menu').attr('dav_id'));
335     $('form#comment input[name="name"]').focus();
336 }
337
338 var incolorise = false;
339 function colorise()
340 {
341     menu_close()
342
343     $('select[name="colorpicker"]').simplecolorpicker({
344         picker: false
345     }).change(function(e) {
346         if (incolorise) return;
347         incolorise = true;
348
349         var color = $('select[name="colorpicker"]').val();
350         var id = $('div#menu').attr('dav_id');
351
352         $('span[dav_id="'+id+'"]').css('background-color', color);
353
354         $.invoke('Calendar_Item/SetColor', {id: id, color: color}, function(data){
355             incolorise = false;
356         });
357
358         $('select[name="colorpicker"]').simplecolorpicker('destroy');
359         $('select[name="colorpicker"]').hide();
360     });
361 }
362
363 function month_actions(data)
364 {
365     $('#termine span').contextmenu(function(e){
366         $('select[name="colorpicker"]').simplecolorpicker('destroy');
367         $('select[name="colorpicker"]').hide();
368         $('div#menu').attr('dav_id', $(this).attr('dav_id'));
369         $('div#menu').positionOn($(this), 'center').show();
370         return false;
371     });
372     $('#termine span').click(function(e){
373         $('div#menu').attr('dav_id', $(this).attr('dav_id'));
374         show_log();
375     });
376
377     $('select#month').val($('#thismonth').val());
378 }
379
380 $(function(){
381     dom_enhance();
382     month_actions();
383     $('#view').val('normal').change(function(e){
384         if ($('#view').val() == 'normal') {
385             document.location.href = document.location.href.split('?')[0] + '?month=normal';
386         } else if ($('#view').val() == 'bimonth') {
387             $('#month,div.view button').show();
388             $.invoke('Calendar/BiMonth', {month: $('#thismonth').val()}, month_actions);
389         } else if ($('#view').val() == 'onemonth') {
390             $('#month,div.view button').show();
391             $.invoke('Calendar/OneMonth', {month: $('#thismonth').val()}, month_actions);
392         } else if ($('#view').val() == 'month') {
393             $('#month,div.view button').show();
394             $.invoke('Calendar/Month', {month: $('#thismonth').val()}, month_actions);
395         }
396     });
397     $('#month').change(function(e){
398         if ($('#view').val() == 'bimonth') {
399             $.invoke('Calendar/BiMonth', {month: $('#month').val()}, month_actions);
400         } else if ($('#view').val() == 'month') {
401             $.invoke('Calendar/Month', {month: $('#month').val()}, month_actions);
402         }
403
404     });
405     $('div.view button').click(function(e){
406         var direction = null
407         if ($(this).attr('id') != 'sync')
408             direction = $(this).attr('id') == 'prev' ? 'prev' : 'next';
409         if ($('#view').val() == 'bimonth') {
410             $.invoke('Calendar/BiMonth',
411                      {month: $('#thismonth').val(),
412                       direction: direction}, month_actions);
413         } else if ($('#view').val() == 'onemonth') {
414             $.invoke('Calendar/OneMonth',
415                      {month: $('#thismonth').val(),
416                       direction: direction}, month_actions);
417         } else if ($('#view').val() == 'month') {
418             $.invoke('Calendar/Month',
419                      {month: $('#thismonth').val(),
420                       direction: direction}, month_actions);
421         }
422     });
423     if (document.location.href.indexOf('month=normal') == -1) {
424         if (is_mobile()) {
425             $('<meta name="viewport" content="width=device-width, initial-scale=0.75" />').insertAfter('title');
426             $('#view').val('onemonth');
427             $.invoke('Calendar/OneMonth', {month: '<?=date('Y-m')?>'}, month_actions);
428             $('select#view').hide();
429         } else {
430             $('#view').val('bimonth');
431             $.invoke('Calendar/BiMonth', {month: '<?=date('Y-m')?>'}, month_actions);
432         }
433     }
434     $('#month,div.view button').show();
435 });
436 </script></protect>
437 </page>
438
439 # Local variables:
440 # mode: text
441 # mode: auto-fill
442 # mode: iso-accents
443 # end: