Merge pull request #253 from os2display/feature/rrule-adjustments-v2

Playlist scheduling adjustments

CHANGELOG.md

@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#253](https://github.com/os2display/display-admin-client/pull/253)
+  - Refactored scheduling to increase user experience.
+  - Added interval and count to rrule inputs.
 - [#249](https://github.com/os2display/display-admin-client/pull/249)
   - Set infrastructure node version to 20.
   - Fixed base path to /admin in vite setup.

package.json

@@ -41,6 +41,7 @@
     "react-select": "^5.2.2",
     "react-table": "^7.7.0",
     "react-toastify": "^10.0.0",
+    "react-tooltip": "^5.28.0",
     "rrule": "^2.7.2",
     "typescript": "^4.4.2",
     "ulid": "^2.3.0",

src/components/util/forms/form-input.jsx

@@ -2,6 +2,7 @@ import { React } from "react";
 import PropTypes from "prop-types";
 import { FormControl, FormGroup, FormLabel, InputGroup } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import Tooltip from "../tooltip";
 
 /**
  * An input for forms.
@@ -19,6 +20,7 @@ import { useTranslation } from "react-i18next";
  * @param {string} props.formGroupClasses Classes for the form group
  * @param {boolean} props.disabled If the input is disabled
  * @param {boolean} props.required If the input is required
+ * @param {string | null} props.tooltip Tooltip text. Does not display if null.
  * @param {object | null} props.inputGroupExtra Extra elements for input group.
  * @returns {object} An input.
  */
@@ -36,19 +38,23 @@ function FormInput({
   label = null,
   inputGroupExtra = null,
   required = false,
+  tooltip = null,
   ...rest
 }) {
   const { t } = useTranslation("common");
   const invalidInputText = invalidText || t("form-input.validation-text");
   /* eslint-disable react/jsx-props-no-spreading */
   return (
     <FormGroup className={formGroupClasses}>
-      {label && (
+      {label && (<>
         <FormLabel htmlFor={name}>
           {label}
           {required && " *"}
         </FormLabel>
-      )}
+        {tooltip !== null && (
+          <Tooltip id={`tooltip-${name}`} content={tooltip} />
+        )}
+      </>)}
       <InputGroup hasValidation>
         <FormControl
           name={name}
@@ -84,6 +90,7 @@ FormInput.propTypes = {
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   inputGroupExtra: PropTypes.node,
+  tooltip: PropTypes.string,
 };
 
 export default FormInput;

src/components/util/forms/select.jsx

@@ -2,6 +2,9 @@ import { React, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { FormGroup } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
+import {Tooltip} from "react-tooltip";
 
 /**
  * @param {object} props The props.
@@ -16,6 +19,7 @@ import { useTranslation } from "react-i18next";
  * @param {string} props.formGroupClasses The classes for the form-group element.
  * @param {boolean} props.isRequired If the select is required.
  * @param {boolean} props.allowNull Add null option.
+ * @param {string | null} props.tooltip Tooltip text. Does not display if null.
  * @returns {object} The select component.
  */
 function Select({
@@ -30,6 +34,7 @@ function Select({
   formGroupClasses = "",
   isRequired = false,
   allowNull = true,
+  tooltip = null,
 }) {
   const { t } = useTranslation("common");
   const textOnError = errorText || t("select.validation-text");
@@ -61,6 +66,16 @@ function Select({
         {label}
         {required && " *"}
       </label>
+      {tooltip !== null && (
+        <>
+          <a data-tooltip-id={`tooltip-${name}`}> <FontAwesomeIcon icon={faQuestionCircle} className="text-black-50" /></a>
+          <Tooltip
+            id={`tooltip-${name}`}
+            openOnClick={true}
+            content={tooltip}
+          />
+        </>
+      )}
       <select
         className={classes}
         required={isRequired}

src/components/util/schedule/schedule-util.js

@@ -11,8 +11,6 @@ dayjs.extend(localizedFormat);
 /**
  * Get rrule string from schedule.
  *
- *
- *
  * @param {object} schedule - The schedule.
  * @returns {string} - RRule string.
  */
@@ -33,7 +31,9 @@ const getRruleString = (schedule) => {
     wkst: schedule.wkst ?? RRule.MO,
     freq: schedule.freq,
     dtstart: schedule.dtstart,
+    count: schedule.count,
     until: schedule.until,
+    interval: schedule.interval,
     byhour: schedule.byhour,
     byminute: schedule.byminute,
     bysecond,
@@ -56,8 +56,10 @@ const createNewSchedule = () => {
 
   const newSchedule = {
     id: ulid(nowTimestamp),
-    duration: 60 * 60 * 24, // Default one day.
-    freq: RRule.WEEKLY,
+    duration: 60 * 60, // Default 1 hour.
+    freq: RRule.DAILY,
+    count: 1,
+    interval: null,
     // For evaluation with the RRule library we pretend that "now" is in UTC instead of the local timezone.
     // That is 9:00 in Europe/Copenhagen time will be evaluated as if it was 9:00 in UTC.
     // @see https://github.com/jkbrzt/rrule#important-use-utc-dates
@@ -121,10 +123,11 @@ const createScheduleFromRRule = (id, duration, rruleString) => {
  * Get array of count occurrences of rrule.
  *
  * @param {RRule} rrule - The rrule.
- * @param {number | null} count - The max number of occurrences.
+ * @param {number} duration - The duration of an occurrence in seconds.
+ * @param {number} count - The max number of occurrences.
  * @returns {Array} - The occurrences.
  */
-const getNextOccurrences = (rrule, count = 5) => {
+const getNextOccurrences = (rrule, duration = 0, count = 5) => {
   const occurrences = [];
 
   const newRrule = new RRule(rrule.origOptions);
@@ -133,6 +136,7 @@ const getNextOccurrences = (rrule, count = 5) => {
     occurrences.push({
       key: `occurrence${occurrences.length}`,
       text: dayjs(d).utc().locale("da").format("LLLL"),
+      end: dayjs(d).utc().add(duration, 'second').locale("da").format("LLLL"),
     });
     return true;
   });
@@ -156,12 +160,6 @@ const getFreqOptions = (t) => {
     },
     { title: t("schedule.weekly"), value: RRule.WEEKLY, key: "rrule.weekly" },
     { title: t("schedule.daily"), value: RRule.DAILY, key: "rrule.daily" },
-    { title: t("schedule.hourly"), value: RRule.HOURLY, key: "rrule.hourly" },
-    {
-      title: t("schedule.minutely"),
-      value: RRule.MINUTELY,
-      key: "rrule.minutely",
-    },
   ];
 };