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