Better schedule window.

www/.htaccess

@@ -29,6 +29,9 @@ RewriteRule ^blog/([0-9]+)$ /blog/index.php?o=$1 [NC]
 RewriteRule ^blog/([0-9]+)/$ /blog/index.php?o=$1 [NC]
 
 RewriteRule ^lablanca/([0-9]+)$ /lablanca/index.php?year=$1 [NC]
+RewriteRule ^lablanca/programa[\/]?$ /lablanca/programa.php?gm=1 [NC]
+RewriteRule ^lablanca/programa/([A-Za-z]+)[\/]?$ /lablanca/programa.php?gm=$1 [NC]
+RewriteRule ^lablanca/programa/([A-Za-z]+)/([0-9]+)[\/]?$ /lablanca/programa.php?gm=$1&year=$2 [NC]
 
 RewriteRule ^archivo/([A-Z\-a-z0-9]{3,}+)$ /archivo/index.php?file=$1 [NC]
 RewriteRule ^archivo/([A-Z\-a-z0-9]{3,}+)/$ /archivo/index.php?file=$1 [NC]

www/css/lablanca.css

@@ -21,11 +21,11 @@ div#content_table div.content_tr div.content_td{
 }
 
 div#content_table div.content_tr div#content_td_schedule{
-    width:        60%;
+    width:        50%;
 }
 
 div#content_table div.content_tr div#content_td_prices{
-    width:        40%;
+    width:        50%;
 }
 
 div#content_table div.content_tr div#content_td_prices div#prices{
@@ -72,11 +72,22 @@ div#festivals_image_top_container div#festivals_image_container img#festivals_im
     max-height:        20em;
 }
 
+/* programa.php */
 div#schedule{
-    display:        inline-block;
-    vertical-align:    top;
-    margin-top:        2em;
-    margin-right:    1em;
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 2em;
+    margin-right: 1em;
+    text-align: center
+    width: 100%;
+}
+
+div#schedule div.button{
+    margin: 1em 0.5em 1em 0.5em;
+    padding: 0.5em;
+    display: inline-block;
+    vertical-align: top;
+    width: 40%;
 }
 
 div.day_title h4{
@@ -152,6 +163,28 @@ table.schedule div.location span.address{
     font-style:    italic;
 }
 
+div#map_container{
+    display: none;
+    opacity: 0;
+    position: fixed;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    width: 100%;
+    height: 100%;
+    background-color: #33333333;    
+}
+
+div#map_container div#map{
+   background-color: #ffffff;
+   width: 70%;
+   height: 50%;
+   margin: 15% 15% 25% 15%;
+}
+
+
+/* fiestas.php */
 div#prices{
     display:        inline-block;
     vertical-align:    top;

www/css/ui.css

@@ -374,14 +374,28 @@ div#cookie_popup{
     transition:                    bottom .5s ease-in-out;
 }
 
+div.button{
+    border: 0.2em solid #133442;
+    border-radius: 0.2em;
+    background-color: #124567;
+    text-align: center;
+}
+
+div.button a{
+    padding: 0.2em;
+    color: #dddddd;
+    font-weight: bold;
+    font-size: 100%;
+}
+
 span.button a{
-    font-weight:    bold;
-    font-size:        100%;
-    border:            0.2em solid #133442;
-    border-radius:    0.2em;
-    padding:        0.2em;
-    color:            #dddddd;
-	background-color:    #124567;
+    font-weight: bold;
+    font-size: 100%;
+    border: 0.2em solid #133442;
+    border-radius: 0.2em;
+    padding: 0.2em;
+    color: #dddddd;
+    background-color: #124567;
 }
 
 span#button_ok a{

www/lablanca/fiestas.php

@@ -18,78 +18,15 @@
     <div class='content_tr'>
         <div class='content_td' id='content_td_schedule'>
             <div class='section' id='schedule'>
