Refactor rota detail view for improved layout and usability, including enhanced solver settings and RotaBuilder summary sections, and add import button for workers.
This commit is contained in:
Ross
@@ -6,12 +6,30 @@
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">{{ rota.name }}</h1>
|
||||
<p><a class="button is-small" href="{% url 'rota:rota_edit' rota.id %}">Edit rota</a></p>
|
||||
<p class="subtitle">{{ rota.description }}</p>
|
||||
<p>Period: {{ rota.start_date }} → {{ rota.end_date }}</p>
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div>
|
||||
<h1 class="title is-3" style="margin-bottom:0.2rem;">{{ rota.name }}</h1>
|
||||
<p class="subtitle is-6" style="margin-top:0;">{{ rota.description }}</p>
|
||||
<p class="is-size-7 has-text-grey">Period: {{ rota.start_date }} → {{ rota.end_date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-small" href="{% url 'rota:rota_edit' rota.id %}">Edit rota</a>
|
||||
<a class="button is-small is-light" hx-get="{% url 'rota:worker_import' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Import</a>
|
||||
<a class="button is-small" href="{% url 'rota:rota_detail' rota.id %}">Refresh</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box" style="margin-top:0.75rem;">
|
||||
<div class="columns is-variable is-6" style="margin-top:0.75rem;">
|
||||
<div class="column is-half">
|
||||
<div class="box">
|
||||
<h2 class="subtitle is-6">Solver settings</h2>
|
||||
<div class="columns is-mobile is-multiline" style="margin-bottom:0.5rem;">
|
||||
<div class="column is-narrow"><strong>Solver</strong></div>
|
||||
@@ -26,8 +44,9 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="box" style="margin-top:0.75rem;">
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="box">
|
||||
<h2 class="subtitle is-6">RotaBuilder summary</h2>
|
||||
<div class="columns is-mobile is-multiline" style="margin-bottom:0.5rem;">
|
||||
<div class="column is-narrow"><strong>Weeks</strong></div>
|
||||
@@ -37,39 +56,57 @@
|
||||
<div class="column is-narrow"><strong>Workers</strong></div>
|
||||
<div class="column">{{ worker_count|default:'—' }}</div>
|
||||
</div>
|
||||
{# constraints sample intentionally omitted here; keep summary compact #}
|
||||
<p class="help is-size-7">This summary reflects the current rota options and configured shifts/workers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="box mb-4">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
{% include 'rota/partials/worker_list.html' %}
|
||||
<p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<div class="buttons">
|
||||
<button class="button is-link" hx-get="{% url 'rota:worker_add' %}?rota_id={{ rota.id }}" hx-target="#modal" hx-swap="innerHTML">Add worker</button>
|
||||
<button class="button is-light" hx-get="{% url 'rota:worker_import' rota.id %}" hx-target="#modal" hx-swap="innerHTML" style="margin-left:0.5rem;">Import workers</button>
|
||||
<a class="button is-info is-light is-small" href="{% url 'rota:leaves_global_rota' rota.id %}" style="margin-left:0.5rem;">All leave requests</a>
|
||||
</p>
|
||||
<button class="button is-light" hx-get="{% url 'rota:worker_import' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Import workers</button>
|
||||
<a class="button is-info is-light is-small" href="{% url 'rota:leaves_global_rota' rota.id %}">All leave requests</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<h2 class="subtitle">Constraint options</h2>
|
||||
<div class="box">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<p class="help">Configure typed rota constraint options. Click Edit to open the form showing typed fields and descriptions.</p>
|
||||
<p><button class="button is-link" hx-get="{% url 'rota:rota_options' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Edit constraint options</button></p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<button class="button is-link" hx-get="{% url 'rota:rota_options' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Edit constraint options</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<details class="constraints-details" style="margin-top:0.5rem;">
|
||||
<summary class="subtitle is-6" style="cursor:pointer; outline:none;">Configured constraint values{% if configured_constraints %} ({{ configured_constraints|length }}){% endif %}</summary>
|
||||
<div style="margin-top:0.5rem;">
|
||||
<div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem;">
|
||||
<input id="constraint-filter-{{ rota.id }}" class="input is-small" type="search" placeholder="Filter constraints (key or value)..." aria-label="Filter constraints" />
|
||||
<button id="constraint-clear-{{ rota.id }}" class="button is-small is-light" type="button">Clear</button>
|
||||
<div class="field has-addons" style="margin-bottom:0.5rem;">
|
||||
<div class="control is-expanded"><input id="constraint-filter-{{ rota.id }}" class="input is-small" type="search" placeholder="Filter constraints (key or value)..." aria-label="Filter constraints" /></div>
|
||||
<div class="control"><button id="constraint-clear-{{ rota.id }}" class="button is-small is-light" type="button">Clear</button></div>
|
||||
</div>
|
||||
<div class="constraints-scroll" style="max-height:600px; overflow:auto; margin-bottom:0.75em;">
|
||||
{% if configured_constraints %}
|
||||
<table class="table is-fullwidth is-striped is-narrow" id="constraint-table-{{ rota.id }}">
|
||||
<thead><tr><th>Key</th><th>Value</th><th></th></tr></thead>
|
||||
<thead><tr><th>Key</th><th>Value</th><th class="has-text-right">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
{% for key, info in configured_constraints.items %}
|
||||
<tr id="constraint-row-{{ key }}">
|
||||
<td style="vertical-align:middle;"><code title="{{ info.description|default:'' }}">{{ key }}</code></td>
|
||||
<td style="vertical-align:middle; min-width:180px;"><code title="{{ info.description|default:'' }}">{{ key }}</code></td>
|
||||
<td style="vertical-align:middle;">
|
||||
{% if info.typed and info.default is not None %}
|
||||
{% if info.value == info.default %}
|
||||
@@ -83,7 +120,7 @@
|
||||
<pre style="white-space:pre-wrap; margin:0;">{{ info.pretty }}</pre>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="vertical-align:middle;">
|
||||
<td style="vertical-align:middle; text-align:right;">
|
||||
<a href="javascript:void(0)" class="button is-small is-light" role="button" hx-get="{% url 'rota:rota_option_edit' rota.id %}?key={{ key }}" hx-target="#modal" hx-swap="innerHTML">Edit</a>
|
||||
<form method="post" hx-post="{% url 'rota:rota_option_delete' rota.id %}" hx-target="#constraint-row-{{ key }}" hx-swap="outerHTML" style="display:inline">
|
||||
{% csrf_token %}
|
||||
|
||||
Reference in New Issue
Block a user