247 lines
8.7 KiB
HTML
247 lines
8.7 KiB
HTML
|
{% extends "admin/layout.html" %}
|
||
|
|
{% let active_page = "schedule" %}
|
||
|
|
|
||
|
|
{% block title %}{{ t.schedule_new_title }}{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="page-head">
|
||
|
|
<h1>{{ t.schedule_new_title }}</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-card">
|
||
|
|
<form method="post" action="/admin/schedule/create" id="visitForm">
|
||
|
|
<!-- Client -->
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">{{ t.schedule_client }}</label>
|
||
|
|
<div class="control">
|
||
|
|
<div class="select is-fullwidth">
|
||
|
|
<select name="client_id" required>
|
||
|
|
<option value="">—</option>
|
||
|
|
{% for c in &clients %}
|
||
|
|
<option value="{{ c.id }}">{{ c.name }}{% if let Some(p) = c.phone.as_deref() %} ({{ p }}){% endif %}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Admin -->
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">{{ t.schedule_admin }}</label>
|
||
|
|
<div class="control">
|
||
|
|
<div class="select is-fullwidth">
|
||
|
|
<select name="user_id">
|
||
|
|
{% for u in &users %}
|
||
|
|
<option value="{{ u.id }}" {% if u.id.unwrap() == current_user_id %}selected{% endif %}>
|
||
|
|
{{ u.display_name.as_deref().unwrap_or(&u.login) }}
|
||
|
|
</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Default time -->
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">{{ t.schedule_default_time }}</label>
|
||
|
|
<div class="columns is-mobile" style="margin-bottom:0;">
|
||
|
|
<div class="column">
|
||
|
|
<div class="control">
|
||
|
|
<input class="input" type="time" id="defaultStart" value="18:00">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<div class="control">
|
||
|
|
<input class="input" type="time" id="defaultEnd" value="19:00">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Add individual date -->
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">{{ t.schedule_pick_dates }}</label>
|
||
|
|
<div class="columns is-mobile" style="margin-bottom:0;">
|
||
|
|
<div class="column">
|
||
|
|
<div class="control">
|
||
|
|
<input class="input" type="date" id="pickDate">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="column is-narrow">
|
||
|
|
<button type="button" class="button is-info" id="addDateBtn">+</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Date range fill -->
|
||
|
|
<div class="field">
|
||
|
|
<label class="label is-small has-text-grey">{{ t.schedule_range_from }} — {{ t.schedule_range_to }}</label>
|
||
|
|
<div class="columns is-mobile" style="margin-bottom:0;">
|
||
|
|
<div class="column">
|
||
|
|
<input class="input" type="date" id="rangeFrom">
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<input class="input" type="date" id="rangeTo">
|
||
|
|
</div>
|
||
|
|
<div class="column is-narrow">
|
||
|
|
<button type="button" class="button is-info is-outlined" id="fillRangeBtn">{{ t.schedule_fill_range }}</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Selected days list -->
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">{{ t.schedule_selected_days }}</label>
|
||
|
|
<div id="daysList">
|
||
|
|
<p class="has-text-grey is-size-7" id="noDaysMsg">{{ t.schedule_no_days }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Notes -->
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">{{ t.schedule_notes }}</label>
|
||
|
|
<div class="control">
|
||
|
|
<textarea class="textarea" name="notes" rows="2"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Hidden days data -->
|
||
|
|
<input type="hidden" name="days_json" id="daysJson" value="[]">
|
||
|
|
|
||
|
|
<button type="submit" class="button is-primary is-fullwidth" id="submitBtn" disabled>{{ t.schedule_create }}</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.day-row {
|
||
|
|
display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0;
|
||
|
|
border-bottom: 1px solid #f0f0f0; flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.day-row .day-date { font-weight: 600; min-width: 6rem; font-size: 0.9rem; }
|
||
|
|
.day-row input[type="time"] { width: 7rem; padding: 0.2rem 0.4rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.85rem; }
|
||
|
|
.day-row .remove-btn { color: #e55; cursor: pointer; font-size: 0.8rem; margin-left: auto; background: none; border: none; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const days = new Map(); // date string -> {start, end}
|
||
|
|
const removeLabel = '{{ t.schedule_remove_day }}';
|
||
|
|
const weekdays = '{{ lang.code() }}' === 'ru'
|
||
|
|
? ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
|
||
|
|
: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
|
||
|
|
|
||
|
|
function getDefaults() {
|
||
|
|
return {
|
||
|
|
start: document.getElementById('defaultStart').value || '18:00',
|
||
|
|
end: document.getElementById('defaultEnd').value || '19:00'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function addDay(dateStr) {
|
||
|
|
if (!dateStr || days.has(dateStr)) return;
|
||
|
|
const def = getDefaults();
|
||
|
|
days.set(dateStr, { start: def.start, end: def.end });
|
||
|
|
renderDays();
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeDay(dateStr) {
|
||
|
|
days.delete(dateStr);
|
||
|
|
renderDays();
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderDays() {
|
||
|
|
const list = document.getElementById('daysList');
|
||
|
|
const msg = document.getElementById('noDaysMsg');
|
||
|
|
const btn = document.getElementById('submitBtn');
|
||
|
|
|
||
|
|
// Remove old day rows
|
||
|
|
list.querySelectorAll('.day-row').forEach(el => el.remove());
|
||
|
|
|
||
|
|
if (days.size === 0) {
|
||
|
|
msg.style.display = '';
|
||
|
|
btn.disabled = true;
|
||
|
|
document.getElementById('daysJson').value = '[]';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
msg.style.display = 'none';
|
||
|
|
btn.disabled = false;
|
||
|
|
|
||
|
|
// Sort by date
|
||
|
|
const sorted = [...days.entries()].sort((a, b) => a[0].localeCompare(b[0]));
|
||
|
|
|
||
|
|
sorted.forEach(([dateStr, times]) => {
|
||
|
|
const d = new Date(dateStr + 'T00:00:00');
|
||
|
|
const wd = weekdays[d.getDay()];
|
||
|
|
const label = dateStr.split('-').reverse().join('.') + ' ' + wd;
|
||
|
|
|
||
|
|
const row = document.createElement('div');
|
||
|
|
row.className = 'day-row';
|
||
|
|
row.innerHTML = `
|
||
|
|
<span class="day-date">${label}</span>
|
||
|
|
<input type="time" value="${times.start}" data-date="${dateStr}" data-field="start">
|
||
|
|
<span>—</span>
|
||
|
|
<input type="time" value="${times.end}" data-date="${dateStr}" data-field="end">
|
||
|
|
<button type="button" class="remove-btn" data-date="${dateStr}">${removeLabel}</button>
|
||
|
|
`;
|
||
|
|
list.appendChild(row);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update hidden JSON
|
||
|
|
updateJson();
|
||
|
|
|
||
|
|
// Bind events
|
||
|
|
list.querySelectorAll('input[type="time"]').forEach(inp => {
|
||
|
|
inp.addEventListener('change', function() {
|
||
|
|
const dt = this.dataset.date;
|
||
|
|
const field = this.dataset.field;
|
||
|
|
if (days.has(dt)) {
|
||
|
|
days.get(dt)[field] = this.value;
|
||
|
|
updateJson();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
list.querySelectorAll('.remove-btn').forEach(btn => {
|
||
|
|
btn.addEventListener('click', function() {
|
||
|
|
removeDay(this.dataset.date);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateJson() {
|
||
|
|
const arr = [...days.entries()].map(([date, t]) => ({
|
||
|
|
date: date,
|
||
|
|
time_start: t.start,
|
||
|
|
time_end: t.end
|
||
|
|
}));
|
||
|
|
document.getElementById('daysJson').value = JSON.stringify(arr);
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('addDateBtn').addEventListener('click', function() {
|
||
|
|
const v = document.getElementById('pickDate').value;
|
||
|
|
addDay(v);
|
||
|
|
document.getElementById('pickDate').value = '';
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('pickDate').addEventListener('keydown', function(e) {
|
||
|
|
if (e.key === 'Enter') { e.preventDefault(); document.getElementById('addDateBtn').click(); }
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('fillRangeBtn').addEventListener('click', function() {
|
||
|
|
const from = document.getElementById('rangeFrom').value;
|
||
|
|
const to = document.getElementById('rangeTo').value;
|
||
|
|
if (!from || !to || from > to) return;
|
||
|
|
let cur = new Date(from + 'T00:00:00');
|
||
|
|
const end = new Date(to + 'T00:00:00');
|
||
|
|
while (cur <= end) {
|
||
|
|
const ds = cur.toISOString().slice(0, 10);
|
||
|
|
addDay(ds);
|
||
|
|
cur.setDate(cur.getDate() + 1);
|
||
|
|
}
|
||
|
|
document.getElementById('rangeFrom').value = '';
|
||
|
|
document.getElementById('rangeTo').value = '';
|
||
|
|
});
|
||
|
|
|
||
|
|
// Set default pick date to today
|
||
|
|
document.getElementById('pickDate').valueAsDate = new Date();
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|