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