Allow opening a booking or creating a new from the booking grid

I wanted to use a regular <a>, but apparently rendering that many
anchors is too resource-intensive for Firefox, and it is noticeably
slower.  It was even worse, in fact, because i had to have different
content for the main grid and the grid show in the new booking form,
as i did not want to have these links there, and had call a template for
each cell: 3 months × ~30 days × ~100 campsites = 9000 calls!

Using JavaScript for that is shameful, but it does not add much to the
existing markup, and no need for template fuckery.

I am using double-click to follow these links, instead of single click,
because it would be too easy to misclik on the grid, but that forced me
to add `user-select: none` to prevent the selection of text when double-
clicking.

pkg/booking/campsite.go

@@ -71,12 +71,14 @@ type CampsiteEntry struct {
 	ID       int
 	Label    string
 	Type     string
+	TypeSlug string
 	Active   bool
 	Selected bool
 	Bookings map[time.Time]*CampsiteBooking
 }
 
 type CampsiteBooking struct {
+	URL    string
 	Holder string
 	Status string
 	Nights int
@@ -89,6 +91,7 @@ func CollectCampsiteEntries(ctx context.Context, company *auth.Company, conn *da
 		select campsite_id
              , campsite.label
 		     , campsite_type.name
+		     , campsite_type.slug
 		     , campsite.active
 		from campsite
 		join campsite_type using (campsite_type_id)
@@ -104,7 +107,7 @@ func CollectCampsiteEntries(ctx context.Context, company *auth.Company, conn *da
 	var campsites []*CampsiteEntry
 	for rows.Next() {
 		entry := &CampsiteEntry{}
-		if err = rows.Scan(&entry.ID, &entry.Label, &entry.Type, &entry.Active); err != nil {
+		if err = rows.Scan(&entry.ID, &entry.Label, &entry.Type, &entry.TypeSlug, &entry.Active); err != nil {
 			return nil, err
 		}
 		campsites = append(campsites, entry)
@@ -122,6 +125,7 @@ func collectCampsiteBookings(ctx context.Context, company *auth.Company, conn *d
 	rows, err := conn.Query(ctx, `
 		select campsite.label
 		     , lower(booking_campsite.stay * daterange($2::date, $3::date))
+		     , '/admin/bookings/' || booking.slug
 		     , holder_name
 		     , booking_status
 			 , upper(booking_campsite.stay * daterange($2::date, $3::date)) - lower(booking_campsite.stay * daterange($2::date, $3::date))
@@ -142,7 +146,7 @@ func collectCampsiteBookings(ctx context.Context, company *auth.Company, conn *d
 		entry := &CampsiteBooking{}
 		var label string
 		var date time.Time
-		if err = rows.Scan(&label, &date, &entry.Holder, &entry.Status, &entry.Nights, &entry.Begin, &entry.End); err != nil {
+		if err = rows.Scan(&label, &date, &entry.URL, &entry.Holder, &entry.Status, &entry.Nights, &entry.Begin, &entry.End); err != nil {
 			return err
 		}
 		campsite := campsites[label]

web/static/camper.css

@@ -832,6 +832,7 @@ label[x-show] > span, label[x-show] > br {
 
 #campsites-booking tbody td {
     position: relative;
+    user-select: none;
 }
 
 #campsites-booking tbody div {

web/templates/admin/booking/grid.gohtml

@@ -1,10 +1,12 @@
+{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/booking.adminBookingForm */ -}}
 <div id="campsites-booking">
     <table>
         <colgroup></colgroup>
         {{ range .Months }}
             <colgroup>
                 {{ range .Spans }}
-                    <col span="{{ .Count }}" class="{{ if .Today}}today {{ end }}{{ if .Weekend }}weekend{{ else }}weekday{{ end }}">
+                    <col span="{{ .Count }}"
+                         class="{{ if .Today}}today {{ end }}{{ if .Weekend }}weekend{{ else }}weekday{{ end }}">
                 {{- end }}
             </colgroup>
         {{- end }}
@@ -12,7 +14,8 @@
         <tr>
             <th scope="col" rowspan="2">{{( pgettext "Label" "header" )}}</th>
             {{ range .Months }}
-                <th scope="col" style="--days: {{ len .Days }}" colspan="{{ len .Days }}">{{ pgettext .Name "month" }} {{ .Year }}</th>
+                <th scope="col" style="--days: {{ len .Days }}"
+                    colspan="{{ len .Days }}">{{ pgettext .Name "month" }} {{ .Year }}</th>
             {{- end }}
         </tr>
         <tr>
@@ -36,10 +39,11 @@
                                 <div class="booking-status"
                                      style="--booking-nights: {{ .Nights }}; --booking-begin: {{ if .Begin }}1{{ else }}0{{ end }}; --booking-end: {{ if .End }}1{{ else }}0{{ end }}"
                                      title="{{ .Holder }}"
+                                     data-booking-uri="{{ .URL }}"
                                 >{{ .Holder }}</div>
                             </td>
                         {{- else -}}
-                            <td></td>
+                            <td data-booking-uri="/admin/bookings/new?campsite_type={{ $campsite.TypeSlug }}&amp;arrival_date={{ formatDateAttr $day }}"></td>
                         {{- end }}
                     {{- end }}
                 {{- end }}

web/templates/admin/campsite/index.gohtml

@@ -42,6 +42,17 @@
     {{ else -}}
         <p>{{( gettext "No campsites added yet." )}}</p>
     {{- end }}
+
+    <script>
+        (function () {
+            function follow(e) {
+                e.preventDefault();
+                location.assign(e.target.dataset.bookingUri);
+            }
+
+            document.querySelectorAll('[data-booking-uri]').forEach((e) => e.addEventListener('dblclick', follow));
+        })();
+    </script>
 {{- end }}
 
 {{ define "campsite-heading" -}}