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