NumberWidget

src/assets/lang/en.json

@@ -30,6 +30,7 @@
   "labelOrderSort": "Sort",
   "SelectAllValues": "Any",
   "Or": "or",
+  "Range": "between",
   "SwitchVariablesNames": "Show column names",
   "true": "True",
   "false": "False",
@@ -42,5 +43,9 @@
   "AutocompleteSpinner_3Chars": "type at least 3 characters",
   "AutocompleteSpinner_Searching": "searching...",
   "AutocompleteSpinner_NoResults": "no results found",
-  "VirtuosoSearchHelp": "Type words your field should contain. Your input should not contain quotation marks. You can type an expression to match words starting by a sequence of 4 characters minimum, e.g., \"archiv*\".will match \"archives\", \"archival\", etc."
+  "VirtuosoSearchHelp": "Type words your field should contain. Your input should not contain quotation marks. You can type an expression to match words starting by a sequence of 4 characters minimum, e.g., \"archiv*\".will match \"archives\", \"archival\", etc.",
+  "NumberLabelBetween": "between",
+  "NumberLabelAnd": "and",
+  "NumberLabelHigherThan": "greater than",
+  "NumberLabelLowerThan": "lower than"
 }

src/assets/lang/fr.json

@@ -30,6 +30,7 @@
   "labelOrderSort": "Tri :",
   "SelectAllValues": "Tous·tes",
   "Or": "ou",
+  "Range": "entre",
   "SwitchVariablesNames": "Montrer le nom des colonnes",
   "true": "Vrai",
   "false": "Faux",
@@ -42,5 +43,9 @@
   "AutocompleteSpinner_3Chars": "3 caractères minimum",
   "AutocompleteSpinner_Searching": "(recherche...)",
   "AutocompleteSpinner_NoResults": "pas de résultats",
-  "VirtuosoSearchHelp": "Écrivez des mots séparés par des espaces que le champ devra contenir. Cette entrée ne doit pas contenir de guillemets ou d'apostrophes. Vous pouvez entrer des expressions avec une * pour des mots devant commencer par une séquence de 4 lettres minimum, e.g., \"archiv*\" trouvera \"archives\", \"archivage\", etc."
+  "VirtuosoSearchHelp": "Écrivez des mots séparés par des espaces que le champ devra contenir. Cette entrée ne doit pas contenir de guillemets ou d'apostrophes. Vous pouvez entrer des expressions avec une * pour des mots devant commencer par une séquence de 4 lettres minimum, e.g., \"archiv*\" trouvera \"archives\", \"archivage\", etc.",
+  "NumberLabelBetween": "entre",
+  "NumberLabelAnd": "et",
+  "NumberLabelHigherThan": "supérieur à",
+  "NumberLabelLowerThan": "inférieur à"
 }

src/assets/stylesheets/components/widget/WidgetWrapper.scss

@@ -81,6 +81,7 @@
 
     &>.list-widget,
     &>.search-widget,    
