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 <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: