templates/templates/pages/center/center-schedule-course.html.twig line 1

Open in your IDE?
  1. {% extends "layouts/organization.html.twig" %}
  2. {% block bodyClass %}{% endblock %}
  3. {% block siteHeader %}
  4.     {% include 'organisms/organization-header.html.twig' %}
  5. {% endblock %}
  6. {% block pageHeader %}
  7.     <usc-page-header>
  8.         <template v-slot:breadcrumb>
  9.             <ol class="at-breadcrumb">
  10.                 <li class="breadcrumb-item"><a href="{{ path('center-schedule') }}">Horarios</a></li>
  11.                 <li class="breadcrumb-item"><a href="{{ path('center-schedule-course-list') }}">Cursos</a></li>
  12.             </ol>
  13.         </template>
  14.         <h1 class="at-title">Nome do curso + Nome da titulación</h1>
  15.         <template v-slot:filters>
  16.             <div class="ml-filters-group">
  17.                 <usc-dropdown-filter
  18.                         label="Curso"
  19.                         :initial-value="{value: 'Curso 2019-2020'}"
  20.                 >
  21.                     <template v-slot:default>
  22.                         <li>
  23.                             <a href="">Curso 2020-2021</a>
  24.                         </li>
  25.                         <li>
  26.                             <a href="">Curso 2019-2020</a>
  27.                         </li>
  28.                     </template>
  29.                 </usc-dropdown-filter>
  30.                 <usc-dropdown-filter
  31.                         label="Cuadrimestre"
  32.                         :initial-value="{value: 'Primeiro cuadrimestre'}"
  33.                         id="filtro-cuadrimestre"
  34.                 >
  35.                     <template v-slot:default="slotProps">
  36.                         <li>
  37.                             <button type="button" @click="slotProps.filter" data-value="primeiro-cuadrimestre">Primeiro cuadrimestre</button>
  38.                         </li>
  39.                         <li>
  40.                             <button type="button" @click="slotProps.filter" data-value="segundo-cuadrimestre">Segundo cuadrimestre</button>
  41.                         </li>
  42.                     </template>
  43.                 </usc-dropdown-filter>
  44.                 <div id="weeks-dropdown-container">
  45.                     <usc-dropdown-filter
  46.                             label="Semana"
  47.                             :initial-value="{value: '1ª semana (26out/1nov)'}"
  48.                             id="filtro-semana"
  49.                             ref="filtro-semana"
  50.                     >
  51.                         <template v-slot:default="slotProps">
  52.                             <li>
  53.                                 <a href="" class="use-ajax">1ª semana (26out/1nov)</a>
  54.                             </li>
  55.                             <li>
  56.                                 <a href="" class="use-ajax">2ª semana (2nov/8nov)</a>
  57.                             </li>
  58.                         </template>
  59.                     </usc-dropdown-filter>
  60.                 </div>
  61.                 <usc-dropdown-filter
  62.                         label="Expositivas"
  63.                         target-container="#filtered-container"
  64.                         target-items=".expositive-subject"
  65.                 >
  66.                     <template v-slot:default="slotProps">
  67.                         <li>
  68.                             <button type="button" @click="slotProps.reset">Todos os grupos</button>
  69.                         </li>
  70.                         <li>
  71.                             <button type="button" @click="slotProps.filter" data-value="clie_01">CLIE_01</button>
  72.                         </li>
  73.                         <li>
  74.                             <button type="button" @click="slotProps.filter" data-value="clie_02">CLIE_02</button>
  75.                         </li>
  76.                     </template>
  77.                 </usc-dropdown-filter>
  78.                 <usc-dropdown-filter
  79.                         label="Laboratorio"
  80.                         target-container="#filtered-container"
  81.                         target-items=".lab-subject"
  82.                 >
  83.                     <template v-slot:default="slotProps">
  84.                         <li>
  85.                             <button type="button" @click="slotProps.reset">Todos os grupos</button>
  86.                         </li>
  87.                         <li>
  88.                             <button type="button" @click="slotProps.filter" data-value="clil_01">CLIL_01</button>
  89.                         </li>
  90.                         <li>
  91.                             <button type="button" @click="slotProps.filter" data-value="clil_02">CLIL_02</button>
  92.                         </li>
  93.                         <li>
  94.                             <button type="button" @click="slotProps.filter" data-value="clil_03">CLIL_03</button>
  95.                         </li>
  96.                     </template>
  97.                 </usc-dropdown-filter>
  98.                 <usc-dropdown-filter
  99.                         label="Seminarios"
  100.                         target-container="#filtered-container"
  101.                         target-items=".seminar-subject"
  102.                 >
  103.                     <template v-slot:default="slotProps">
  104.                         <li>
  105.                             <button type="button" @click="slotProps.reset">Todos os grupos</button>
  106.                         </li>
  107.                         <li>
  108.                             <button type="button" @click="slotProps.filter" data-value="clis_01">CLIS_01</button>
  109.                         </li>
  110.                         <li>
  111.                             <button type="button" @click="slotProps.filter" data-value="clis_02">CLIS_02</button>
  112.                         </li>
  113.                     </template>
  114.                 </usc-dropdown-filter>
  115.             </div>
  116.         </template>
  117.     </usc-page-header>
  118. {% endblock %}
  119. {% block pageContent %}
  120.     <div id="filtered-container">
  121.         <section class="org-tier">
  122.             <div class="tier-header">
  123.                 <h2 class="tier-title">Primeiro cuadrimestre - 1ª semana (23out/30out)</h2>
  124.             </div>
  125.             <div class="tier-content">
  126.                 <section
  127.                         class="org-calendar"
  128.                         v-match-heights="{el: ['.day-time-group-1', '.day-time-group-2', '.day-time-group-3'], disabled: [992]}"
  129.                 >
  130.                     <div class="calendar-day-time-labels">
  131.                         <span class="calendar-day-time-label day-time-group-1">09:00</span>
  132.                         <span class="calendar-day-time-label day-time-group-2">10:00</span>
  133.                         <span class="calendar-day-time-label day-time-group-3">12:00</span>
  134.                     </div>
  135.                     <article class="calendar-day">
  136.                         <header class="calendar-day-header">
  137.                             <h3 class="at-title">Luns</h3>
  138.                         </header>
  139.                         <ul class="calendar-day-time-group day-time-group-1">
  140.                             <li class="expositive-subject clie_01">
  141.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  142.                                     title: 'Nome da materia agrupado polo nome de contido / Outro nome da materia',
  143.                                     group: 'CLIE_01'
  144.                                 } %}
  145.                             </li>
  146.                             <li class="lab-subject clil_01">
  147.                                 {% include 'molecules/academic-subject/mini-with-module.html.twig' with {
  148.                                     group: 'CLIL_01'
  149.                                 } %}
  150.                             </li>
  151.                         </ul>
  152.                         <ul class="calendar-day-time-group day-time-group-2">
  153.                             <li class="lab-subject clil_02">
  154.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  155.                                     group: 'CLIL_02'
  156.                                 } %}
  157.                             </li>
  158.                         </ul>
  159.                         <ul class="calendar-day-time-group day-time-group-3">
  160.                             <li class="seminar-subject clis_02">
  161.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  162.                                     group: 'CLIS_02'
  163.                                 } %}
  164.                             </li>
  165.                             <li class="lab-subject clil_02">
  166.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  167.                                     group: 'CLIL_02'
  168.                                 } %}
  169.                             </li>
  170.                             <li class="expositive-subject clie_02">
  171.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  172.                                     group: 'CLIE_02'
  173.                                 } %}
  174.                             </li>
  175.                             <li class="seminar-subject clis_01">
  176.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  177.                                     group: 'CLIS_01'
  178.                                 } %}
  179.                             </li>
  180.                         </ul>
  181.                     </article>
  182.                     <article class="calendar-day">
  183.                         <header class="calendar-day-header">
  184.                             <h3 class="at-title">Martes</h3>
  185.                         </header>
  186.                         <ul class="calendar-day-time-group day-time-group-1">
  187.                             <li class="lab-subject clil_01">
  188.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  189.                                     group: 'CLIL_01'
  190.                                 } %}
  191.                             </li>
  192.                         </ul>
  193.                         <ul class="calendar-day-time-group day-time-group-2">
  194.                             <li class="lab-subject clil_02">
  195.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  196.                                     group: 'CLIL_02'
  197.                                 } %}
  198.                             </li>
  199.                             <li class="expositive-subject clie_01">
  200.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  201.                                     group: 'CLIE_01'
  202.                                 } %}
  203.                             </li>
  204.                             <li class="expositive-subject clie_02">
  205.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  206.                                     group: 'CLIE_02'
  207.                                 } %}
  208.                             </li>
  209.                         </ul>
  210.                         <ul class="calendar-day-time-group day-time-group-3">
  211.                             <li class="seminar-subject clis_02">
  212.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  213.                                     group: 'CLIS_02'
  214.                                 } %}
  215.                             </li>
  216.                             <li class="lab-subject clil_01">
  217.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  218.                                     group: 'CLIL_01'
  219.                                 } %}
  220.                             </li>
  221.                             <li class="seminar-subject clis_01">
  222.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  223.                                     group: 'CLIS_01'
  224.                                 } %}
  225.                             </li>
  226.                         </ul>
  227.                     </article>
  228.                     <article class="calendar-day">
  229.                         <header class="calendar-day-header">
  230.                             <h3 class="at-title">Mércores</h3>
  231.                         </header>
  232.                         <ul class="calendar-day-time-group day-time-group-1">
  233.                             <li class="expositive-subject clie_01">
  234.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  235.                                     group: 'CLIE_01'
  236.                                 } %}
  237.                             </li>
  238.                         </ul>
  239.                         <ul class="calendar-day-time-group day-time-group-2">
  240.                             <li class="lab-subject clil_02">
  241.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  242.                                     group: 'CLIL_02'
  243.                                 } %}
  244.                             </li>
  245.                             <li class="seminar-subject clis_01">
  246.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  247.                                     group: 'CLIS_01'
  248.                                 } %}
  249.                             </li>
  250.                         </ul>
  251.                         <ul class="calendar-day-time-group day-time-group-3">
  252.                             <li class="seminar-subject clis_02">
  253.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  254.                                     group: 'CLIS_02'
  255.                                 } %}
  256.                             </li>
  257.                             <li class="lab-subject clil_02">
  258.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  259.                                     group: 'CLIL_02'
  260.                                 } %}
  261.                             </li>
  262.                             <li class="expositive-subject clie_02">
  263.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  264.                                     group: 'CLIE_02'
  265.                                 } %}
  266.                             </li>
  267.                         </ul>
  268.                     </article>
  269.                     <article class="calendar-day">
  270.                         <header class="calendar-day-header">
  271.                             <h3 class="at-title">Xoves</h3>
  272.                         </header>
  273.                         <ul class="calendar-day-time-group day-time-group-1">
  274.                             <li class="lab-subject clil_01">
  275.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  276.                                     group: 'CLIL_01'
  277.                                 } %}
  278.                             </li>
  279.                             <li class="seminar-subject clis_02">
  280.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  281.                                     group: 'CLIS_02'
  282.                                 } %}
  283.                             </li>
  284.                         </ul>
  285.                         <ul class="calendar-day-time-group day-time-group-2">
  286.                             <li class="lab-subject clil_02">
  287.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  288.                                     group: 'CLIL_02'
  289.                                 } %}
  290.                             </li>
  291.                             <li class="expositive-subject clie_02">
  292.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  293.                                     group: 'CLIE_02'
  294.                                 } %}
  295.                             </li>
  296.                         </ul>
  297.                         <ul class="calendar-day-time-group day-time-group-3">
  298.                             <li class="expositive-subject clie_01">
  299.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  300.                                     group: 'CLIE_01'
  301.                                 } %}
  302.                             </li>
  303.                             <li class="lab-subject clil_01">
  304.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  305.                                     group: 'CLIL_01'
  306.                                 } %}
  307.                             </li>
  308.                             <li class="lab-subject clil_02">
  309.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  310.                                     group: 'CLIL_02'
  311.                                 } %}
  312.                             </li>
  313.                         </ul>
  314.                     </article>
  315.                     <article class="calendar-day">
  316.                         <header class="calendar-day-header">
  317.                             <h3 class="at-title">Venres</h3>
  318.                         </header>
  319.                         <ul class="calendar-day-time-group day-time-group-1">
  320.                             <li class="seminar-subject clis_02">
  321.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  322.                                     group: 'CLIS_02'
  323.                                 } %}
  324.                             </li>
  325.                             <li class="seminar-subject clis_02">
  326.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  327.                                     group: 'CLIS_02'
  328.                                 } %}
  329.                             </li>
  330.                         </ul>
  331.                         <ul class="calendar-day-time-group day-time-group-2">
  332.                             <li class="lab-subject clil_02">
  333.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  334.                                     group: 'CLIL_02'
  335.                                 } %}
  336.                             </li>
  337.                             <li class="lab-subject clil_01">
  338.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  339.                                     group: 'CLIL_01'
  340.                                 } %}
  341.                             </li>
  342.                             <li class="expositive-subject clie_01">
  343.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  344.                                     group: 'CLIE_01'
  345.                                 } %}
  346.                             </li>
  347.                         </ul>
  348.                         <ul class="calendar-day-time-group day-time-group-3">
  349.                             <li class="expositive-subject clie_02">
  350.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  351.                                     group: 'CLIE_02'
  352.                                 } %}
  353.                             </li>
  354.                             <li class="lab-subject clil_03">
  355.                                 {% include 'molecules/academic-subject/mini.html.twig' with {
  356.                                     group: 'CLIL_03'
  357.                                 } %}
  358.                             </li>
  359.                         </ul>
  360.                     </article>
  361.                 </section>
  362.             </div>
  363.         </section>
  364.     </div>
  365. {% endblock %}
  366. {% block siteFooter %}
  367.     {% include 'organisms/site-footer.html.twig' %}
  368. {% endblock %}
  369. {% block javascripts %}
  370.     {{ parent() }}
  371.     <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  372.     <script type="text/javascript">
  373.       $(function () {
  374.         window.uscUi.eventBus.$on('dropdown-filter-changed', function (filterId, value) {
  375.           if (filterId === 'filtro-cuadrimestre' && value) {
  376.             $.get('{{ path('weeks_dropdown_filter') }}', function (data) {
  377.               $('#weeks-dropdown-container').html(data);
  378.               window.uscUi.render('#weeks-dropdown-container');
  379.             });
  380.           }
  381.         });
  382.         $('.ml-page-header .ml-filters-group').on('click', '.use-ajax', function (event) {
  383.           event.preventDefault();
  384.           $.get('{{ path('center-schedule-course_ajax') }}', function (data) {
  385.             window.uscUi.ref('filtro-semana').updateValue('Semana filtrada ajax');
  386.             $('#filtered-container').html(data);
  387.             window.uscUi.render('#filtered-container');
  388.             window.uscUi.eventBus.$emit('dropdown-reload-items');
  389.           });
  390.         });
  391.       });
  392.     </script>
  393. {% endblock %}