[O2B-1502] Add Filtering panel to LHC-fills page

lib/public/components/Filters/LhcFillsFilter/StableBeamFilterModel.js

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-Trg.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { SelectionModel } from '../../common/selection/SelectionModel.js';
+
+/**
+ * Stable beam filter model
+ * Holds true or false value
+ */
+export class StableBeamFilterModel extends SelectionModel {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super({ availableOptions: [{ value: true }, { value: false }],
+            defaultSelection: [{ value: false }],
+            multiple: false,
+            allowEmpty: false });
+    }
+
+    /**
+     * Returns true if the current filter is stable beams only
+     *
+     * @return {boolean} true if filter is stable beams only
+     */
+    isStableBeamsOnly() {
+        return this.current;
+    }
+
+    /**
+     * Sets the current filter to stable beams only
+     *
+     * @param {boolean} value value to set this stable beams only filter with
+     * @return {void}
+     */
+    setStableBeamsOnly(value) {
+        this.select({ value });
+    }
+
+    /**
+     * Get normalized selected option
+     */
+    get normalized() {
+        return this.current;
+    }
+
+    /**
+     * Overrides SelectionModel.isEmpty to respect the fact that stable beam filter cannot be empty.
+     * @returns {boolean} true if the current value of the filter is false.
+     */
+    get isEmpty() {
+        return this.current === false;
+    }
+
+    /**
+     * Reset the filter to default values
+     *
+     * @return {void}
+     */
+    resetDefaults() {
+        if (!this.isEmpty) {
+            this.reset();
+            this.notify();
+        }
+    }
+}

lib/public/components/Filters/LhcFillsFilter/stableBeamFilter.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-Trg.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h } from '/js/src/index.js';
+import { switchInput } from '../../common/form/switchInput.js';
+import { radioButton } from '../../common/form/inputs/radioButton.js';
+
+/**
+ * Display a toggle switch or radio buttons to filter stable beams only
+ *
+ * @param {StableBeamFilterModel} stableBeamFilterModel the stableBeamFilterModel
+ * @param {boolean} radioButtonMode define whether or not to return radio buttons or a switch.
+ * @returns {Component} the toggle switch
+ */
+export const toggleStableBeamOnlyFilter = (stableBeamFilterModel, radioButtonMode = false) => {
+    const name = 'stableBeamsOnlyRadio';
+    const labelOff = 'OFF';
+    const labelOn = 'ON';
+    if (radioButtonMode) {
+        return h('.form-group-header.flex-row.w-100', [
+            radioButton({
+                label: labelOff,
+                isChecked: !stableBeamFilterModel.isStableBeamsOnly(),
+                action: () => stableBeamFilterModel.setStableBeamsOnly(false),
+                name: name,
+            }),
+            radioButton({
+                label: labelOn,
+                isChecked: stableBeamFilterModel.isStableBeamsOnly(),
+                action: () => stableBeamFilterModel.setStableBeamsOnly(true),
+                name: name,
+            }),
+        ]);
+    } else {
+        return switchInput(stableBeamFilterModel.isStableBeamsOnly(), (newState) => {
+            stableBeamFilterModel.setStableBeamsOnly(newState);
+        }, { labelAfter: 'STABLE BEAM ONLY' });
+    }
+};

lib/public/components/Filters/RunsFilter/dcs.js

@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import { radioButton } from '../../common/form/inputs/radioButton.js';
 import { h } from '/js/src/index.js';
 
 /**
@@ -20,33 +21,30 @@ import { h } from '/js/src/index.js';
  */
 const dcsOperationRadioButtons = (runModel) => {
     const state = runModel.getDcsFilterOperation();
+    const name = 'dcsFilterRadio';
+    const labelAny = 'ANY';
+    const labelOff = 'OFF';
+    const labelOn = 'ON';
     return h('.form-group-header.flex-row.w-100', [
-        radioButton('ANY', state === '', () => runModel.removeDcs()),
-        radioButton('OFF', state === false, () => runModel.setDcsFilterOperation(false)),
-        radioButton('ON', state === true, () => runModel.setDcsFilterOperation(true)),
+        radioButton({
+            label: labelAny,
+            isChecked: state === '',
+            action: () => runModel.removeDcs(),
+            name,
+        }),
+        radioButton({
+            label: labelOff,
+            isChecked: state === false,
+            action: () => runModel.setDcsFilterOperation(false),
+            name,
+        }),
+        radioButton({
+            label: labelOn,
+            isChecked: state === true,
+            action: () => runModel.setDcsFilterOperation(true),
+            name,
+        }),
     ]);
 };
 
-/**
- * Build a radio button with its configuration and actions
- * @param {string} label - label to be displayed to the user for radio button
- * @param {boolean} isChecked - is radio button selected or not
- * @param {Function} action - action to be followed on user click
- * @return {vnode} - radio button with label associated
- */
-const radioButton = (label, isChecked, action) => h('.w-33.form-check', [
-    h('input.form-check-input', {
-        onchange: action,
-        type: 'radio',
-        id: `dcsFilterRadio${label}`,
-        name: 'dcsFilterRadio',
-        value: label,
-        checked: isChecked,
-    }, ''),
-    h('label.form-check-label', {
-        style: 'cursor: pointer;',
-        for: `dcsFilterRadio${label}`,
-    }, label),
-]);
-
 export default dcsOperationRadioButtons;

lib/public/components/Filters/RunsFilter/ddflp.js

