/ forms / place.html
place.html
 1  {{#element.name}}
 2  <script>
 3      {
 4          const marker = L.places['{{.}}']
 5          if (marker) {
 6              L.activeMap.flyTo(marker.getLatLng())
 7          }
 8      }
 9  </script>
10  <form hx-patch="{{ element.address }}/place" ae-place-form enctype="multipart/form-data">
11  {{/element.name}}
12  {{^element.name}}
13  <form hx-post="place" ae-place-form enctype="multipart/form-data">
14  {{/element.name}}
15      <div class="row gtr-uniform">
16      	<div class="col-6 col-12-small">
17              <label for="name">Place Name</label>
18              <input name="name" type="text" value="{{ element.display_name }}" />
19          </div>
20      	<div class="col-6 col-12-small">
21              <label for="image">Update Place Photo</label>
22              <input name="image" type="file" accept="image/*" />
23          </div>
24      	<div class="col-12">
25              <label for="description">Description</label>
26              <textarea name="description" placeholder="A brief description">{{ element.properties.description }}</textarea>
27          </div>
28      	<div class="col-12">
29              <label for="hours">Hours of Operation <a href="https://wiki.openstreetmap.org/wiki/Key:opening_hours#Closed_on_holidays">(See Here For Formatting)</a></label>
30              <input name="hours" type="text" value="{{ element.properties.hours }}"/>
31          </div>
32      	<div class="col-12">
33              <label for="phone">Phone Number</label>
34              <input name="phone" type="tel" value="{{ element.properties.phone }}"/>
35          </div>
36      	<div class="col-12">
37              <label for="site">Website</label>
38              <input name="site" type="url" value="{{ element.properties.site }}"/>
39          </div>
40      	<div class="col-12">
41              <label for="email">E-mail</label>
42              <input name="email" type="email" value="{{ element.properties.email }}"/>
43          </div>
44      	<div class="col-6">
45              <label for="lng">Longitude</label>
46              <input name="lng" type="text" value="{{ element.longitude }}" ae-lng/>
47          </div>
48      	<div class="col-6">
49              <label for="lat">Latitude</label>
50              <input name="lat" type="text" value="{{ element.latitude }}" ae-lat/>
51          </div>
52      	<div class="col-12">
53              <ul class="actions">
54                  <li><button type="submit">Save</button></li>
55                  <li><button type="reset">Cancel</button></li>
56                  <li><button type="button" ae-update-latlng>Update Location</button></li>
57              </ul>
58          </div>
59      </div>
60  </form>
61  <script>
62      me('[ae-update-latlng]').on('click', (e) => updateLatLng(e))
63  </script>