+    &>.number-widget,
     &>.timedatepicker-widget {
         &>div,
         &>input {

src/sparnatural/components/builder-section/groupwrapper/criteriagroup/edit-components/WidgetWrapper.ts

@@ -164,6 +164,8 @@ class WidgetWrapper extends HTMLComponent {
       return I18n.labels.Select + " :";
     } else if (widgetType == Config.BOOLEAN_PROPERTY) {
       return "";
+    } else if (widgetType == Config.NUMBER_PROPERTY) {
+      return I18n.labels.Range + " :";
     } else {
       return I18n.labels.Find + " :";
     }

src/sparnatural/components/widgets/NumberWidget.ts

@@ -6,6 +6,8 @@ import { AbstractWidget, ValueRepetition, WidgetValue } from "./AbstractWidget";
 import { SelectAllValue } from "../builder-section/groupwrapper/criteriagroup/edit-components/EditComponents";
 import EndClassGroup from "../builder-section/groupwrapper/criteriagroup/startendclassgroup/EndClassGroup";
 import { I18n } from '../../settings/I18n';
+import AddUserInputBtn from '../buttons/AddUserInputBtn';
+import SparqlFactory from '../../generators/SparqlFactory';
 
 const factory = new DataFactory();
 
@@ -26,7 +28,13 @@ export class NumberWidgetValue implements WidgetValue {
 }
 
 export class NumberWidget extends AbstractWidget {
+
   protected widgetValues: NumberWidgetValue[];
+
+  minInput: JQuery<HTMLElement>;
+  maxInput: JQuery<HTMLElement>;
+  addValueBtn: AddUserInputBtn;
+
   constructor(
     parentComponent: WidgetWrapper,
     startClassVal: SelectedVal,
@@ -46,33 +54,78 @@ export class NumberWidget extends AbstractWidget {
 
   render() {
     super.render();
-    let testSpan = $(
-      `<span>Hello this is number widget</span>'`
-    );
-    this.html.append(testSpan);
+    this.minInput = $(`<input type="number" size="7" id="input-from" />`);
+    this.html.append(this.minInput);
+
+    this.html.append(`&nbsp;${I18n.labels.NumberLabelAnd}&nbsp;`);
+
+    this.maxInput = $(`<input type="number" size="7" id="input-to" />`);
+    this.html.append(this.maxInput);
+
+    this.addValueBtn = new AddUserInputBtn(
+      this,
+      I18n.labels.ButtonAdd,
+      this.#addValueBtnClicked
+    ).render();
 
     return this;
   }
 
+  #addValueBtnClicked = () => {
+    let numberWidgetValue = {
+        label: this.#getValueLabel(this.minInput.val().toString(), this.maxInput.val().toString()),
+        min: Number(this.minInput.val().toString()),
+        max: Number(this.maxInput.val().toString()),
+    };
+
+    numberWidgetValue = this.#checkInput(numberWidgetValue);
+    this.renderWidgetVal(this.parseInput(numberWidgetValue));
+  }
+
+  #checkInput(input: NumberWidgetValue["value"]): NumberWidgetValue["value"] {
+    if (input.min && input.max && (input.min > input.max)) throw Error('lower bou,d is bigger than upper bound!')
+    return input;
+  }
+
+  #getValueLabel = function (startLabel: string, stopLabel: string) {
+    let valueLabel = "";
+    if ((startLabel != "") && (stopLabel != "")) {
+      valueLabel = I18n.labels.NumberLabelBetween+' '+ startLabel +' '+I18n.labels.NumberLabelAnd+' '+ stopLabel ;
+    } else if (startLabel != "") {
+      valueLabel = I18n.labels.NumberLabelHigherThan+' '+ startLabel ;
+    } else if (stopLabel != "") {
+      valueLabel = I18n.labels.NumberLabelLowerThan+' '+ stopLabel ;
+    }
+
+    return valueLabel;
+  };
+
   parseInput(input: NumberWidgetValue["value"]): NumberWidgetValue {
     return new NumberWidgetValue(input);
    }
 
    /**
-    * Blocks if a value is selected and this is not the "all" special value
-    * @returns true
+    * @returns false
     */
    isBlockingObjectProp() {
-    return (
-      this.widgetValues.length == 1
-      &&
-      !(this.widgetValues[0] instanceof SelectAllValue)
-      &&
-      !((this.ParentComponent.ParentComponent.ParentComponent as EndClassGroup).isVarSelected())
-    );
+    return false;
    }
 
   getRdfJsPattern(): Pattern[] {
-    return [];
+    return [
+      SparqlFactory.buildFilterRangeDateOrNumber(
+        this.widgetValues[0].value.min?factory.literal(
+          String(this.widgetValues[0].value.min),
+          factory.namedNode("http://www.w3.org/2001/XMLSchema#decimal")
+        ):null,
+        this.widgetValues[0].value.max?factory.literal(
+          String(this.widgetValues[0].value.max),
+          factory.namedNode("http://www.w3.org/2001/XMLSchema#decimal")
+        ):null,
+        factory.variable(
+          this.getVariableValue(this.endClassVal)
+        )
+      )
+    ];
   }
 }

src/sparnatural/components/widgets/timedatepickerwidget/TimeDatePattern.ts

@@ -31,7 +31,7 @@ export const buildDateRangeOrExactDatePattern = (
           ]
         ),
         // exact date is within provided date range
