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