{% extends "layouts/organization.html.twig" %}
{% block bodyClass %}{% endblock %}
{% block siteHeader %}
{% include 'organisms/organization-header.html.twig' %}
{% endblock %}
{% block pageHeader %}
<usc-page-header>
<template v-slot:breadcrumb>
<ol class="at-breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('center-schedule') }}">Horarios</a></li>
<li class="breadcrumb-item"><a href="{{ path('center-schedule-course-list') }}">Cursos</a></li>
</ol>
</template>
<h1 class="at-title">Nome do curso + Nome da titulación</h1>
<template v-slot:filters>
<div class="ml-filters-group">
<usc-dropdown-filter
label="Curso"
:initial-value="{value: 'Curso 2019-2020'}"
>
<template v-slot:default>
<li>
<a href="">Curso 2020-2021</a>
</li>
<li>
<a href="">Curso 2019-2020</a>
</li>
</template>
</usc-dropdown-filter>
<usc-dropdown-filter
label="Cuadrimestre"
:initial-value="{value: 'Primeiro cuadrimestre'}"
id="filtro-cuadrimestre"
>
<template v-slot:default="slotProps">
<li>
<button type="button" @click="slotProps.filter" data-value="primeiro-cuadrimestre">Primeiro cuadrimestre</button>
</li>
<li>
<button type="button" @click="slotProps.filter" data-value="segundo-cuadrimestre">Segundo cuadrimestre</button>
</li>
</template>
</usc-dropdown-filter>
<div id="weeks-dropdown-container">
<usc-dropdown-filter
label="Semana"
:initial-value="{value: '1ª semana (26out/1nov)'}"
id="filtro-semana"
ref="filtro-semana"
>
<template v-slot:default="slotProps">
<li>
<a href="" class="use-ajax">1ª semana (26out/1nov)</a>
</li>
<li>
<a href="" class="use-ajax">2ª semana (2nov/8nov)</a>
</li>
</template>
</usc-dropdown-filter>
</div>
<usc-dropdown-filter
label="Expositivas"
target-container="#filtered-container"
target-items=".expositive-subject"
>
<template v-slot:default="slotProps">
<li>
<button type="button" @click="slotProps.reset">Todos os grupos</button>
</li>
<li>
<button type="button" @click="slotProps.filter" data-value="clie_01">CLIE_01</button>
</li>
<li>
<button type="button" @click="slotProps.filter" data-value="clie_02">CLIE_02</button>
</li>
</template>
</usc-dropdown-filter>
<usc-dropdown-filter
label="Laboratorio"
target-container="#filtered-container"
target-items=".lab-subject"
>
<template v-slot:default="slotProps">
<li>
<button type="button" @click="slotProps.reset">Todos os grupos</button>
</li>
<li>
<button type="button" @click="slotProps.filter" data-value="clil_01">CLIL_01</button>
</li>
<li>
<button type="button" @click="slotProps.filter" data-value="clil_02">CLIL_02</button>
</li>
<li>
<button type="button" @click="slotProps.filter" data-value="clil_03">CLIL_03</button>
</li>
</template>
</usc-dropdown-filter>
<usc-dropdown-filter
label="Seminarios"
target-container="#filtered-container"
target-items=".seminar-subject"
>
<template v-slot:default="slotProps">
<li>
<button type="button" @click="slotProps.reset">Todos os grupos</button>
</li>
<li>
<button type="button" @click="slotProps.filter" data-value="clis_01">CLIS_01</button>
</li>
<li>
<button type="button" @click="slotProps.filter" data-value="clis_02">CLIS_02</button>
</li>
</template>
</usc-dropdown-filter>
</div>
</template>
</usc-page-header>
{% endblock %}
{% block pageContent %}
<div id="filtered-container">
<section class="org-tier">
<div class="tier-header">
<h2 class="tier-title">Primeiro cuadrimestre - 1ª semana (23out/30out)</h2>
</div>
<div class="tier-content">
<section
class="org-calendar"
v-match-heights="{el: ['.day-time-group-1', '.day-time-group-2', '.day-time-group-3'], disabled: [992]}"
>
<div class="calendar-day-time-labels">
<span class="calendar-day-time-label day-time-group-1">09:00</span>
<span class="calendar-day-time-label day-time-group-2">10:00</span>
<span class="calendar-day-time-label day-time-group-3">12:00</span>
</div>
<article class="calendar-day">
<header class="calendar-day-header">
<h3 class="at-title">Luns</h3>
</header>
<ul class="calendar-day-time-group day-time-group-1">
<li class="expositive-subject clie_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
title: 'Nome da materia agrupado polo nome de contido / Outro nome da materia',
group: 'CLIE_01'
} %}
</li>
<li class="lab-subject clil_01">
{% include 'molecules/academic-subject/mini-with-module.html.twig' with {
group: 'CLIL_01'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-2">
<li class="lab-subject clil_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_02'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-3">
<li class="seminar-subject clis_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_02'
} %}
</li>
<li class="lab-subject clil_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_02'
} %}
</li>
<li class="expositive-subject clie_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_02'
} %}
</li>
<li class="seminar-subject clis_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_01'
} %}
</li>
</ul>
</article>
<article class="calendar-day">
<header class="calendar-day-header">
<h3 class="at-title">Martes</h3>
</header>
<ul class="calendar-day-time-group day-time-group-1">
<li class="lab-subject clil_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_01'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-2">
<li class="lab-subject clil_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_02'
} %}
</li>
<li class="expositive-subject clie_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_01'
} %}
</li>
<li class="expositive-subject clie_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_02'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-3">
<li class="seminar-subject clis_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_02'
} %}
</li>
<li class="lab-subject clil_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_01'
} %}
</li>
<li class="seminar-subject clis_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_01'
} %}
</li>
</ul>
</article>
<article class="calendar-day">
<header class="calendar-day-header">
<h3 class="at-title">Mércores</h3>
</header>
<ul class="calendar-day-time-group day-time-group-1">
<li class="expositive-subject clie_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_01'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-2">
<li class="lab-subject clil_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_02'
} %}
</li>
<li class="seminar-subject clis_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_01'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-3">
<li class="seminar-subject clis_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_02'
} %}
</li>
<li class="lab-subject clil_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_02'
} %}
</li>
<li class="expositive-subject clie_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_02'
} %}
</li>
</ul>
</article>
<article class="calendar-day">
<header class="calendar-day-header">
<h3 class="at-title">Xoves</h3>
</header>
<ul class="calendar-day-time-group day-time-group-1">
<li class="lab-subject clil_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_01'
} %}
</li>
<li class="seminar-subject clis_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_02'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-2">
<li class="lab-subject clil_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_02'
} %}
</li>
<li class="expositive-subject clie_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_02'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-3">
<li class="expositive-subject clie_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_01'
} %}
</li>
<li class="lab-subject clil_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_01'
} %}
</li>
<li class="lab-subject clil_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_02'
} %}
</li>
</ul>
</article>
<article class="calendar-day">
<header class="calendar-day-header">
<h3 class="at-title">Venres</h3>
</header>
<ul class="calendar-day-time-group day-time-group-1">
<li class="seminar-subject clis_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_02'
} %}
</li>
<li class="seminar-subject clis_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIS_02'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-2">
<li class="lab-subject clil_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_02'
} %}
</li>
<li class="lab-subject clil_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_01'
} %}
</li>
<li class="expositive-subject clie_01">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_01'
} %}
</li>
</ul>
<ul class="calendar-day-time-group day-time-group-3">
<li class="expositive-subject clie_02">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIE_02'
} %}
</li>
<li class="lab-subject clil_03">
{% include 'molecules/academic-subject/mini.html.twig' with {
group: 'CLIL_03'
} %}
</li>
</ul>
</article>
</section>
</div>
</section>
</div>
{% endblock %}
{% block siteFooter %}
{% include 'organisms/site-footer.html.twig' %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
window.uscUi.eventBus.$on('dropdown-filter-changed', function (filterId, value) {
if (filterId === 'filtro-cuadrimestre' && value) {
$.get('{{ path('weeks_dropdown_filter') }}', function (data) {
$('#weeks-dropdown-container').html(data);
window.uscUi.render('#weeks-dropdown-container');
});
}
});
$('.ml-page-header .ml-filters-group').on('click', '.use-ajax', function (event) {
event.preventDefault();
$.get('{{ path('center-schedule-course_ajax') }}', function (data) {
window.uscUi.ref('filtro-semana').updateValue('Semana filtrada ajax');
$('#filtered-container').html(data);
window.uscUi.render('#filtered-container');
window.uscUi.eventBus.$emit('dropdown-reload-items');
});
});
});
</script>
{% endblock %}