Added form container for clock item

pandora_console/include/styles/visual_maps.css

@@ -51,7 +51,7 @@ input.vs_button_ghost {
   margin-top: 13px;
 }
 input.visual_editor_button_toolbox {
-  padding-right: 5px;
+  padding-right: 15px;
   padding-top: 10px;
   margin-top: 5px;
 }

visual_console_client/src/items/Clock/index.ts

@@ -13,9 +13,11 @@ import {
   prefixedCssRules,
   notEmptyStringOr,
   humanDate,
-  humanTime
+  humanTime,
+  t
 } from "../../lib";
 import Item, { ItemProps, itemBasePropsDecoder, ItemType } from "../../Item";
+import { InputGroup, FormContainer } from "../../Form";
 
 export type ClockProps = {
   type: ItemType.CLOCK;
@@ -614,4 +616,253 @@ export default class Clock extends Item<ClockProps> {
         throw new Error("invalid clock type.");
     }
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * DiameterInputGroup,
+   * MinValueInputGroup,
+   * MaxValueInputGroup,
+   * TypePercentileInputGroup,
+   * ValueToShowInputGroup,
+   * ElementColorInputGroup,
+   * ValueColorInputGroup,
+   * LabelPercentileInputGroup
+   * are removed:
+   * inputgrouplabel
+   * size
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    // Delete items groups.
+    formContainer.removeInputGroup("size");
+    formContainer.removeInputGroup("link");
+    formContainer.removeInputGroup("parent");
+    formContainer.removeInputGroup("acl-group");
+
+    formContainer.addInputGroup(
+      new ClockTypeInputGroup("ClockType", this.props)
+    );
+    formContainer.addInputGroup(
+      new ClockFormatInputGroup("clockFormat", this.props)
+    );
+
+    formContainer.addInputGroup(new WidthInputGroup("widthInput", this.props));
+
+    formContainer.addInputGroup(
+      new ClockTimezoneInputGroup("clockTimezone", this.props)
+    );
+
+    formContainer.addInputGroup(
+      new FIllColorInputGroup("fillColor", this.props)
+    );
+
+    return formContainer;
+  }
+}
+
+/**
+ * Class to add item to the clock item form
+ * This item consists of a label and a select.
+ * options for select: analogic, digital.
+ * Type is stored in the clock_animation property
+ */
+class ClockTypeInputGroup extends InputGroup<Partial<ClockProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const label = document.createElement("label");
+    label.textContent = t("Clock animation");
+
+    const options: {
+      value: ClockProps["clockType"];
+      text: string;
+    }[] = [
+      { value: "analogic", text: t("Simple analogic") },
+      { value: "digital", text: t("Simple digital") }
+    ];
+
+    const typeSelect = document.createElement("select");
+    typeSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      typeSelect.appendChild(optionElement);
+    });
+
+    typeSelect.value =
+      this.currentData.clockType || this.initialData.clockType || "analogic";
+
+    typeSelect.addEventListener("change", event => {
+      this.updateData({
+        clockType: parseClockType((event.target as HTMLSelectElement).value)
+      });
+    });
+
+    label.appendChild(typeSelect);
+
+    return label;
+  }
+}
+
+/**
+ * Class to add item to the clock item form
+ * This item consists of a label and a select.
+ * options for select: analogic, digital.
+ * Type is stored in the clock_animation property
+ */
+class ClockFormatInputGroup extends InputGroup<Partial<ClockProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const label = document.createElement("label");
+    label.textContent = t("Time format");
+
+    const options: {
+      value: ClockProps["clockFormat"];
+      text: string;
+    }[] = [
+      { value: "time", text: t("Only time") },
+      { value: "datetime", text: t("Time and date") }
+    ];
+
+    const typeSelect = document.createElement("select");
+    typeSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      typeSelect.appendChild(optionElement);
+    });
+
+    typeSelect.value =
+      this.currentData.clockFormat || this.initialData.clockFormat || "time";
+
+    typeSelect.addEventListener("change", event => {
+      this.updateData({
+        clockFormat: parseClockFormat((event.target as HTMLSelectElement).value)
+      });
+    });
+
+    label.appendChild(typeSelect);
+
+    return label;
+  }
+}
+
+/**
+ * Class to add item to the percentile item form
+ * This item consists of a label and a numeric type input.
+ * Diameter is stored in the width property
+ */
+class WidthInputGroup extends InputGroup<Partial<ClockProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const widthLabel = document.createElement("label");
+    widthLabel.textContent = t("Width");
+
+    const widthInput = document.createElement("input");
+    widthInput.type = "number";
+    widthInput.required = true;
+
+    widthInput.value = `${this.currentData.width || this.initialData.width}`;
+
+    widthInput.addEventListener("change", e => {
+      this.updateData({
+        width: parseIntOr((e.target as HTMLInputElement).value, 0)
+      });
+    });
+
+    widthLabel.appendChild(widthInput);
+
+    return widthLabel;
+  }
+}
+
+/**
+ * Class to add item to the clock item form
+ * This item consists of a label and two select.
+ * options for select: analogic, digital.
+ * Type is stored in the clock_animation property
+ */
+class ClockTimezoneInputGroup extends InputGroup<Partial<ClockProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const label = document.createElement("label");
+    label.textContent = t("Time zone");
+
+    const options: {
+      value: ClockProps["clockTimezone"];
+      text: string;
+    }[] = [
+      { value: "Africa", text: t("Africa") },
+      { value: "America", text: t("America") },
+      { value: "Antarctica", text: t("Antarctica") },
+      { value: "Arctic", text: t("Arctic") },
+      { value: "Asia", text: t("Asia") },
+      { value: "Atlantic", text: t("Atlantic") },
+      { value: "Australia", text: t("Australia") },
+      { value: "Europe", text: t("Europe") },
+      { value: "Indian", text: t("Indian") },
+      { value: "Pacific", text: t("Pacific") },
+      { value: "UTC", text: t("UTC") }
+    ];
+
+    const zoneSelect = document.createElement("select");
+    zoneSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      zoneSelect.appendChild(optionElement);
+    });
+
+    var timezone =
+      this.currentData.clockTimezone ||
+      this.initialData.clockTimezone ||
+      "Europe/Madrid";
+
+    const [zone, city = ""] = timezone.split("/");
+
+    zoneSelect.value = zone;
+
+    zoneSelect.addEventListener("change", event => {
+      // this.updateData({
+      //   clockTimezone: parseClockFormat(
+      //     (event.target as HTMLSelectElement).value
+      //   )
+      // });
+    });
+
+    label.appendChild(zoneSelect);
+
+    return label;
+  }
+}
+
+/**
+ * Class to add item to the clock item form
+ * This item consists of a label and a color type input.
+ * Element color is stored in the color property
+ */
+class FIllColorInputGroup extends InputGroup<Partial<ClockProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const fillcolorLabel = document.createElement("label");
+    fillcolorLabel.textContent = t("Fill color");
+
+    const fillColorInput = document.createElement("input");
+    fillColorInput.type = "color";
+    fillColorInput.required = true;
+
+    fillColorInput.value = `${this.currentData.color ||
+      this.initialData.color}`;
+
+    fillColorInput.addEventListener("change", e => {
+      this.updateData({
+        color: (e.target as HTMLInputElement).value
+      });
+    });
+
+    fillcolorLabel.appendChild(fillColorInput);
+
+    return fillcolorLabel;
+  }
 }