templates/Dp/CalendarBundle/Default/calendar.html.twig line 1

Open in your IDE?
  1. <script>
  3.     /*
  4.      * This file is part of the Symfocal Calendar v1.0.
  5.      *
  6.      * (c) Symfocal http://www.symfocal.com
  7.      * alban@symfocal.com
  8.      * 
  9.      * For the full copyright and license information, please view the LICENSE
  10.      * file that was distributed with this source code.
  11.      */
  13.     var gap{{item}} = 0; //global variable to follow what months to display
  14.             var month{{item}} = {{ month }};
  15.             var year{{item}} = {{ year }};
  16.             var item{{item}} = {{ item }};//item is set to first element
  17.     {% if admin %}
  18.         var clickMethod = 0;//defines click method to change states of bookings in admin
  19.     {% endif %}
  22.         jQuery(document).ready(function () {
  24.             var cal1 = $('#cal1{{item}}');
  25.             var cal2 = $('#cal2{{item}}');
  26.             var cal3 = $('#cal3{{item}}');
  28.             var cal4 = $('#cal4{{item}}');
  29.             var cal5 = $('#cal5{{item}}');
  30.             var cal6 = $('#cal6{{item}}');
  32.             var $select = $('#items_select{{item}}');
  34.     {% if admin %}
  35.             var $selectMethod = $('#states_select');//this is needed in admin to select click method applied for changing states
  36.     {% endif %}
  38.             $('#link_next{{item}}').attr('onclick', '').click(function (e) {
  39.                 e.preventDefault();
  40.                 changeMonths(1)
  41.             });
  42.             $('#link_prev{{item}}').attr('onclick', '').click(function (e) {
  43.                 e.preventDefault();
  44.                 changeMonths(-1)
  45.             });
  47.             function fillCalendar(mois, annee, cal)
  48.             {
  49.                 cal.css('display', 'none');
  50.                 cal.find('a').removeClass().unbind();//clear classes and events of <a> elements inside the calendar before applying the new styles and events based on ajax response
  51.     {% if admin == false %}
  52.                 cal.find('a').click(function (e) {
  53.                     e.preventDefault();
  54.                 });//prevents the page from moving if <a> elements from calendar are clicked outside of admin mode.
  55.     {% endif %}
  57.                 var url = "{{ path('dp_calendar_ajax2') }}";
  58.                 var id = cal.attr('id');
  59.                 $.post(url, {
  60.                     month: mois,
  61.                     year: annee,
  62.                     itemId: item{{item}}
  63.                 }, function (data) {
  64.                     //the response is in the data variable
  65.                     if (data.responseCode == 200)
  66.                     {
  67.                         var days_previous_month = data.days_previous_month;
  68.                         var nb_days_prev = data.nb_days_prev;
  69.                         $('#' + id + '_title').html(data.current_month);
  70.                         var count = 1;
  71.                         while (count < 43)
  72.                         {
  73.     {% if admin %}
  74.                             if (data.calendar[(count - 1)].dates != "")//in admin, if the date is valid, we attach an action to change date state on the click event 
  75.                             {
  76.                                 $('#' + id + '_cell_' + count).attr("title", data.calendar[(count - 1)].dates).click(changeState);//This is a trick to pass an event to a non-anonymous function, which is not posible with the classic .click(function(e){myFunction()})
  77.                             } else
  78.                             {
  79.                                 $('#' + id + '_cell_' + count).click(function (e) {
  80.                                     e.preventDefault();
  81.                                 });
  82.                             }
  83.     {% endif %}
  84.                             if (data.calendar[(count - 1)].booked == -1)
  85.                                 $('#' + id + '_cell_' + count).html(days_previous_month - nb_days_prev + count);
  86.                             else
  87.                                 $('#' + id + '_cell_' + count).html(data.calendar[(count - 1)].fill);
  88.                             if (data.calendar[(count - 1)].booked == 1)
  89.                                 $('#' + id + '_cell_' + count).addClass(data.calendar[(count - 1)].classe);
  90.                             else if (data.calendar[(count - 1)].booked < 0)
  91.                                 $('#' + id + '_cell_' + count).addClass("dates_preview");
  92.                             count++;
  93.                         }
  94.                         cal.css('display', 'block');
  95.                     } else if (data.responseCode == 400)//bad request
  96.                     {
  97.                         alert(data.message);
  98.                     } else
  99.                     {
  100.                         //any other error is treated here
  101.                         alert("An unexpeded error occured.");
  102.                     }
  103.                 });
  104.                 return false;
  105.             }
  107.             function changeMonths(step)//this function is set for displaying 3 months - to do: needs to be flexible based on number of months displayed
  108.             {
  109.                 gap{{item}} = gap{{item}} + step;
  110.                 var newMonth = month{{item}} + (3 * gap{{item}}) % 12;
  111.                 //var newYear = year{{item}} + Math.floor((3 * gap{{item}})/12);
  112.                 var gapYear = (3 * gap{{item}}) / 12;
  113.                 var newYear = year{{item}} + gapYear - gapYear % 1;
  114.                 if (newMonth <= 0)
  115.                 {
  116.                     newMonth += 12;
  117.                 }
  118.                 fillCalendar(newMonth - 12 * Math.floor((newMonth) / 13), newYear + Math.floor((newMonth) / 13), cal1);
  119.                 fillCalendar(newMonth + 1 - 12 * Math.floor((newMonth + 1) / 13), newYear + Math.floor((newMonth + 1) / 13), cal2);
  120.                 fillCalendar(newMonth + 2 - 12 * Math.floor((newMonth + 2) / 13), newYear + Math.floor((newMonth + 2) / 13), cal3);
  122.                 fillCalendar(newMonth + 3 - 12 * Math.floor((newMonth + 3) / 13), newYear + Math.floor((newMonth + 3) / 13), cal4);
  123.                 fillCalendar(newMonth + 4 - 12 * Math.floor((newMonth + 4) / 13), newYear + Math.floor((newMonth + 4) / 13), cal5);
  124.                 fillCalendar(newMonth + 5 - 12 * Math.floor((newMonth + 5) / 13), newYear + Math.floor((newMonth + 5) / 13), cal6);
  126.                 changeLegend();
  127.             }
  129.             $select.change(function () {//change months displayed when a new item is selected
  130.                 $select.find("option:selected").each(function () {
  131.                     item{{item}} = $(this).val();//change the javascript global variable following the item selected
  132.                     changeMonths(0);
  133.                 });
  134.             })
  136.             function changeLegend()
  137.             {
  138.                 var url = "{{ path('dp_calendar_ajax_change_state') }}";
  139.                 $.post(url, {
  140.                     itemId: item{{item}}
  141.                 }, function (data) {
  142.                     if (data.responseCode == 200) {
  143.                         html = '';
  144.                         $('.stateChange').remove();
  145.                         // esborrar el select states_select
  146.                         $("#states_select").find('option[value!="0"]').remove();
  148.                         for (index = 0; index < data.state.length; index++)
  149.                         {
  150.                             html = html + '<li class="stateChange white">';
  151.                             html = html + '<span><a href="#" class="' + data.state[index].class_returned + '"></a></span>';
  152.                             html = html + '<span class="legend_calendar">' + data.state[index].name_returned + '</span>';
  153.                             html = html + '</li>';
  154.                             $('#states_select').append('<option value="' + data.state[index].id_returned + '" ' + (index == 0 ? 'selected="selected"' : '') + '>' + data.state[index].name_returned + '</option>');
  155.                             if (index == 0)
  156.                                 clickMethod = data.state[index].id_returned;
  157.                         }
  158.                         $('#stateContainer').html(html);
  159.                     } else if (data.responseCode == 400) {//bad request
  160.                         alert(data.message);
  161.                     } else {
  162.                         alert("An unexpeded error occured.");
  163.                     }
  164.                 });
  165.             }
  167.     {% if admin %}
  168.             $selectMethod.change(function () {//change the click method in admin based on select drop down 
  169.                 $selectMethod.find("option:selected").each(function () {
  170.                     clickMethod = $(this).val();
  171.                 });
  172.             })
  174.             function changeState(e)//admn function to change class of the date that has been clicked on based on the new state
  175.             {
  176.                 e.preventDefault();
  177.                 var date = $(this).attr("title");
  178.                 var id = $(this).attr("id");
  180.                 var url = "{{ path('dp_calendar_ajax_admin') }}";
  181.                 $.post(url, {
  182.                     date: date,
  183.                     id: id,
  184.                     itemId: item{{item}},
  185.                     clickMethod: clickMethod
  186.                 }, function (data) {
  187.                     if (data.responseCode == 200) {
  188.                         var id_returned = data.id_returned;
  189.                         var date_returned = data.date_returned;
  190.                         var state = data.state;
  191.                         $('#' + id_returned).removeClass();
  192.                         $('#' + id_returned).addClass(state);
  193.                     } else if (data.responseCode == 400) {//bad request
  194.                         alert(data.message);
  195.                     } else {
  196.                         alert("An unexpeded error occured.");
  197.                     }
  198.                 });
  199.             }
  200.     {% endif %}
  202.             $(window).ready(function () {//fill calendars for the first time once page is loaded
  203.                 changeMonths(0);
  204.             });
  207.         });
  208. </script>
  210. <div id="manager">
  211.     {#
  212.     <div id="selects">
  213.         <select id="items_select">
  214.             {% for item in items %}
  215.                 <option value="{{ item.id }}">{{ item.name }}</option>
  216.             {% endfor %}
  217.         </select>
  219.         {% if admin %}
  220.             <select id="states_select">
  221.                 <option value="0">Esborrar estat</option>
  222.                 {% for state in states %}
  223.                     <option value="{{ state.id }}">{{ state.name }}</option>
  224.                 {% endfor %}
  225.             </select>
  226.         {% endif %}
  227.     </div>
  228.     #}
  229.     {#
  230.             {% if admin %}
  231.                 <div id="symfocal_admin_menu">
  232.                     <ul>
  233.                         <li><a class="admin_menu_selected" href="{{ path('dp_calendar_admin') }}">Manage bookings</a></li>
  234.                         <li><a href="{{ path('item') }}">Manage items</a></li>
  235.                         <li><a href="{{ path('state') }}">Manage states</a></li>
  236.                     </ul>
  237.                 </div>
  238.             {% endif %}
  239.     #}
  240. </div>
  242. <div id="control_nav{{item}}" class="control_nav" style="display:block!important;">
  243.     <a id="link_prev{{item}}" href="#">{{"Previ"|trans}}</a>
  244.     <a id="link_next{{item}}" href="#">{{"Següent"|trans}}</a>
  245. </div>
  247. <div id="calendars_container{{item}}">
  248.     {% include 'Dp\\CalendarBundle\\Default\\cal.html.twig' with {'calId': 'cal1'~item} %}
  249.     {% include 'Dp\\CalendarBundle\\Default\\cal.html.twig' with {'calId': 'cal2'~item} %}
  250.     {% include 'Dp\\CalendarBundle\\Default\\cal.html.twig' with {'calId': 'cal3'~item} %}
  251.     {% include 'Dp\\CalendarBundle\\Default\\cal.html.twig' with {'calId': 'cal4'~item} %}
  252.     {% include 'Dp\\CalendarBundle\\Default\\cal.html.twig' with {'calId': 'cal5'~item} %}
  253.     {% include 'Dp\\CalendarBundle\\Default\\cal.html.twig' with {'calId': 'cal6'~item} %}
  255. </div>
  257. <div id="legend{{item}}" class="calendar legend">
  258.     <div class="large-12 medium 12 cell">
  259.         <div class="callout">
  260.             <div class="grid-x grid-padding-x" id="stateContainer{{item}}">
  261.                 <div class="large-12 medium 12 cell">
  262.                     <h3><span>{{"Llegenda"|trans}}</span></h3>
  263.                 </div>
  264.                 {% for state in statesLellenda %}
  265.                     <div class="large-3 medium-3 cell">
  266.                         <a href="#" class="{{ state.class }}" style="cursor:default!important;"></a>
  267.                         <span class="legend_calendar">{{ (app.request.locale == 'ca'?state.name:attribute(state, 'name'~(app.request.locale|capitalize))) }}</span>
  268.                     </div>
  269.                 {% endfor %}
  270.             </div>
  271.         </div>   
  272.     </div>
  273. </div>