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