149 lines
7.3 KiB
HTML
149 lines
7.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ title }}{% endblock %}
|
|
{% block page_title %}{{ title }}{% endblock %}
|
|
|
|
{% block topbar_actions %}
|
|
<a href="{{ url_for('utilities.providers') }}" class="btn btn-sm btn-outline-secondary" style="font-size:12px;">← Providers</a>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-8 col-lg-6">
|
|
<div class="pcard">
|
|
<form method="POST" novalidate>
|
|
{{ form.hidden_tag() }}
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-12 col-sm-7">
|
|
{{ form.name.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.name(class="form-control" + (" is-invalid" if form.name.errors else ""), placeholder="e.g. Pacific Gas & Electric") }}
|
|
{% for e in form.name.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
|
|
</div>
|
|
<div class="col-12 col-sm-5">
|
|
{{ form.utility_type.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.utility_type(class="form-select", id="typeSelect") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-12 col-sm-7">
|
|
{{ form.account_number.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.account_number(class="form-control", placeholder="Customer / meter account no.") }}
|
|
</div>
|
|
<div class="col-6 col-sm-5">
|
|
{{ form.billing_day.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.billing_day(class="form-control", type="number", min=1, max=31, placeholder="Day of month") }}
|
|
<small class="text-muted" style="font-size:11px;">Day the bill usually arrives</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
{{ form.usage_unit.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.usage_unit(class="form-control", id="unitInput", placeholder="kWh, m³, GB — leave blank for no usage tracking") }}
|
|
<small class="text-muted" style="font-size:11px;">Bills for this provider will record consumption in this unit.</small>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-12 col-sm-6">
|
|
{{ form.default_account_id.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.default_account_id(class="form-select") }}
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
{{ form.category_id.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.category_id(class="form-select") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
{{ form.notes.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.notes(class="form-control", rows=2, placeholder="Plan details, contract end date, support number…") }}
|
|
</div>
|
|
|
|
<!-- Color -->
|
|
<div class="mb-3">
|
|
<label class="form-label fw-medium" style="font-size:13px;">Color</label>
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
{% for c in colors %}
|
|
<label style="cursor:pointer;">
|
|
<input type="radio" name="color" value="{{ c }}" style="display:none;" {% if (provider and provider.color==c) or (not provider and loop.first) %}checked{% endif %}>
|
|
<div style="width:26px;height:26px;border-radius:50%;background:{{ c }};border:3px solid transparent;" class="color-swatch" data-color="{{ c }}"></div>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{{ form.color(type="hidden", id="colorInput") }}
|
|
</div>
|
|
|
|
<!-- Icon -->
|
|
<div class="mb-4">
|
|
<label class="form-label fw-medium" style="font-size:13px;">Icon</label>
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
{% for icon_val in icons %}
|
|
<label style="cursor:pointer;">
|
|
<input type="radio" name="icon" value="{{ icon_val }}" style="display:none;" {% if provider and provider.icon==icon_val %}checked{% elif not provider and loop.first %}checked{% endif %}>
|
|
<div style="width:34px;height:34px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid transparent;" class="icon-swatch">
|
|
<i class="bi {{ icon_val }}"></i>
|
|
</div>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{{ form.icon(type="hidden", id="iconInput") }}
|
|
</div>
|
|
|
|
<div class="d-flex gap-2">
|
|
{{ form.submit(class="btn btn-primary") }}
|
|
<a href="{{ url_for('utilities.providers') }}" class="btn btn-outline-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Suggest a usage unit + color/icon when the utility type changes (new providers only)
|
|
const TYPE_DEFAULTS = {{ type_defaults | tojson }};
|
|
const isNew = {{ 'false' if provider else 'true' }};
|
|
|
|
document.getElementById('typeSelect').addEventListener('change', function () {
|
|
const d = TYPE_DEFAULTS[this.value];
|
|
if (!d) return;
|
|
const unit = document.getElementById('unitInput');
|
|
if (isNew || !unit.value) unit.value = d.unit;
|
|
if (isNew) {
|
|
document.getElementById('colorInput').value = d.color;
|
|
document.getElementById('iconInput').value = d.icon;
|
|
document.querySelectorAll('.color-swatch').forEach(function (s) {
|
|
const on = s.dataset.color.toLowerCase() === d.color.toLowerCase();
|
|
s.style.borderColor = on ? '#fff' : 'transparent';
|
|
s.style.outline = on ? '2px solid ' + d.color : 'none';
|
|
});
|
|
document.querySelectorAll('.icon-swatch').forEach(function (s) {
|
|
const on = s.querySelector('i').className.indexOf(d.icon) !== -1;
|
|
s.style.background = on ? '#dbeafe' : '#f1f5f9';
|
|
s.style.borderColor = on ? '#3b82f6' : 'transparent';
|
|
});
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.color-swatch').forEach(function (sw) {
|
|
const inp = sw.closest('label').querySelector('input');
|
|
inp.addEventListener('change', function () {
|
|
document.getElementById('colorInput').value = this.value;
|
|
document.querySelectorAll('.color-swatch').forEach(s => { s.style.borderColor='transparent'; s.style.outline='none'; });
|
|
sw.style.borderColor='#fff'; sw.style.outline='2px solid '+this.value;
|
|
});
|
|
if (inp.checked) { sw.style.borderColor='#fff'; sw.style.outline='2px solid '+sw.dataset.color; document.getElementById('colorInput').value=sw.dataset.color; }
|
|
});
|
|
document.querySelectorAll('.icon-swatch').forEach(function (sw) {
|
|
const inp = sw.closest('label').querySelector('input');
|
|
inp.addEventListener('change', function () {
|
|
document.getElementById('iconInput').value = this.value;
|
|
document.querySelectorAll('.icon-swatch').forEach(s => { s.style.background='#f1f5f9'; s.style.borderColor='transparent'; });
|
|
sw.style.background='#dbeafe'; sw.style.borderColor='#3b82f6';
|
|
});
|
|
if (inp.checked) { sw.style.background='#dbeafe'; sw.style.borderColor='#3b82f6'; document.getElementById('iconInput').value=inp.value; }
|
|
});
|
|
</script>
|
|
{% endblock %}
|