Produits Entr'ouvert » Calebasse

{% extends "calebasse/base.html" %}

{% load url from future %}

{% block extrascripts %}

    <script>

      function replace_anchor(url, anchor) {

        var splitted = url.split('#');

        return splitted[0] + '#' + encodeURI(anchor);

      }

      function extract_anchor() {

        if (window.location.href.indexOf('#') == -1) {

          return "";

        }

        var splitted = window.location.href.split('#');

        return decodeURI(splitted[1]).split(',');

      }

      function make_anchor() {

        return $.makeArray($('.person-item.active').map(function (v, i) { return '_' + $(i).attr('id'); })).join(',');

      }

      function toggle_worker(worker_selector) {

        $(worker_selector).toggleClass('active');

        // update the anchor

        var anchor = make_anchor();

        var new_uri = replace_anchor(window.location.href, anchor);

        console.log(new_uri);

        window.location.href = new_uri;

        $('a[href^="../"]').each(function (i, a) {

          $(a).attr('href', replace_anchor($(a).attr('href'), anchor));

        });

        var $target = $($(worker_selector).data('target'));

        $target.toggle();

        if ($target.is(':visible')) {

          $target.click();

        }

      }

  $(function() {

    $('#tabs').tabs();

    $('div.agenda > div').accordion({active: false, autoHeight: false});

    $('.person-item').on('click', function() {

      toggle_worker(this);

    });

    // select all anchors

    $.each(extract_anchor(), function (i, anchor) {

      $('#'+anchor.substr(1)).each(function (i, worker_selector) { toggle_worker(worker_selector); });

    });

    $('.textedit').on('keydown', function() {

        $('button', this).removeAttr("disabled");

    });

    $('.textedit button').on('click', function() {

        var textarea = $(this).prev();

        var span = textarea.prev()

        $.ajax({

            url: '/api/event/' + $(this).data("event-id") + '/?format=json',

            type: 'PATCH',

            contentType: 'application/json',

            data: '{"description": "' + textarea.val() + '"}',

            success: function(data) {

                span.html('Commentaire modifiée avec succès');

            }

        });

    });

    $('.appointment').on('click', function() {

        $('.textedit span').html('');

    });

    /* Gestion du filtre sur les utilisateurs */

		$('#filtre input').keyup(function() {

			var filtre = $(this).val();

      if (filtre) {

        $('#users li').each(function() {

          if ($(this).text().match(filtre)) {

            $(this).show();

          } else {

            $(this).hide();

          }

        });

      } else {

        $('#users li').show();

      }

		});

    $('#agenda-date').datepicker({

      dateFormat: "DD d MM yy",

      onClose: function(dateText, inst) {

        console.log('close');

      }

    });

    $('#agenda-date').on('change', function () {

      window.location.href=replace_anchor('../' + $(this).datepicker('getDate').toISOString().substr(0,10), make_anchor());

    });

		$('.date').datepicker({showOn: 'button'});

		$('#add-intervenant-btn').click(function() {

			var text = $(this).prev().val();

			$('#intervenants ul').append('<li><input type="checkbox" value="' + text + '" checked="checked">' + text + '</input></li>');

			$(this).prev().val('').focus();

			return false;

		});

    $('#newrdv').click(function() {

      var participants = $('.person-item.active').map(function (i, v) { return $(v).data('worker-id'); });

      var qs = $.param({participants: $.makeArray(participants) }, true);

      var new_appointment_url = "{% url 'nouveau-rdv' service=service date=date %}?" + qs;

      $('#rdv').load(new_appointment_url,

        function () {

          function onsuccess(response, status, xhr, form) {

            var parse = $(response);

            if ($('.errorlist', parse).length != 0) {

              $('#rdv').html(response);

              $('#rdv form').ajaxForm({

                success: onsuccess,

              });

              $('#rdv .datepicker-date').datepicker({dateFormat: 'yy-m-d', showOn: 'button'});

              console.log('error');

            } else {

              console.log('success');

              window.location.reload(true);

            }

          }

          $('#rdv .datepicker-date').datepicker({dateFormat: 'yy-m-d', showOn: 'button'});

          $('form', this).ajaxForm({

            success: onsuccess

          });

          $(this).dialog({title: 'Nouveau rendez-vous',

              width: '800px',

              buttons: [ { text: "Fermer",

                     click: function() { $(this).dialog("close"); } },

                   { text: "Ajouter",

                     click: function() { $("#rdv form").submit(); } }]});

      });

    });

	});

	</script>

  <style>

    .person-item span { display: none; }

    .person-item.active span { display: inline; }

    #agenda-date { width: 20em; }

  </style>

{% endblock %}

{% block title %}{{ block.super }} - Agenda {% endblock %}

{% block header %}

  {{ block.super }}

  <span>Agenda - {{ service_name }}</spam>

{% endblock %}

{% block appbar %}

    <h2>Agenda</h2>

    <a href="../..">Retourner à l'accueil</a>

    <button>Nouvel événement (autre)</button>

    <button id="newrdv">Nouveau rendez-vous patient</button>

{% endblock %}

