Sith/timetable/templates/timetable/generator.jinja

{% extends 'core/base.jinja' %}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ static('timetable/css/generator.scss') }}">
{%- endblock -%}

{%- block additional_js -%}
  <script type="module" src="{{ static('bundled/timetable/generator-index.ts') }}"></script>
{%- endblock -%}

{% block title %}
  {% trans %}Timetable generator{% endtrans %}
{% endblock %}

{% block description -%}
  {% trans trimmed %}
    Get a nice schedule from the raw text in your student file
  {% endtrans %}
{%- endblock %}

{% block metatags %}
  <meta property="og:url" content="{{ request.build_absolute_uri() }}" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Générateur d'emploi du temps" />
  <meta property="og:image" content="{{ request.build_absolute_uri(static("core/img/logo_no_text.png")) }}" />
  <meta
    property="og:description"
    content="Générateur d'emploi du temps de l'UTBM.
             Copiez le texte de l'emploi du temps de votre dossier étudiant
             et récupérez une image plus jolie."
  />
{% endblock %}

{% block content %}
  <div x-data="timetableGenerator">
    <form @submit.prevent="generate()">
      <h1>{% trans %}Timetable generator{% endtrans %}</h1>
      <template x-if="error !== null" x-cloak>
        <div class="alert alert-red">
          <div class="alert-main">
            <p>
              {% trans trimmed %}
                Wrong timetable format. Make sure you copied it from your student folder.
              {% endtrans %}
            </p>
            <template x-if="!!error.incorrectRow">
              <p>
                {% trans %}Incorrect row{% endtrans %} :
                <code x-text="error.incorrectRow"></code>
              </p>
            </template>
          </div>
        </div>
      </template>
      <div class="form-group">
        <label for="timetable-input">
          {% trans %}Paste your schedule (without the header){% endtrans %}
        </label>
        <textarea id="timetable-input" cols="30" rows="15" x-model="content"></textarea>
      </div>
      <input type="submit" class="btn btn-blue" value="{% trans %}Generate{% endtrans %}">
    </form>
    <div
      id="timetable"
      x-show="table.height > 0 && table.width > 0"
      :style="{width: `${table.width+80}px`, height: `${table.height+40}px`}"
    >
      <div class="header">
        <template x-for="weekday in displayedWeekdays">
          <span x-text="weekday"></span>
        </template>
      </div>
      <div class="content">
        <div class="hours" :height="(endSlot - endSlot%4) - (startSlot - startSlot%4)">
          <template x-for="[hour, style] in getHours()">
            <div class="hour" :style="style">
              <div x-text="hour"></div>
              <div class="hour-bar" :style="{width: `${getWidth()}px`}"></div>
            </div>
          </template>
        </div>
        <div class="courses">
          <template x-for="course in courses">
            <div class="slot" :style="getStyle(course)">
              <span class="course-type" x-text="course.courseType"></span>
              <span x-text="course.ueCode"></span>
              <span x-text="`${course.startHour} - ${course.endHour}`"></span>
              <span x-text="(course.weekGroup ? `\nGroupe ${course.weekGroup}` : '')"></span>
              <span x-text="course.room"></span>
            </div>
          </template>
        </div>
      </div>
    </div>
    <button
      class="margin-bottom btn btn-blue"
      @click="savePng"
      x-show="table.height > 0 && table.width > 0"
    >
      {% trans %}Save to PNG{% endtrans %}
    </button>
  </div>
{% endblock content %}