@saltcorn/reservable 0.1.4 → 0.2.1

package/index.js

@@ -105,6 +105,12 @@ const configuration_workflow = () =>
                   options: show_view_opts,
                 },
               },
+              {
+                name: "btn_columns",
+                label: "Button columns",
+                type: "Integer",
+                default: 1,
+              },
               new FieldRepeat({
                 name: "availability",
                 fields: [
@@ -254,7 +260,7 @@ const get_available_slots = async ({
       available_slots[i] = false;
     }
   });
-  return { available_slots, from, durGCD };
+  return { available_slots, from, durGCD, taken_slots };
 };
 
 const run = async (
@@ -266,6 +272,7 @@ const run = async (
     duration_field,
     availability,
     services,
+    btn_columns,
   },
   state,
   { req, res }
@@ -280,37 +287,44 @@ const run = async (
   }
 
   const date = state.day ? new Date(state.day) : new Date(); //todo from state
-  const { available_slots, from, durGCD } = await get_available_slots({
-    table,
-    availability,
-    date,
-    entity_wanted,
-    reservable_entity_key,
-    services,
-    start_field,
-    duration_field,
-  });
+  const { available_slots, from, durGCD, taken_slots } =
+    await get_available_slots({
+      table,
+      availability,
+      date,
+      entity_wanted,
+      reservable_entity_key,
+      services,
+      start_field,
+      duration_field,
+    });
   const minSlot = Math.min(...Object.keys(available_slots));
   const maxSlot = Math.max(...Object.keys(available_slots));
   const service_availabilities = services.map((service, serviceIx) => {
     const nslots = service.duration / durGCD;
     const availabilities = [];
     for (let i = minSlot; i <= maxSlot; i++) {
-      if (range(nslots, i).every((j) => available_slots[j])) {
-        const mins_since_midnight = i * durGCD;
-        const hour = Math.floor(mins_since_midnight / 60);
+      const mins_since_midnight = i * durGCD;
+      const hour = Math.floor(mins_since_midnight / 60);
 
-        const minute = mins_since_midnight - hour * 60;
-        const date1 = new Date(date);
-        date1.setHours(hour);
-        date1.setMinutes(minute);
-        date1.setSeconds(0);
-        date1.setMilliseconds(0);
-        if (date1 > new Date())
+      const minute = mins_since_midnight - hour * 60;
+      const date1 = new Date(date);
+      date1.setHours(hour);
+      date1.setMinutes(minute);
+      date1.setSeconds(0);
+      date1.setMilliseconds(0);
+      if (date1 > new Date())
+        if (range(nslots, i).every((j) => available_slots[j])) {
           availabilities.push({
             date: date1,
+            available: true,
           });
-      }
+        } else {
+          availabilities.push({
+            date: date1,
+            available: false,
+          });
+        }
     }
     //console.log({ availabilities, service });
     return { availabilities, service, serviceIx };
@@ -368,19 +382,24 @@ const run = async (
       )
     ),
     service_availabilities.map(({ availabilities, service, serviceIx }) =>
-      div(
+      ul(
         h3(service.title || `${service.duration} minutes`),
-        ul(
-          availabilities.map(({ date }) =>
-            reserve_btn({
-              viewname,
-              service,
-              date,
-              serviceIx,
-              req,
-              entity_wanted,
-              reservable_entity_key,
-            })
+        groupArray(availabilities, btn_columns || 1).map((gavail) =>
+          div(
+            gavail.map(({ date, available }) =>
+              reserve_btn({
+                viewname,
+                service,
+                date,
+                serviceIx,
+                req,
+                entity_wanted,
+                reservable_entity_key,
+                available,
+                state,
+                table,
+              })
+            )
           )
         )
       )
@@ -388,6 +407,17 @@ const run = async (
   );
 };
 
+//https://stackoverflow.com/a/74206554
+function groupArray(array, num) {
+  const group = [];
+
+  for (let i = 0; i < array.length; i += num) {
+    group.push(array.slice(i, i + num));
+  }
+
+  return group;
+}
+
 const reserve_btn = ({
   viewname,
   date,
@@ -396,26 +426,48 @@ const reserve_btn = ({
   req,
   reservable_entity_key,
   entity_wanted,
+  available,
+  state,
+  table,
 }) =>
-  form(
-    { action: `/view/${viewname}`, method: "post" },
-    input({ type: "hidden", name: "_csrf", value: req.csrfToken() }),
-    input({ type: "hidden", name: "date", value: date.toISOString() }),
-    input({ type: "hidden", name: "serviceIx", value: serviceIx }),
-    entity_wanted &&
-      input({
-        type: "hidden",
-        name: reservable_entity_key,
-        value: entity_wanted,
-      }),
-    input({ type: "hidden", name: "step", value: "getReservationForm" }),
+  available
+    ? form(
+        { action: `/view/${viewname}`, method: "post", class: "d-inline" },
+        input({ type: "hidden", name: "_csrf", value: req.csrfToken() }),
+        input({ type: "hidden", name: "date", value: date.toISOString() }),
+        input({ type: "hidden", name: "serviceIx", value: serviceIx }),
+        entity_wanted &&
+          input({
+            type: "hidden",
+            name: reservable_entity_key,
+            value: entity_wanted,
+          }),
+        table.fields
+          .filter((f) => f.name !== reservable_entity_key && state[f.name])
+          .map((f) =>
+            input({
+              type: "hidden",
+              name: f.name,
+              value: state[f.name],
+            })
+          ),
+        input({ type: "hidden", name: "step", value: "getReservationForm" }),
 
-    button(
-      { type: "submit", class: "btn btn-primary mt-2" },
-      localeTime(date)
-      //  `${hour}:${String(minute).padStart(2, "0")}`
-    )
-  );
+        button(
+          { type: "submit", class: "btn btn-primary mt-2 me-2" },
+          localeTime(date)
+          //  `${hour}:${String(minute).padStart(2, "0")}`
+        )
+      )
+    : button(
+        {
+          type: "button",
+          disabled: true,
+          class: "btn btn-secondary mt-2 me-2",
+        },
+        localeTime(date)
+        //  `${hour}:${String(minute).padStart(2, "0")}`
+      );
 const getReservationForm = async ({ table, viewname, config, body, req }) => {
   const {
     view_to_create,
@@ -431,7 +483,11 @@ const getReservationForm = async ({ table, viewname, config, body, req }) => {
   const form = await getForm(table, viewname, columns, layout, null, req);
   form.hidden(start_field, duration_field, "step");
   if (reservable_entity_key) form.hidden(reservable_entity_key);
-
+  table.fields
+    .filter((f) => f.name !== reservable_entity_key && body[f.name])
+    .forEach((f) => {
+      form.hidden(f.name);
+    });
   return form;
 };
 const makeReservation = async ({ table, viewname, config, body, req, res }) => {
@@ -501,7 +557,11 @@ const runPost = async (
       [config.reservable_entity_key]: +body[config.reservable_entity_key],
       step: "makeReservation",
     };
-
+    table.fields
+      .filter((f) => f.name !== config.reservable_entity_key && body[f.name])
+      .forEach((f) => {
+        form.values[f.name] = body[f.name];
+      });
     res.sendWrap(viewname, renderForm(form, req.csrfToken()));
   } else if (body.step === "makeReservation") {
     return await makeReservation({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/reservable",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "Reservable resources",
   "main": "index.js",
   "dependencies": {