localeye.cam

← Back

templates/map.html

floor_plan version 1.0 · 4 KB

1{% extends "base.html" %}{% block title %}Map - {{ brand }}{% endblock %}
2{% block head %}<link rel="stylesheet" href="/x/{{ module_id }}/static/map.css?v={{ version }}">{% endblock %}
3{% block content %}
4<div class="page-head">
5 <div><h1>Map</h1><p id="wmLead">Click an area or a camera to watch it</p></div>
6 <div class="toolbar">
7 <select id="mapPick" aria-label="Which map" hidden></select>
8 {% if can_edit %}
9 <button class="btn secondary" id="mapNew" type="button">+ New map</button>
10 <button class="btn" id="editToggle" type="button" hidden>✎ Edit map</button>
11 {% endif %}
12 </div>
13</div>
14
15<div class="card wm-empty" id="wmEmpty" hidden></div>
16
17<div class="wm-layout" id="wmLayout" hidden>
18 <div class="wm-main">
19 {% if can_edit %}
20 <div class="wm-tools" id="wmTools" hidden>
21 <div class="wm-toolgroup" role="group" aria-label="Tools">
22 <button class="btn secondary small on" type="button" data-tool="select" title="Pick, move and reshape things (drag empty space to move the map)">↖ Select</button>
23 <button class="btn secondary small" type="button" data-tool="rect" title="Drag a rectangle: a room, aisle or area">▭ Area</button>
24 <button class="btn secondary small" type="button" data-tool="poly" title="Click each corner of an odd-shaped area, then click the first corner (or Finish)">⬠ Shape</button>
25 <button class="btn secondary small" type="button" data-tool="camera" title="Click where a camera is mounted">📷 Camera</button>
26 </div>
27 <div class="wm-toolgroup">
28 <button class="btn secondary small" type="button" id="undoBtn" disabled title="Undo (Ctrl+Z)">↶ Undo</button>
29 <button class="btn secondary small" type="button" id="delBtn" disabled title="Delete what's picked (Delete key)">🗑 Delete</button>
30 <label class="wm-snap" title="Corners and edges snap to other areas' edges, the map's border and the grid. Hold Alt to place freely."><input type="checkbox" id="snapOn"> Snap</label>
31 </div>
32 <div class="wm-toolgroup">
33 <label class="btn secondary small" title="A picture of the floor plan: PNG, JPEG or WebP (export a PDF or drawing as a picture first)">🖼 Floor plan…
34 <input type="file" id="planFile" accept="image/png,image/jpeg,image/webp" hidden></label>
35 <button class="btn secondary small" type="button" id="planRemove" hidden>Remove plan</button>
36 </div>
37 <span class="wm-grow"></span>
38 <span class="muted small" id="dirtyNote"></span>
39 <button class="btn" type="button" id="saveBtn" disabled title="Save (Ctrl+S)">Save</button>
40 </div>
41 {% endif %}
42 <div class="wm-stage" id="wmStage">
43 <svg id="wmSvg" class="wm-svg" role="img" aria-label="Map of the building"></svg>
44 <div class="wm-zoom">
45 <button class="btn secondary small" type="button" id="zIn" title="Zoom in" aria-label="Zoom in">+</button>
46 <button class="btn secondary small" type="button" id="zOut" title="Zoom out" aria-label="Zoom out">−</button>
47 <button class="btn secondary small" type="button" id="zFit" title="Whole map" aria-label="Whole map">⤢</button>
48 </div>
49 <div class="wm-hint" id="wmHint" hidden></div>
50 </div>
51 </div>
52 <aside class="wm-side card" id="wmSide"></aside>
53</div>
54
55<div class="wm-modal" id="wmModal" hidden>
56 <div class="wm-modal-box card" role="dialog" aria-modal="true" aria-labelledby="wmModalTitle">
57 <div class="wm-modal-head">
58 <div><h2 id="wmModalTitle"></h2><div class="muted small" id="wmModalSub"></div></div>
59 <button class="btn secondary small" type="button" id="wmModalClose" aria-label="Close">✕</button>
60 </div>
61 <div class="wm-tiles" id="wmTiles"></div>
62 <div class="wm-attime">
63 <label>Recordings at <input type="datetime-local" id="wmAt" step="1"></label>
64 <span class="muted small">each camera's ⏵ Recording opens that moment</span>
65 </div>
66 </div>
67</div>
68{% endblock %}
69{% block scripts %}
70<script src="{{ url_for('static', filename='js/live.js', v=asset_v) }}"></script>
71<script>window.WM = {{ {"id": module_id, "canEdit": can_edit} | tojson }};</script>
72<script src="/x/{{ module_id }}/static/map.js?v={{ version }}"></script>
73{% endblock %}