-                <h3 class='section_title'><?=$lng['lablanca_schedule']?></h3>
-<?php
-                $q_days = mysqli_query($con, "SELECT DISTINCT date(DATE_SUB(start, INTERVAL 6 HOUR)) AS date, DATE_FORMAT(DATE_SUB(start, INTERVAL 6 HOUR), '%Y-%m-%d') AS isodate, (SELECT name_$lang from festival_day WHERE date = date(DATE_SUB(start, INTERVAL 6 HOUR))) AS name FROM festival_event WHERE year(start) = 2017 AND gm = 1 ORDER BY date");
-                $i=0;
-                while ($r_days = mysqli_fetch_array($q_days)){
-?>
-                    <div class='entry'>
-                        <div onClick='expandDay(<?=$i?>);' class='day_title pointer'>
-                            <h4>
-                                <img class='slid' src='<?=$server?>/img/misc/slid-right.png' id='slid_day_<?=$i?>'/>
-<?php
-                                if($r_days['name'] != null){
-?>
-                                    <?=formatFestivalDate($r_days['date'])?> - <?=$r_days['name']?>
-<?php
-                                }
-                                else{
-?>
-                                    <?=formatFestivalDate($r_days['date'])?>
-<?php
-                                }
-?>
-                            </h4>
-                        </div>
-                        <div class='day_schedule' id='day_schedule_<?=$i?>'>
-<?php
-                            $q_sch = mysqli_query($con, "SELECT festival_event.id AS id, gm, title_$lang AS title, description_$lang AS description, host, place, date_format(start, '%H:%i') AS st, date_format(end, '%H:%i') AS end, place.name_$lang AS place, address_$lang AS address, lat, lon FROM festival_event, place WHERE place.id = festival_event.place AND gm = 1 AND date(DATE_SUB(start, INTERVAL 6 HOUR)) = str_to_date('$r_days[date]', '%Y-%m-%d') ORDER BY start");
-                            if (mysqli_num_rows($q_sch) > 0){
-                                echo("<table class='schedule'>\n");
-                                while ($r_sch = mysqli_fetch_array($q_sch)){
-?>
-                                    <tr>
-                                        <td>
-                                            <span class='time'><?=$r_sch['st']?></span>
-                                        </td>
-                                        <td class='timeline'>
-                                            <img class='timeline_dot' alt=' ' src='<?=$server?>/img/misc/schedule-point.png'/>
-                                        </td>
-                                        <td>
-                                            <span class='title'><?=$r_sch['title']?></span>
-<?php
-                                            if (strlen($r_sch["description"]) > 0 && $r_sch["description"] != $r_sch["title"]){
-                                                echo("<br/><div class='description'>$r_sch[description]</div>\n");
-                                            }
-?>
-                                            <div class='location'>
-                                                <a target='_blank' href='http://maps.google.com/maps?q=<?=$r_sch['lat']?>,<?=$r_sch['lon']?>+(My+Point)&z=14&ll=<?=$r_sch['lat']?>,<?=$r_sch['lon']?>'>
-                                                    <img alt=' ' src='<?=$server?>/img/misc/pinpoint.png'/>
-<?php
-                                                    //If name and address are the same, show only name
-                                                    if ($r_sch['place'] == $r_sch['address']){
-                                                        echo("$r_sch[place]\n");
-                                                    }
-                                                    else{
-                                                        echo("$r_sch[place] <span class='address'>- $r_sch[address]</span>\n");
-                                                    }
-?>
-                                                </a>
-                                            </div>
-                                        </td>
-                                    </tr>
-<?php
-                                }
-                                echo "</table>\n";
-                            }
-?>
-                        </div>
+                <h3 class='section_title'><?=$lng['lablanca_schedules']?></h3>
+                <div class='entry'>
+                    <div class='button'>
+                        <a href='<?=$server?>/lablanca/programa/margolariak/<?=$year?>'><?=str_replace('#', $year, $lng["lablanca_schedule_year_gm"])?></a>
                     </div>
-<?php
-                    $i ++;
-                } // while ($r_days = mysqli_fetch_array($q_days))
-?>
+                    <div class='button'>
+                        <a href='<?=$server?>/lablanca/programa/ciudad/<?=$year?>'><?=str_replace('#', $year, $lng["lablanca_schedule_year_city"])?></a>
+                    </div>
+                </div> <!-- .entry -->
             </div>
         </div>
         <div class='content_td' id='content_td_prices'>

www/lablanca/programa.php

@@ -6,13 +6,26 @@
     $http_host = $_SERVER['HTTP_HOST'];
     $server = "$proto" . "$http_host";
     $gm = $_GET["gm"];