{% block beforecontent %}

    <div id="extra-top-links">

     <a href="activite-du-service">Activité du service</a>

     —

     <a href="validation-des-actes">Validation des actes</a>

     —

     <a href="rendez-vous-periodiques">Rendez-vous périodiques</a>

    </div>

    <div id="users">

    <div id="filtre">

     <input type="text"/>

    </div>

    <dl>

     {% for workers_type in workers_types %}

     <dt>{{ workers_type.type }}</dt>

     <dd><ul>

       {% for worker in workers_type.workers %}

       <li id="selector-worker-{{worker.id}}" class="person-item" data-worker-id="{{worker.id}}" data-target=".worker-{{worker.id}}.agenda">{{ worker.display_name }} <span title="cliquer pour déselectionner">(-)</span></li>

       {% endfor %}

     </ul></dd>

     {% endfor %}

   </dl>

 </div>

{% endblock %}

{% block content %}

<div class="content">

   <div id="datesel">

     <a href="../{{ previous_month|date:"SHORT_DATE_FORMAT"}}">««</a>

     <a href="../{{ previous_day|date:"SHORT_DATE_FORMAT"}}">«</a>

   <!-- <span>Jeudi 5 juillet 2012</span> -->

   <input id="agenda-date" value="{{ date|date:"DATE_FORMAT" }}"/>

   <a href="../{{ next_day|date:"SHORT_DATE_FORMAT"}}">»</a>

   <a href="../{{ next_month|date:"SHORT_DATE_FORMAT"}}">»»</a>

   </div>

   <table>

    <tbody>

    <tr>

     <td id="dispos">

      Disponibilités

      <table>

        {% for start_time, quaters in disponibility.items %}

          <tr class="hour-mark">

              <td rowspan="4">{{ start_time }}:00</td>

              {% for quater in quaters|slice:":1" %}

                {% for value in quater %}

                <td class="worker-{{ value.id }} agenda {{ value.dispo }}" style="display: none; "></td>

                {% endfor %}

              {% endfor %}

          </tr>

          {% for quater in quaters|slice:"1:4" %}

            <tr>

              {% for value in quater %}

                <td class="worker-{{ value.id }} agenda {{ value.dispo }}" style="display: none; "></td>

              {% endfor %}

            </tr>

          {% endfor %}

        {% endfor %}

      </table>

     </td>

     <td id="agendas">

       <div id="tabs">

       <ul>

        {% for worker_agenda in workers_agenda %}

           <li><a href="#tabs-worker-{{ worker_agenda.worker.id }}" class="worker-{{ worker_agenda.worker.id }} agenda" style="display: none;">{{ worker_agenda.worker.display_name }}</a></li>

        {% endfor %}

       </ul>

       {% for worker_agenda in workers_agenda %}

       <div id="tabs-worker-{{ worker_agenda.worker.id }}" class="tabs agenda worker-{{ worker_agenda.worker.id }}" style="display: none;">

         <a class="print" href="#">Imprimer</a>

         <div>

           {% for appointment in worker_agenda.appointments %}

           <h3 class="{{ appointment.type }} appointment"><span class="hour">{{ appointment.begin_hour }}</span>

             {% if appointment.title %} — {{ appointment.title }}  {% endif %}

             {% if appointment.length %} — {{ appointment.length }}m {% endif %}

             {% if appointment.workers_initial %} —{{ appointment.workers_initial }} {% endif %}

             {% if appointment.act_type %} — {{ appointment.act_type }} {% endif %}

             {% if appointment.room %} — {{ appointment.room }} {% endif %}

             <span class="right">

                 {% if appointment.service and appointment.service != service %}

                 <span class="box {{ appointment.service }}" title="{{ appointment.service }}"></span>

                 {% endif %}

                 {% if appointment.convocation_sent %}

                 <img title="Une convocation a été envoyée" src="{{ STATIC_URL }}images/emblem-mail.png">

                 {% endif %}

                 {% if appointment.description %}

                 <img title="Un commentaire existe" src="{{ STATIC_URL }}images/emblem-documents.png">

                 {% endif %}

            </span>

           </h3>

           <div>

             {% if appointment.type == 'free' %}<button class='booking' data-hour="{{ appointment.begin_hour }}">Prendre un rendez-vous</button> {% endif %}

             {% if appointment.event_id %}

             <div class="tabs-worker-{{ worker_agenda.worker.id }} textedit">

                 <span></span>

                 <textarea>{{ appointment.description }}</textarea>

                 <button disabled="disabled" data-event-id="{{ appointment.event_id }}">✔</button>

             </div>

             {% endif %}

             {% if appointment.patient_record_id %}

             <a href="/{{ service }}/dossiers/{{ appointment.patient_record_id }}">Dossier patient</a> -

             <a href="#">Prochains rendez-vous</a> -

             <a href="#">Convoquer patient</a>

             {% endif %}

           </div>

           {% endfor %}

         </div>

       </div>

       {% endfor %}

       </div>

       </div>

     </td>

    </tr>

    </tbody>

   </table>

 </div>

{% endblock %}

{% block dialogs %}

  <div id="rdv" style="display: none;">

 </div>

{% endblock %}