-        SparqlFactory.buildFilterTime(
+        SparqlFactory.buildFilterRangeDateOrNumber(
           startDate,
           endDate,
           exactDateVarName
@@ -103,9 +103,9 @@ export const buildDateRangePattern = (
 		firstAlternative.patterns.push(bgp);
 
     // begin date is before given end date
-    firstAlternative.patterns.push(SparqlFactory.buildFilterTime(null, endDate, beginDateVarName));
+    firstAlternative.patterns.push(SparqlFactory.buildFilterRangeDateOrNumber(null, endDate, beginDateVarName));
     // end date is after given start date
-    firstAlternative.patterns.push(SparqlFactory.buildFilterTime(startDate, null, endDateVarName));
+    firstAlternative.patterns.push(SparqlFactory.buildFilterRangeDateOrNumber(startDate, null, endDateVarName));
 
     // 2. case where the resource has only a start date
     let secondAlternative:GroupPattern = SparqlFactory.buildGroupPattern([]);
@@ -137,7 +137,7 @@ export const buildDateRangePattern = (
 
     secondAlternative.patterns.push(notExistsEndDate);
     // begin date is before given end date
-    secondAlternative.patterns.push(SparqlFactory.buildFilterTime(null, endDate, beginDateVarName));
+    secondAlternative.patterns.push(SparqlFactory.buildFilterRangeDateOrNumber(null, endDate, beginDateVarName));
 
     // 3. case where the resource has only a end date
     let thirdAlternative:GroupPattern = SparqlFactory.buildGroupPattern([]);
@@ -169,7 +169,7 @@ export const buildDateRangePattern = (
 
     thirdAlternative.patterns.push(notExistsBeginDate);
     // end date is after given start date
-    thirdAlternative.patterns.push(SparqlFactory.buildFilterTime(startDate, null, endDateVarName));
+    thirdAlternative.patterns.push(SparqlFactory.buildFilterRangeDateOrNumber(startDate, null, endDateVarName));
 
 
     return SparqlFactory.buildUnionPattern([firstAlternative, secondAlternative, thirdAlternative]); 
@@ -186,7 +186,7 @@ export const buildDateRangePattern = (
     ]);
 
     // end date is after given start date
-    var filter = SparqlFactory.buildFilterTime(startDate, null, endDateVarName);
+    var filter = SparqlFactory.buildFilterRangeDateOrNumber(startDate, null, endDateVarName);
 
     // if the resource has no end date, and has only a start date
     // then it necessarily overlaps with the provided open-ended range
@@ -204,7 +204,7 @@ export const buildDateRangePattern = (
       )
     ]);
     // begin date is before given end date
-    var filter = SparqlFactory.buildFilterTime(null, endDate, beginDateVarName);
+    var filter = SparqlFactory.buildFilterRangeDateOrNumber(null, endDate, beginDateVarName);
 
     return SparqlFactory.buildGroupPattern([bgp,filter]);
   }

src/sparnatural/components/widgets/timedatepickerwidget/TimeDatePickerWidget.ts

@@ -258,11 +258,11 @@ export class TimeDatePickerWidget extends AbstractWidget {
           factory.namedNode(endDateProp),
           exactDateProp != null?factory.namedNode(exactDateProp):null,
           factory.variable(this.getVariableValue(this.startClassVal))
-        ),
+        )
       ];
     } else {
       return [
-        SparqlFactory.buildFilterTime(
+        SparqlFactory.buildFilterRangeDateOrNumber(
           this.widgetValues[0].value.start?factory.literal(
             this.#formatSparqlDate(this.widgetValues[0].value.start),
             factory.namedNode("http://www.w3.org/2001/XMLSchema#dateTime")
@@ -274,7 +274,7 @@ export class TimeDatePickerWidget extends AbstractWidget {
           factory.variable(
             this.getVariableValue(this.endClassVal)
           )
-        ),
+        )
       ];
     }    
   }

src/sparnatural/generators/SparqlFactory.ts

@@ -183,9 +183,9 @@ export default class SparqlFactory {
     } ;
   }
 
-  static buildFilterTime(
-      startDate: Literal,
-      endDate: Literal,
+  static buildFilterRangeDateOrNumber(
+      startDate: Literal|null,
+      endDate: Literal|null,
       variable: Variable
   ): Pattern {
 
@@ -230,6 +230,7 @@ export default class SparqlFactory {
 
     }
 
+
   static buildTriple(
     subject: IriTerm | BlankTerm | VariableTerm | QuadTerm,
     predicate: IriTerm | VariableTerm | PropertyPath,