@via-software/crashr

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>