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