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