@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import { radioButton } from '../../common/form/inputs/radioButton.js';
 import { h } from '/js/src/index.js';
 
 /**
@@ -20,33 +21,30 @@ import { h } from '/js/src/index.js';
  */
 const ddflpOperationRadioButtons = (runModel) => {
     const state = runModel.getDdflpFilterOperation();
+    const name = 'ddFlpFilterRadio';
+    const labelAny = 'ANY';
+    const labelOff = 'OFF';
+    const labelOn = 'ON';
     return h('.form-group-header.flex-row.w-100', [
-        radioButton('ANY', state === '', () => runModel.removeDdflp()),
-        radioButton('OFF', state === false, () => runModel.setDdflpFilterOperation(false)),
-        radioButton('ON', state === true, () => runModel.setDdflpFilterOperation(true)),
+        radioButton({
+            label: labelAny,
+            isChecked: state === '',
+            action: () => runModel.removeDdflp(),
+            name,
+        }),
+        radioButton({
+            label: labelOff,
+            isChecked: state === false,
+            action: () => runModel.setDdflpFilterOperation(false),
+            name,
+        }),
+        radioButton({
+            label: labelOn,
+            isChecked: state === true,
+            action: () => runModel.setDdflpFilterOperation(true),
+            name,
+        }),
     ]);
 };
 
-/**
- * Build a radio button with its configuration and actions
- * @param {string} label - label to be displayed to the user for radio button
- * @param {boolean} isChecked - is radio button selected or not
- * @param {Function} action - action to be followed on user click
- * @return {vnode} - radio button with label associated
- */
-const radioButton = (label, isChecked, action) => h('.w-33.form-check', [
-    h('input.form-check-input', {
-        onchange: action,
-        type: 'radio',
-        id: `ddFlpFilterRadio${label}`,
-        name: 'ddFlpFilterRadio',
-        value: label,
-        checked: isChecked,
-    }, ''),
-    h('label.form-check-label', {
-        style: 'cursor: pointer;',
-        for: `ddFlpFilterRadio${label}`,
-    }, label),
-]);
-
 export default ddflpOperationRadioButtons;

lib/public/components/Filters/RunsFilter/epn.js

@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import { radioButton } from '../../common/form/inputs/radioButton.js';
 import { h } from '/js/src/index.js';
 
 /**
@@ -20,33 +21,30 @@ import { h } from '/js/src/index.js';
  */
 const epnOperationRadioButtons = (runModel) => {
     const state = runModel.getEpnFilterOperation();
+    const name = 'epnFilterRadio';
+    const labelAny = 'ANY';
+    const labelOff = 'OFF';
+    const labelOn = 'ON';
     return h('.form-group-header.flex-row.w-100', [
-        radioButton('ANY', state === '', () => runModel.removeEpn()),
-        radioButton('OFF', state === false, () => runModel.setEpnFilterOperation(false)),
-        radioButton('ON', state === true, () => runModel.setEpnFilterOperation(true)),
+        radioButton({
+            label: labelAny,
+            isChecked: state === '',
+            action: () => runModel.removeEpn(),
+            name,
+        }),
+        radioButton({
+            label: labelOff,
+            isChecked: state === false,
+            action: () => runModel.setEpnFilterOperation(false),
+            name,
+        }),
+        radioButton({
+            label: labelOn,
+            isChecked: state === true,
+            action: () => runModel.setEpnFilterOperation(true),
+            name,
+        }),
     ]);
 };
 
-/**
- * Build a radio button with its configuration and actions
- * @param {string} label - label to be displayed to the user for radio button
- * @param {boolean} isChecked - is radio button selected or not
- * @param {Function} action - action to be followed on user click
- * @return {vnode} - radio button with label associated
- */
-const radioButton = (label, isChecked, action) => h('.w-33.form-check', [
-    h('input.form-check-input', {
-        onchange: action,
-        type: 'radio',
-        id: `epnFilterRadio${label}`,
-        name: 'epnFilterRadio',
-        value: label,
-        checked: isChecked,
-    }, ''),
-    h('label.form-check-label', {
-        style: 'cursor: pointer;',
-        for: `epnFilterRadio${label}`,
-    }, label),
-]);
-
 export default epnOperationRadioButtons;

lib/public/components/common/form/inputs/radioButton.js

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-Trg.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h } from '/js/src/index.js';
+
+/**
+ * @typedef RadioButtonConfigStyle
+ * @property {string} labelStyle - value for the label's style property.
+ * @property {string} radioButtonStyle - value for the radio button's element styling.
+ */
+
+/**
+ * @typedef RadioButtonConfig - configuration object for radioButton.
+ *
+ * @property {string} label - label to be displayed to the user for radio button
+ * @property {boolean} isChecked - is radio button selected or not
+ * @property {function()} action - action to be followed on user click
+ * @property {string} id - id of the radiobutton element
+ * @property {string} name - name of the radiobutton element
+ * @property {RadioButtonConfigStyle} style - label style property
+ */
+
+/**
+ * Build a radio button with its configuration and actions
+ * @param {RadioButtonConfig} configuration - configuration object for radioButton.
+ * @return {vnode} - radio button with associated label.
+ */
+export const radioButton = (configuration = {}) => {
+    const {
+        label = '',
+        isChecked = false,
+        action = () => { },
+        name = '',
+        id = `${name}${label}`,
+        style = { labelStyle: 'cursor: pointer;', radioButtonStyle: '.w-33' },
+    } = configuration;
+    return h(`${style.radioButtonStyle}.form-check`, [
+        h('input.form-check-input', {
+            onchange: action,
+            type: 'radio',
+            id,
+            name,
+            value: label,
+            checked: isChecked,
+        }),
+        h('label.form-check-label', {
+            style: style.labelStyle,
+            for: id,
+        }, label),
+    ]);
+};