@lblod/ember-rdfa-editor-lblod-plugins 0.3.0 → 0.4.0

package/addon/components/rdfa-date-plugin/rdfa-date-time-picker.hbs

@@ -0,0 +1,21 @@
+<AuFormRow>
+  <AuDatePicker
+    @onChange={{this.onChangeDate}}
+    @value={{this.date}}
+    @label={{t "date-plugin.card.label"}}
+    @localization={{this.datePickerLocalization}}/>
+</AuFormRow>
+{{#unless @onlyDate}}
+  <AuFormRow>
+    <AuTimePicker
+      @hoursLabel={{t "date-plugin.card.hours"}}
+      @minutesLabel={{t "date-plugin.card.minutes"}}
+      @nowLabel={{t "date-plugin.card.now"}}
+      @hours={{this.hours}}
+      @minutes={{this.minutes}}
+      @showSeconds={{false}}
+      @showNow={{true}}
+      @onChange={{this.onChangeTime}}
+      />
+  </AuFormRow>
+{{/unless}}

package/addon/components/rdfa-date-plugin/rdfa-date-time-picker.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { localCopy } from 'tracked-toolbox';
+
+export default class RdfaDateTimePicker extends Component {
+  @service intl;
+  @localCopy('args.value') date;
+
+  get hours() {
+    return this.date.getHours();
+  }
+
+  get minutes() {
+    return this.date.getMinutes();
+  }
+
+  get datePickerLocalization() {
+    return {
+      buttonLabel: this.intl.t('auDatePicker.buttonLabel'),
+      selectedDateMessage: this.intl.t('auDatePicker.selectedDateMessage'),
+      prevMonthLabel: this.intl.t('auDatePicker.prevMonthLabel'),
+      nextMonthLabel: this.intl.t('auDatePicker.nextMonthLabel'),
+      monthSelectLabel: this.intl.t('auDatePicker.monthSelectLabel'),
+      yearSelectLabel: this.intl.t('auDatePicker.yearSelectLabel'),
+      closeLabel: this.intl.t('auDatePicker.closeLabel'),
+      keyboardInstruction: this.intl.t('auDatePicker.keyboardInstruction'),
+      calendarHeading: this.intl.t('auDatePicker.calendarHeading'),
+      dayNames: getLocalizedDays(this.intl),
+      monthNames: getLocalizedMonths(this.intl),
+      monthNamesShort: getLocalizedMonths(this.intl, 'short'),
+    };
+  }
+
+  @action
+  onChangeDate(isoDate, date) {
+    let wasDateInputCleared = !date;
+    if (!wasDateInputCleared) {
+      if (!this.date) {
+        this.date = new Date();
+      }
+      this.date.setDate(date.getDate());
+      this.date.setMonth(date.getMonth());
+      this.date.setFullYear(date.getFullYear());
+      this.args.onChange(this.date);
+    }
+  }
+
+  @action
+  onChangeTime(timeObject) {
+    if (!this.date) this.date = new Date();
+    this.date.setHours(timeObject.hours);
+    this.date.setMinutes(timeObject.minutes);
+    this.args.onChange(this.date);
+  }
+}
+
+function getLocalizedMonths(intl, monthFormat = 'long') {
+  let someYear = 2021;
+  return [...Array(12).keys()].map((monthIndex) => {
+    let date = new Date(someYear, monthIndex);
+    return intl.formatDate(date, { month: monthFormat });
+  });
+}
+
+function getLocalizedDays(intl, weekdayFormat = 'long') {
+  let someSunday = new Date('2021-01-03');
+  return [...Array(7).keys()].map((index) => {
+    let weekday = new Date(someSunday.getTime());
+    weekday.setDate(someSunday.getDate() + index);
+    return intl.formatDate(weekday, { weekday: weekdayFormat });
+  });
+}

package/addon/components/roadsign-regulation-plugin/expanded-measure.hbs

@@ -0,0 +1,44 @@
+<tr class="au-c-data-table__detail">
+  <td colspan="5" class="au-o-flow au-o-flow--small">
+    <AuHeading @level="6" @skin="6">Voeg maatregel in:</AuHeading>
+    <p>
+      <AuPill>
+        <RoadsignRegulationPlugin::MeasureTemplate @measure={{@measure.uri}} @template={{@measure.template}} />
+      </AuPill>
+    </p>
+    {{#if this.isPotentiallyZonal}}
+      <AuHeading @level="6" @skin="6">Selecteer zonale geldigheid:</AuHeading>
+      <div class="au-c-form">
+        <ul>
+          <li>
+            <AuControlRadio @label="Zonaal" @name="zonal" @value={{this.ZONAL_URI}} @identifier="zonal" {{on 'change' this.changeZonality}} />
+          </li>
+          <li>
+            <AuControlRadio @label="Niet zonaal" @name="zonal" @value={{this.NON_ZONAL_URI}} @identifier="non-zonal" {{on 'change' this.changeZonality}} />
+          </li>
+        </ul>
+      </div>
+    {{/if}}
+    {{#if @measure.temporal}}
+      <AuHeading @level="6" @skin="6">Variabele signalisatie:</AuHeading>
+      <div class="au-c-form">
+        <ul>
+          <li>
+            <AuControlRadio @label="Variabel" @name="temporal" @value={{true}} @identifier="true" {{on 'change' this.changeTemporality}} />
+          </li>
+          <li>
+            <AuControlRadio @label="Niet variabel" @name="temporal" @value={{false}} @identifier="false" {{on 'change' this.changeTemporality}} />
+          </li>
+        </ul>
+      </div>
+    {{/if}}
+    <AuButtonGroup>
+      <AuButton {{on 'click' this.insert}} @disabled={{this.insertButtonDisabled}}>
+        Voeg in
+      </AuButton>
+      <AuButton @skin="secondary" {{on "click" this.unselectRow }}>
+        Annuleer
+      </AuButton>
+    </AuButtonGroup>
+  </td>
+</tr>

package/addon/components/roadsign-regulation-plugin/expanded-measure.js

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import {
+  NON_ZONAL_URI,
+  POTENTIALLY_ZONAL_URI,
+  ZONAL_URI,
+} from '../../constants';
+
+export default class ExpandedMeasureComponent extends Component {
+  @tracked zonalityValue;
+  @tracked temporalValue;
+  ZONAL_URI = ZONAL_URI;
+  NON_ZONAL_URI = NON_ZONAL_URI;
+  get isPotentiallyZonal() {
+    return this.args.measure.zonality === POTENTIALLY_ZONAL_URI;
+  }
+  get insertButtonDisabled() {
+    return this.isPotentiallyZonal && !this.zonalityValue;
+  }
+
+  @action
+  changeZonality(e) {
+    this.zonalityValue = e.target.value;
+  }
+  @action
+  changeTemporality(e) {
+    this.temporalValue = e.target.value;
+  }
+  @action
+  insert() {
+    this.args.insert(this.args.measure, this.zonalityValue, this.temporalValue);
+  }
+  @action
+  unselectRow() {
+    this.args.selectRow(this.args.measure.uri);
+  }
+}

package/addon/components/roadsign-regulation-plugin/measure-template.hbs

@@ -0,0 +1,5 @@
+{{#if @limitText}}
+  {{limit-text this.template}}
+{{else}}
+  {{this.template}}
+{{/if}}

package/addon/components/roadsign-regulation-plugin/measure-template.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+import includeInstructions from '../../utils/roadsign-regulation-plugin/includeInstructions';
+
+export default class MeasureTemplateComponent extends Component {
+  @service roadsignRegistry;
+  @tracked template = '';
+
+  constructor() {
+    super(...arguments);
+    this.template = this.args.template;
+    this.fetchData.perform();
+  }
+
+  @task
+  *fetchData() {
+    const instructions =
+      yield this.roadsignRegistry.getInstructionsForMeasure.perform(
+        this.args.measure
+      );
+    let template = includeInstructions(
+      this.args.template,
+      instructions,
+      this.args.annotated
+    );
+    this.template = template;
+  }
+}

package/addon/components/roadsign-regulation-plugin/roadsign-regulation-card.hbs

@@ -0,0 +1,12 @@
+<AuList::Item>
+  <AuButton
+    @skin="link"
+    @icon="add"
+    @iconAlignment="left"
+    @disabled={{if this.showCard false true}}
+    {{on "click" this.toggleModal}}
+  >
+    Voeg mobiliteitsmaatregel in
+  </AuButton>
+</AuList::Item>
+<RoadsignRegulationPlugin::RoadsignsModal @modalOpen={{this.modalOpen}} @closeModal={{this.toggleModal}} @controller={{@controller}} @insert={{this.insert}}/>

package/addon/components/roadsign-regulation-plugin/roadsign-regulation-card.js

@@ -0,0 +1,101 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * Card displaying a hint of the Date plugin
+ *
+ * @module editor-roadsign-regulation-plugin
+ * @class RoadsignRegulationCard
+ * @extends Ember.Component
+ */
+const acceptedTypes = [
+  '>https://data.vlaanderen.be/id/concept/BesluitType/4d8f678a-6fa4-4d5f-a2a1-80974e43bf34',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/7d95fd2e-3cc9-4a4c-a58e-0fbc408c2f9b',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/3bba9f10-faff-49a6-acaa-85af7f2199a3',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/0d1278af-b69e-4152-a418-ec5cfd1c7d0b',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/e8afe7c5-9640-4db8-8f74-3f023bec3241',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/256bd04a-b74b-4f2a-8f5d-14dda4765af9',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/67378dd0-5413-474b-8996-d992ef81637a',
+];
+
+export default class RoadsignRegulationCard extends Component {
+  @tracked modalOpen;
+  @tracked showCard = false;
+
+  constructor() {
+    super(...arguments);
+    this.args.controller.onEvent('selectionChanged', this.selectionChanged);
+  }
+
+  @action
+  toggleModal() {
+    this.modalOpen = !this.modalOpen;
+  }
+
+  @action
+  insert(html) {
+    const selectedRange = this.args.controller.selection.lastRange;
+    if (!selectedRange) {
+      return;
+    }
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      selectedRange,
+      'rangeIsInside'
+    );
+    const besluit = limitedDatastore
+      .match(null, 'a')
+      .transformDataset((dataset, termConverter) => {
+        return dataset.filter((quad) =>
+          acceptedTypes
+            .map((type) => termConverter(type).value)
+            .includes(quad.object.value)
+        );
+      })
+      .asSubjectNodes()
+      .next().value;
+    const besluitNode = [...besluit.nodes][0];
+    let articleContainerNode;
+    for (let child of besluitNode.children) {
+      if (child.attributeMap.get('property') === 'prov:value') {
+        articleContainerNode = child;
+        break;
+      }
+    }
+    const range = this.args.controller.rangeFactory.fromInNode(
+      articleContainerNode,
+      articleContainerNode.getMaxOffset(),
+      articleContainerNode.getMaxOffset()
+    );
+    this.args.controller.executeCommand('insert-html', html, range);
+  }
+
+  @action
+  selectionChanged() {
+    const selectedRange = this.args.controller.selection.lastRange;
+    if (!selectedRange) {
+      return;
+    }
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      selectedRange,
+      'rangeIsInside'
+    );
+    const besluit = limitedDatastore
+      .match(null, 'a')
+      .transformDataset((dataset, termConverter) => {
+        return dataset.filter((quad) =>
+          acceptedTypes
+            .map((type) => termConverter(type).value)
+            .includes(quad.object.value)
+        );
+      })
+      .asQuads()
+      .next().value;
+    if (besluit) {
+      this.showCard = true;
+      this.besluitUri = besluit.subject.value;
+    } else {
+      this.showCard = false;
+    }
+  }
+}

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.hbs

@@ -0,0 +1,92 @@
+<AuModal
+  class="au-c-modal--flush"
+  @size="large"
+  @modalTitle="Mobiliteitsmaatregel toevoegen"
+  @modalOpen={{@modalOpen}}
+  @closeModal={{this.closeModal}} as |Modal| >
+  <Modal.Body>
+    <div class="au-c-body-container">
+      <div class="au-o-box au-u-background-gray-100">
+        <div class="au-o-grid au-o-grid--tiny au-o-grid--bottom">
+          <div class="au-o-grid__item au-u-1-4">
+            <AuLabel>
+              Filter op type
+            </AuLabel>
+            <PowerSelect
+              @renderInPlace={{true}}
+              @options={{this.typeOptions}}
+              @verticalPosition="below"
+              @searchEnabled={{true}}
+              @selected={{or this.typeSelected this.categorySelected}}
+              @allowClear={{true}}
+              @onChange={{this.selectTypeOrCategory}}
+              as |option|>
+              {{option.label}}
+            </PowerSelect>
+          </div>
+          <div class="au-o-grid__item au-u-1-4">
+            <AuLabel>
+              Filter op code
+            </AuLabel>
+            <PowerSelect
+              @renderInPlace={{true}}
+              @verticalPosition="below"
+              @searchEnabled={{true}}
+              @search={{this.searchCodes}}
+              @selected={{this.selectedCode}}
+              @allowClear={{true}}
+              @onChange={{this.changeCode}}
+              as |option|>
+              {{option.label}}
+            </PowerSelect>
+          </div>
+            <div class="au-o-grid__item au-u-1-4">
+            <AuLabel>
+              Combineer met code
+            </AuLabel>
+            <PowerSelectMultiple
+              @renderInPlace={{true}}
+              @verticalPosition="below"
+              @searchEnabled={{true}}
+              @searchField="label"
+              @selected={{this.selectedCodeCombination}}
+              @allowClear={{true}}
+              @onChange={{this.changeCodeCombination}}
+              @options={{this.codeCombinationOptions}}
+              @disabled={{not this.selectedCode}}
+            as |option|>
+              {{option.label}}
+            </PowerSelectMultiple>
+          </div>
+          <div class="au-o-grid__item au-u-1-4">
+            <AuLabel>
+              Filter op zonale geldigheid
+            </AuLabel>
+            <PowerSelect
+              @renderInPlace={{true}}
+              @options={{this.zonalityOptions}}
+              @verticalPosition="below"
+              @searchEnabled={{false}}
+              @selected={{this.zonalitySelected}}
+              @allowClear={{true}}
+              @onChange={{this.selectZonality}}
+              as |option|>
+              {{option.label}}
+            </PowerSelect>
+          </div>
+        </div>
+      </div>
+      <div class="au-c-body-container">
+        <RoadsignRegulationPlugin::RoadsignsTable
+          @content={{this.tableData}}
+          @isLoading={{this.fetchSigns.isRunning}}
+          @insert={{this.insertHtml}}
+          @count={{this.count}}
+          @goToPage={{this.goToPage}}
+          @pageSize={{this.pageSize}}
+          @pageStart={{this.pageStart}}
+        />
+      </div>
+    </div>
+  </Modal.Body>
+</AuModal>

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.js

@@ -0,0 +1,268 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { restartableTask } from 'ember-concurrency';
+import { getOwner } from '@ember/application';
+import { v4 as uuid } from 'uuid';
+import { inject as service } from '@ember/service';
+import includeInstructions from '../../utils/roadsign-regulation-plugin/includeInstructions';
+import {
+  NON_ZONAL_URI,
+  POTENTIALLY_ZONAL_URI,
+  ZONAL_URI,
+} from '../../constants';
+
+const PAGE_SIZE = 10;
+const SIGN_TYPE_URI =
+  'https://data.vlaanderen.be/ns/mobiliteit#Verkeersbordconcept';
+const ROAD_MARKING_URI =
+  'https://data.vlaanderen.be/ns/mobiliteit#Wegmarkeringconcept';
+const TRAFFIC_LIGHT_URI =
+  'https://data.vlaanderen.be/ns/mobiliteit#Verkeerslichtconcept';
+const measureTypes = [SIGN_TYPE_URI, ROAD_MARKING_URI, TRAFFIC_LIGHT_URI];
+export default class RoadsignRegulationCard extends Component {
+  endpoint;
+
+  pageSize = PAGE_SIZE;
+  @service roadsignRegistry;
+
+  @tracked typeSelected;
+
+  @tracked categorySelected;
+
+  @tracked zonalityOptions = [
+    {
+      label: 'Zonaal',
+      value: ZONAL_URI,
+    },
+    {
+      label: 'Niet zonaal',
+      value: NON_ZONAL_URI,
+    },
+  ];
+  @tracked zonalitySelected;
+
+  @tracked selectedCode;
+  @tracked selectedCodeCombination;
+  @tracked codeCombinationOptions;
+  @tracked tableData = [];
+  @tracked count;
+  @tracked pageStart = 0;
+
+  get isNotTypeSign() {
+    if (!this.typeSelected) return true;
+    return this.typeSelected.value !== SIGN_TYPE_URI;
+  }
+
+  constructor() {
+    super(...arguments);
+    const config = getOwner(this).resolveRegistration('config:environment');
+    this.endpoint = config.roadsignRegulationPlugin.endpoint;
+    this.search();
+  }
+
+  @action
+  selectTypeOrCategory(option) {
+    if (!option) {
+      this.typeSelected = undefined;
+      this.categorySelected = undefined;
+    } else {
+      if (measureTypes.includes(option.value)) {
+        this.typeSelected = option;
+        this.categorySelected = undefined;
+      } else {
+        this.typeSelected = undefined;
+        this.categorySelected = option;
+      }
+    }
+    this.selectedCode = undefined;
+    this.selectedCodeCombination = undefined;
+    this.search();
+  }
+
+  @action
+  changeCode(value) {
+    this.selectedCode = value;
+    this.selectedCodeCombination = undefined;
+    this.fetchCodeCombinations();
+    this.search();
+  }
+
+  @action
+  changeCodeCombination(value) {
+    this.selectedCodeCombination = value;
+    this.fetchCodeCombinations();
+    this.search();
+  }
+
+  @action
+  changeDescription(e) {
+    this.descriptionFilter = e.target.value;
+    this.search();
+  }
+
+  @action
+  selectCategory(value) {
+    this.categorySelected = value;
+    this.search();
+  }
+
+  @action
+  selectZonality(value) {
+    this.zonalitySelected = value;
+    this.search();
+  }
+
+  @action
+  closeModal() {
+    this.args.closeModal();
+  }
+  @action
+  searchCodes(term) {
+    const category = this.categorySelected
+      ? this.categorySelected.value
+      : undefined;
+    const type = this.typeSelected ? this.typeSelected.value : undefined;
+    return this.roadsignRegistry.searchCode.perform(term, category, type);
+  }
+
+  async fetchCodeCombinations() {
+    let signs = [this.selectedCode.value];
+    if (this.selectedCodeCombination) {
+      signs = [
+        this.selectedCode.value,
+        ...this.selectedCodeCombination.map((s) => s.value),
+      ];
+    }
+    const codes = await this.roadsignRegistry.searchCode.perform(
+      undefined,
+      undefined,
+      undefined,
+      signs
+    );
+    this.codeCombinationOptions = codes;
+  }
+
+  get typeOptions() {
+    return [
+      {
+        groupName: 'Types',
+        options: [
+          {
+            label: 'Verkeersborden',
+            value: SIGN_TYPE_URI,
+          },
+          {
+            label: 'Wegmarkeringen',
+            value:
+              'https://data.vlaanderen.be/ns/mobiliteit#Wegmarkeringconcept',
+          },
+          {
+            label: 'Verkeerslichten',
+            value:
+              'https://data.vlaanderen.be/ns/mobiliteit#Verkeerslichtconcept',
+          },
+        ],
+      },
+      {
+        groupName: 'Categorieën',
+        options: this.roadsignRegistry.classifications,
+      },
+    ];
+  }
+
+  @restartableTask
+  *fetchSigns() {
+    let codes = [];
+    if (this.selectedCodeCombination) {
+      codes.push(...this.selectedCodeCombination);
+    }
+    if (this.selectedCode) {
+      codes.push(this.selectedCode);
+    }
+    const { measures, count } =
+      yield this.roadsignRegistry.fetchMeasures.perform({
+        zonality: this.zonalitySelected
+          ? this.zonalitySelected.value
+          : undefined,
+        type: this.typeSelected ? this.typeSelected.value : undefined,
+        codes: codes.length ? codes.map((code) => code.value) : undefined,
+        category: this.categorySelected
+          ? this.categorySelected.value
+          : undefined,
+        pageStart: this.pageStart,
+      });
+    this.tableData = measures;
+    this.count = count;
+  }
+
+  @action
+  async insertHtml(measure, zonalityValue, temporalValue) {
+    const instructions =
+      await this.roadsignRegistry.fetchInstructionsForMeasure.perform(
+        measure.uri
+      );
+    const zonality = zonalityValue ? zonalityValue : measure.zonality;
+    const html = includeInstructions(
+      measure.annotatedTemplate,
+      instructions,
+      true
+    );
+    const signsHTML = measure.signs
+      .map((sign) => {
+        const roadSignUri = 'http://data.lblod.info/verkeerstekens/' + uuid();
+        return `<li style="margin-bottom:1rem;"><span property="mobiliteit:wordtAangeduidDoor" resource=${roadSignUri} typeof="mobiliteit:Verkeersbord-Verkeersteken">
+        <span property="mobiliteit:heeftVerkeersbordconcept" resource="${
+          sign.uri
+        }" typeof="mobiliteit:Verkeersbordconcept" style="display:flex;align-items:center;">
+          <span property="skos:prefLabel" style="padding-bottom:0;margin-left:0;margin-right:.4rem;">${
+            sign.code
+          }</span>
+          <span style="margin-left:0;margin-top:0;">${
+            sign.zonality === POTENTIALLY_ZONAL_URI && zonality === ZONAL_URI
+              ? 'met zonale geldigheid'
+              : ''
+          }
+          </span>
+          </span>
+        </span>
+      </li>`;
+      })
+      .join('\n');
+
+    this.args.controller.executeCommand(
+      'insert-article',
+      this.args.controller,
+      `<div property="mobiliteit:heeftVerkeersmaatregel" typeof="mobiliteit:Mobiliteitsmaatregel" resource="http://data.lblod.info/mobiliteitsmaatregels/${uuid()}">
+        <span style="display:none;" property="prov:wasDerivedFrom" resource="${
+          measure.uri
+        }">&nbsp;</span>
+        <span style="display:none;" property="ext:zonality" resource="${zonality}"></span>
+        <span style="display:none;" property="ext:temporal" value="${
+          measure.temporal
+        }"></span>
+          <div property="dct:description">
+            ${html}
+            <p>Dit wordt aangeduid door verkeerstekens:</p>
+            <ul style="list-style:none;">
+              ${signsHTML}
+            </ul>
+            ${temporalValue === 'true' ? 'Deze signalisatie is dynamisch.' : ''}
+          </div>
+        </div>
+      `
+    );
+    this.args.closeModal();
+  }
+
+  @action
+  goToPage(pageStart) {
+    this.pageStart = pageStart;
+    this.fetchSigns.perform();
+  }
+  @action
+  search() {
+    this.pageStart = 0;
+    this.fetchSigns.perform();
+  }
+}