@via-software/crashr v0.5.0

Installeren

npm install @via-software/crashr

API

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

Gebruiken

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

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

    --font-family: Arial, Helvetica, sans-serif;
    --success: 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) => {}
  })
</script>

Configuratie

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
    }
  }
})

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>