domma-cms 1.8.32 → 1.8.34

package/plugins/garage/admin/templates/garage.html

@@ -0,0 +1,86 @@
+<!-- Garage. Bound with M.applyBindings - see admin/views/garage.js, which also inserts the row templates
+     (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the plugin
+     banner above carries the name, version and licence, and the settings cog. -->
+<div class="gx">
+    <div class="gx-card">
+        <div class="gx-card-title">Look up a vehicle
+            <span data-help-title="Vehicle lookup" data-help="Type a UK registration and press Enter. The DVLA's Vehicle Enquiry Service answers with the make, colour, year, fuel, engine size and CO₂, and the MOT and road tax status with their dates. Every lookup is kept in History; save a vehicle to keep it in My Garage, where MOT and tax coming due show on the Garage badge in the sidebar. Lookups are rate-limited per user."></span>
+            <span class="gx-spacer"></span>
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="openSettings" data-bind-hidden="hasBanner" title="Garage settings">
+                <span data-icon="settings" data-icon-size="14"></span> Settings</button>
+        </div>
+        <p class="gx-alert" data-bind-hidden="!settingsLoaded.value || hasKey.value">
+            <span data-icon="alert-triangle" data-icon-size="16"></span>
+            No DVLA API key yet - lookups will fail until one is saved.
+            <button type="button" class="btn btn-sm btn-outline" data-on-click="openSettings">Add the key</button>
+        </p>
+        <div class="gx-lookup-bar">
+            <input type="text" class="gx-plate-input" placeholder="AB12 CDE" maxlength="10" autocomplete="off" spellcheck="false"
+                   aria-label="Registration number" data-model="reg.value">
+            <button type="button" class="btn btn-primary" data-on-click="lookup" data-bind-disabled="cannotLookUp.value">
+                <span data-icon="search" data-icon-size="14"></span> <span data-bind-text="lookupText.value">Look up</span></button>
+            <span class="gx-note" data-bind-text="rateNote.value"></span>
+        </div>
+        <p class="gx-note is-bad" data-bind-hidden="!lookupError.value" data-bind-text="lookupError.value"></p>
+
+        <div class="gx-result" data-bind-hidden="!result.value">
+            <div class="gx-result-head">
+                <span class="gx-plate is-big" data-bind-text="resultRow.value.reg"></span>
+                <strong data-bind-text="resultRow.value.title"></strong>
+                <span class="gx-chips">
+                    <span class="gx-chip" data-bind-class="resultRow.value.motTone" data-bind-text="resultRow.value.motText"></span>
+                    <span class="gx-chip" data-bind-class="resultRow.value.taxTone" data-bind-text="resultRow.value.taxText"></span>
+                </span>
+            </div>
+            <small class="gx-note" data-bind-text="resultRow.value.meta"></small>
+            <div class="gx-actions">
+                <button type="button" class="btn btn-sm" data-on-click="toggleResultSaved"
+                        data-bind-class="resultRow.value.saved ? 'btn-outline' : 'btn-success'" data-bind-disabled="resultSaving.value">
+                    <span data-bind-text="resultRow.value.saved ? 'Remove from My Garage' : 'Save to My Garage'"></span></button>
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="resultDetails">Details</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="tabs gx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">My Garage <span class="gx-count" data-bind-text="saved.value.length"></span></button>
+            <button type="button" class="tab-item">History <span class="gx-count" data-bind-text="history.value.length"></span></button>
+        </div>
+
+        <!-- My Garage -->
+        <div class="tab-panel active">
+            <div class="gx-card">
+                <div class="gx-bar">
+                    <div class="gx-seg" role="group" aria-label="Show">
+                        <button type="button" data-on-click="showAll" data-bind-class="filter.value === 'all' && 'is-on'">All <b data-bind-text="saved.value.length"></b></button>
+                        <button type="button" data-on-click="showAttention" data-bind-class="filter.value === 'attention' && 'is-on'">Needs attention <b data-bind-text="attentionCount.value"></b></button>
+                    </div>
+                    <input type="search" class="form-input gx-search" placeholder="Search registration, make, colour…" aria-label="Search My Garage" data-model="garageQuery.value">
+                    <span data-help-title="My Garage" data-help="The vehicles you saved, the ones needing something first: red when the MOT has expired or the tax has run out, amber when either is due within 30 days, or the vehicle is SORN. Click one for its details; right-click it (or ⋮, or Shift+F10) to look it up again for fresh DVLA data, copy its registration, take it out of your garage or delete it. The dates are as the DVLA had them at the last lookup."></span>
+                </div>
+                <div class="gx-note gx-loading" data-bind-hidden="!loading.value">Loading…</div>
+                <p class="gx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+                <p class="gx-note" data-bind-hidden="loading.value || loadError.value || garageRows.value.length" data-bind-text="garageEmpty.value"></p>
+                <div class="gx-list gx-garage" data-each="garageRows.value key=id"></div>
+            </div>
+        </div>
+
+        <!-- History -->
+        <div class="tab-panel">
+            <div class="gx-card">
+                <div class="gx-bar">
+                    <input type="search" class="form-input gx-search" placeholder="Search history…" aria-label="Search history" data-model="historyQuery.value">
+                    <span data-help-title="History" data-help="Every vehicle you have looked up, newest first. Looking one up again updates it in place. The oldest lookups you have not saved are dropped once the history passes its limit; Clear unsaved removes them all now - saved vehicles are never touched."></span>
+                    <span class="gx-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-outline" data-on-click="clearUnsaved" data-bind-disabled="!unsavedCount.value">
+                        <span data-icon="trash" data-icon-size="14"></span> Clear unsaved <b data-bind-text="unsavedCount.value"></b></button>
+                </div>
+                <div class="gx-note gx-loading" data-bind-hidden="!loading.value">Loading…</div>
+                <p class="gx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+                <p class="gx-note" data-bind-hidden="loading.value || loadError.value || historyRows.value.length" data-bind-text="historyEmpty.value"></p>
+                <div class="gx-list gx-history" data-each="historyRows.value key=id"></div>
+            </div>
+        </div>
+    </div>
+</div>