61 lines
2.9 KiB
HTML
61 lines
2.9 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block body_class %}calendar-page{% endblock %}
|
||
|
|
{% block content %}
|
||
|
|
<main class="app-shell" data-today="{{ today }}" data-save-url="{{ url_for('save_choice') }}" data-status-url="{{ url_for('save_status') }}" data-delete-url="{{ url_for('delete_date_data') }}">
|
||
|
|
<section class="calendar-panel" aria-label="Calendar">
|
||
|
|
<header class="calendar-header">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">Fatimas calendar</p>
|
||
|
|
<h1 id="visible-month">Calendar</h1>
|
||
|
|
</div>
|
||
|
|
<div class="header-actions">
|
||
|
|
<button class="today-button" data-today-button type="button">Today</button>
|
||
|
|
<form action="{{ url_for('logout') }}" method="post">
|
||
|
|
<button class="logout-button" type="submit" aria-label="Sign out">Sign out</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="weekday-row" aria-hidden="true">
|
||
|
|
<span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span>
|
||
|
|
<span>Thu</span><span>Fri</span><span>Sat</span>
|
||
|
|
</div>
|
||
|
|
<div id="weeks" class="weeks" role="grid" aria-label="Choose a date"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="detail-panel" aria-live="polite">
|
||
|
|
<p id="selected-date" class="selected-date">Tap a day</p>
|
||
|
|
<div class="report-row">
|
||
|
|
<a class="report-button" href="{{ url_for('report') }}">Report</a>
|
||
|
|
</div>
|
||
|
|
<div id="amount-controls" class="amount-controls" hidden>
|
||
|
|
<div class="status-options" aria-label="Choose day status">
|
||
|
|
<button type="button" data-status="worked">Worked</button>
|
||
|
|
<button type="button" data-status="vacation">Vacation</button>
|
||
|
|
<button type="button" data-status="sick">Sick</button>
|
||
|
|
</div>
|
||
|
|
<div class="amount-row" aria-label="Choose an amount">
|
||
|
|
{% for amount in preset_amounts %}
|
||
|
|
<button type="button" data-amount="{{ amount }}">€{{ amount }}</button>
|
||
|
|
{% endfor %}
|
||
|
|
<button type="button" data-amount="0">€0</button>
|
||
|
|
<form id="custom-amount-form" class="custom-amount-form">
|
||
|
|
<div class="amount-input">
|
||
|
|
<span>€</span>
|
||
|
|
<input id="custom-amount" aria-label="Alternative amount" type="number" inputmode="decimal" min="0" step="0.01" placeholder="Other" required>
|
||
|
|
</div>
|
||
|
|
<button type="submit">Save</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="delete-row">
|
||
|
|
<button id="delete-date-button" type="button">Delete all data for this date</button>
|
||
|
|
</div>
|
||
|
|
<p id="save-status" class="save-status" role="status"></p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<script id="saved-choices" type="application/json">{{ choices | tojson }}</script>
|
||
|
|
<script id="saved-statuses" type="application/json">{{ statuses | tojson }}</script>
|
||
|
|
<script src="{{ url_for('static', filename='calendar.js') }}" defer></script>
|
||
|
|
{% endblock %}
|