-    $year = $_GET["y"];
-    
-    if ($gm == 1){
-        $schi = "gm";
+
+    if (isset($_GET["y"]) && intval($_GET["y"]) > 2013 && intval($_GET["y"]) <= date("Y")){
+        $year = $_GET["y"];
     }
     else{
+        $year = date("Y");
+    }
+
+    if ($gm == 1 || $gm == "margolari" || $gm == "margolariak"){
+        $gm = 1;
+        $schi = "gm";
+        $url = "margolariak";
+    }
+    elseif ($gm == 0 || $gm == "municipal" || $gm == "ciudad"){
+        $gm = 0;
         $schi = "city";
+        $url = "municipal";
+    }
+    else{
+        header("Location: $server/lablanca/programa/margolariak/$year");
     }
 
     //Language
@@ -21,19 +34,6 @@
 
     $cur_section = $lng['section_lablanca'];
 
-
-    //Get year
-    $year = $_GET["y"];
-    if (strlen($year) < 1){
-        $year = date("Y");
-        //if (is_int($_GET['year']) == false){
-        if ($_GET['year'] != ''){
-            $q_year = mysqli_query($con, "SELECT id FROM festival WHERE year = " . mysqli_real_escape_string($con, $_GET['year']));
-            if (mysqli_num_rows($q_year) > 0){
-                $year = $_GET['year'];
-            }
-        }
-
 ?>
 <!DOCTYPE html>
 <html>
@@ -42,7 +42,7 @@
         <meta charset="utf-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
         <title>
-            <?=str_replace('#', $year, $lng["lablanca_schedule_" . $schi])?> - Gasteizko Margolariak
+            <?=str_replace('#', $year, $lng["lablanca_schedule_year_" . $schi])?> - Gasteizko Margolariak
         </title>
         <link rel="shortcut icon" href="<?=$server?>/img/logo/favicon.ico">
         <!-- CSS files -->
@@ -67,29 +67,29 @@
 ?>
         </script>
         <!-- Meta tags -->
-        <link rel="canonical" href="<?=$server?>/lablanca/"/>
+        <link rel="canonical" href="<?=$server?>/lablanca/programa/<?=$url?>/<?=$year?>"/>
         <link rel="author" href="<?=$server?>"/>
         <link rel="publisher" href="<?=$server?>"/>
-        <meta name="description" content="<?=str_replace('#', $year, $lng["lablanca_schedule_" . $schi . "_description"])?>"/>
-        <meta property="og:title" content="<?=str_replace('#', $year, $lng["lablanca_schedule_" . $schi])?> - Gasteizko Margolariak"/>
-        <meta property="og:url" content="<?php echo "$proto$http_host"; ?>"/>
-        <meta property="og:description" content="<?=str_replace('#', $year, $lng["lablanca_schedule_" . $schi . "_description"])?>"/>
+        <meta name="description" content="<?=str_replace('#', $year, $lng["lablanca_schedule_year_" . $schi . "_description"])?>"/>
+        <meta property="og:title" content="<?=str_replace('#', $year, $lng["lablanca_schedule_year_" . $schi])?> - Gasteizko Margolariak"/>
+        <meta property="og:url" content="<?=$server?>/lablanca/programa/<?=$url?>/<?=$year?>"/>
+        <meta property="og:description" content="<?=str_replace('#', $year, $lng["lablanca_schedule_year_" . $schi . "_description"])?>"/>
         <meta property="og:image" content="<?=$server?>/img/logo/logo.png"/>
         <meta property="og:site_name" content="Gasteizko Margolariak"/>
         <meta property="og:type" content="website"/>
         <meta property="og:locale" content="<?=$lang?>"/>
         <meta name="twitter:card" content="summary"/>
-        <meta name="twitter:title" content="<?=str_replace('#', $year, $lng["lablanca_schedule_" . $schi])?> - Gasteizko Margolariak"/>
-        <meta name="twitter:description" content="<?=str_replace('#', $year, $lng["lablanca_schedule_" . $schi . "_description"])?>"/>
+        <meta name="twitter:title" content="<?=str_replace('#', $year, $lng["lablanca_schedule_year_" . $schi])?> - Gasteizko Margolariak"/>
+        <meta name="twitter:description" content="<?=str_replace('#', $year, $lng["lablanca_schedule_year_" . $schi . "_description"])?>"/>
         <meta name="twitter:image" content="<?=$server?>/img/logo/logo.png"/>
-        <meta name="twitter:url" content="<?php echo"$proto$http_host"; ?>"/>
+        <meta name="twitter:url" content="<?=$server?>/lablanca/programa/<?=$url?>/<?=$year?>"/>
         <meta name="robots" content="index follow"/>
     </head>
     <body>
         <?php include("../header.php"); ?>
         <div id="content">
             <div class='section' id='schedule'>
-                <h3 class='section_title'><?=str_replace('#', $year, $lng["lablanca_schedule_" . $schi])?></h3>
+                <h3 class='section_title'><?=str_replace('#', $year, $lng["lablanca_schedule_year_" . $schi])?></h3>
 <?php
                 $q_days = mysqli_query($con, "SELECT DISTINCT date(DATE_SUB(start, INTERVAL 6 HOUR)) AS date, DATE_FORMAT(DATE_SUB(start, INTERVAL 6 HOUR), '%Y-%m-%d') AS isodate, (SELECT name_$lang FROM festival_day WHERE date = date(DATE_SUB(start, INTERVAL 6 HOUR))) AS name FROM festival_event_$schi WHERE year(start) = 2017 ORDER BY date");
                 $i=0;
@@ -100,7 +100,7 @@
                             <h4>
                                 <img class='slid' src='<?=$server?>/img/misc/slid-right.png' id='slid_day_<?=$i?>'/>
 <?php
-                                if($r_days['name'] != null){
+                                if($gm == 1 && $r_days['name'] != null){
 ?>
                                     <?=formatFestivalDate($r_days['date'])?> - <?=$r_days['name']?>
 <?php
@@ -138,7 +138,9 @@
                                             }
 ?>
                                             <div class='location'>
-                                                <a target='_blank' href='http://maps.google.com/maps?q=<?=$r_sch['lat']?>,<?=$r_sch['lon']?>+(My+Point)&z=14&ll=<?=$r_sch['lat']?>,<?=$r_sch['lon']?>'>
+                                                <!--<a target='_blank' href='http://maps.google.com/maps?q=<?=$r_sch['lat']?>,<?=$r_sch['lon']?>+(My+Point)&z=14&ll=<?=$r_sch['lat']?>,<?=$r_sch['lon']?>'>-->
+                                                <!-- TODO Routes -->
+                                                <span class='fake_a pointer' onClick='showMapPoint(<?=$r_sch['lat']?>,<?=$r_sch['lon']?>);'>
                                                     <img alt=' ' src='<?=$server?>/img/misc/pinpoint.png'/>
 <?php
                                                     //If name and address are the same, show only name
@@ -154,7 +156,7 @@
 <?php
                                                     }
 ?>
-                                                </a>
+                                                </span>
                                             </div>
                                         </td>
                                     </tr>
@@ -172,7 +174,12 @@
                 } // while ($r_days = mysqli_fetch_array($q_days))
 ?>
             </div>
-        </div>
+            <div id='map_container'>
+                <div id='map'>
+                    <!-- TODO: OSM -->
+                </div> <!-- map -->
+            </div> <!-- .map_container -->
+        </div> <!-- #content -->
 <?php
             include("../footer.php");
             $ad = ad($con, $lang, $lng);
@@ -180,7 +187,3 @@
 ?>
     </body>
 </html>
-
-<?php
-     }
-?>

