Installeren

npm install @via-software/crashr

API

Voor een volledige gedetailleerde beschrijving van de API zie de website.

Supported

Om te kijken of Crashr wordt ondersteund, kun je de IsSupported functie importeren. IsSupported(): boolean

import { IsSupported, Crashr } from '@via-software/crashr'

if(IsSupported()){
  const crashr = new Crashr({
    ...
  });
}

Gebruiken

<div id="crashr"></div>

<style>
  #crashr{
    min-width: 300px;
    min-height: 300px;

    --crashr-font-family: Arial, Helvetica, sans-serif;
    --crashr-success-background: rgba(70,210,138,1);
  }
</style>

<script>
  import { Crashr } from '@via-software/crashr';
  import '@via-software/crashr/dist/crashr.css';

  const crashr = new Crashr({
    container: document.getElementById('crashr'),
    id: 'NLD-XXXXXX-XXXXXXXXXXX',
    locationType: 'RoadSegment',
    date: '2022-10-20',
    time: '12:00',
    culture: 'nl-NL',
    mode: 'production',
    type: 'Crash',
    parties: [{
      CustomID: 'My-Custom-Id',
      Type: 'Car',
      Movement: 'Forward',
      FirstImpact: 'LeftFront',
      LicensePlate: 'XX-XX-XX'
    }],
    onChange: (data) => {},
    onError: (error) => {}
  })
</script>

Configuratie

| Naam | Type | Default | Verplicht | Omschrijving | | ---------------- | ----------------------------------- | -------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | container | HTMLElement | | ✓ | HTML element waarin CrashR word geladen | | id | string | | ✓ | Het Crashr ID gekregen door /Main/Start | | locationType | 'RoadSegment'\|'Junction'\|'Auto' | | ✓ | De locatie type van het ongeval | | date | string | | ✓ | Datum van het ongeval (YYYY-MM-DD) | | time | string | | ✓ | Tijd van het ongeval (HH:mm) | | culture | string | | ✓ | Taal van de gebruiker in (ISO 3166-2) | | parties | Array | [] | ✓ | De partijen betrokken bij het ongeval | | locale | Object | | - | Vertalingen van een of meerdere keys: zoomLevelToLow, collisionText, collisionDoneText, collisionDrawText, buttonDone | | mode | 'production'\|'development' | 'production' | - | Bepaald welke API url er word aangesproken | | type | 'Crash'\|'Location' | 'Crash' | - | Zet 'Crash' voor een verkeersongeval of 'Location' om alleen een locatie te prikken | | onChange | Function | | - | Functie die word aangeroepen na iedere stap die een gebruiker maakt | | onError | Function | | - | Functie die word aangeroepen wanneer er een error onstaat |

Events

const crashr = new Crashr({
  ...
  onChange: (data) => { // Functie die word aangeroepen na iedere stap die een gebruiker maakt
    console.log(data.Step) // 'Location' | 'Party_${partyID}' | 'Confirm' | 'Done'
    
    if(data.Step === 'Done'){
      console.log(data.Result) 
      /*
        {
          Date: '01-01-1900',
          Time: '00:00',
          Residency: 'Amsterdam',
          Placeholder: 'Between street1 and street2 in Amsterdam',
          Longitude: 0.0000,
          Latitude: 0.0000,
          Image: 'https://nld.crashr.app/Crash/${NLD-XXXXXX-XXXXXXXXXXX}/image.png'
        }
      */
    }else{
      console.log(data.Result) // null
    }
  },
  onError: (error) => { // Functie die word aangeroepen wanneer er een error onstaat
    console.log(error.Type) // 'Api' | 'Script' | 'Device'

    switch(error.Type) {
      case 'Api':
        console.log(error.Data)
        /*
          {
            Code: 404,
            Message: '',
          }
        */
        break;

      case 'Script':
        console.log(error.Data)
        /*
          {
            Message: 'Container needs to be an instance of HTMLElement',
            StackTrace: console.trace
          }
        */
        break;

      case 'Device':
        console.log(error.Data)
        /*
          {
            Message: 'Crashr is not supported'
          }
        */
        break;
    }
  }
})

Vertalen

Vertalingen zijn aan te passen door één of meerdere keys mee te sturen.

const crashr = new Crashr({
  ...
  locale: {
    zoomLevelToLow: 'Zoom verder in om een locatie te kiezen',
    collisionText: 'Kies op de kaart de exacte locatie waar het ongeval heeft plaatsgevonden.',
    collisionDoneText: 'Klik op de groene knop wanneer de tekening van het ongeval overeenkomt met de eerste botssituatie van het ongeval.',
    collisionDrawText: 'Teken de eerste botssituatie van het ongeval',
    buttonDone: 'Klaar!'
  }
})

Styling

Styling is aan te passen door css variabelen te overschrijven

<div id="crashr"></div>

<style>
  #crashr{
    --crashr-font-family: Arial, Helvetica, sans-serif;
    --crashr-success-background: rgba(70,210,138,1);
  }
</style>