www/script/lablanca.js

@@ -3,15 +3,35 @@ function expand(year){
 }
 
 function expandDay(id){
-    if (document.getElementById('day_schedule_' + id).style.maxHeight == '120em'){
+    if (document.getElementById('day_schedule_' + id).style.maxHeight != '' && document.getElementById('day_schedule_' + id).style.maxHeight != '0em'){
         document.getElementById('day_schedule_' + id).style.maxHeight = '0em';
         setTimeout(function(){document.getElementById('slid_day_' + id).src = '/img/misc/slid-right.png';}, 500);
     }
     else{
-        document.getElementById('day_schedule_' + id).style.maxHeight = '120em';
+        document.getElementById('day_schedule_' + id).style.maxHeight = 'initial';
         setTimeout(function(){document.getElementById('slid_day_' + id).src = '/img/misc/slid-down.png';}, 500);
     }
     document.getElementById('slid_day_' + id).style.opacity = '0';
-    setTimeout(function(){document.getElementById('slid_day_' + id).style.opacity = '1';}, 500);
-    
-}
+    setTimeout(function(){document.getElementById('slid_day_' + id).style.opacity = '1';}, 500); 
+}
+
+function hideMap(){
+    document.getElementById('map_container').style.opacity = 0;
+    document.getElementById('map_container').style.display = 'none';
+}
+
+function showMap(){
+    document.getElementById('map_container').style.display = 'block';
+    document.getElementById('map_container').style.opacity = 1;
+    return document.getElementById('map');
+}
+
+function showMapRoute(route){
+    map = showMap();
+    //TODO: OSM
+}
+
+function showMapPoint(lat, lon){
+    map = showMap();
+    //TODO: OSM
+}