Add charging state change buttons

src/lib/components/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
+  export const classes: string = "";
 </script>
 
 <button on:click class="
@@ -16,6 +16,7 @@
   focus:ring-indigo-600
   active:ring-offset-2
   active:ring-4
+  { classes }
   ">
   <slot>Custom Button</slot>
 </button>

src/lib/components/ButtonGroupButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let classes: string = "";
+</script>
+
+<button on:click class="
+  btn btn-sm
+  text-indigo-600
+  bg-purple-100
+  hover:bg-purple-300
+  active:bg-purple-300
+  rounded-full
+  outline-none
+  focus:ring-indigo-600
+  active:ring-offset-2
+  active:ring-4
+  { classes }
+  ">
+  <slot>Custom Button</slot>
+</button>

src/lib/components/Heading3.svelte

@@ -0,0 +1,3 @@
+<h3 class="text-indigo-600 uppercase text-2xl font-thin p-4">
+  <slot>Heading 3</slot>
+</h3>

src/lib/wallbox-simulator/ChargingStateSelector.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import ButtonGroupButton from '../components/ButtonGroupButton.svelte';
+  import Heading3 from '../components/Heading3.svelte';
+  import { TransactionEvent } from './ocpp/messages/transaction-event/transactionEvent';
+  import { UpdateTransactionEventPayload } from './ocpp/messages/transaction-event/updateTransaction';
+  import { ChargingStateEnumType, chargingStates } from './ocpp/types/chargingStateEnumType';
+  import { chargingState } from './store';
+
+  export let webSocket: WebSocket;
+
+  const changeChargingState = (newState: ChargingStateEnumType) => {
+    const sessionId = sessionStorage.getItem("OcppTransactionId"); // todo: handle this with Svelte state
+    const updateTransactionPayload = UpdateTransactionEventPayload(sessionId, newState);
+    console.log(`Updating session with ID: ${sessionId}`)
+    TransactionEvent(webSocket, updateTransactionPayload);
+    $chargingState = newState;
+    }
+</script>
+
+{#if $chargingState !== undefined}
+<div transition:fade>
+  <Heading3>Charigng State</Heading3>
+
+  <div class="flex flex-row justify-center">
+    <div class="btn-group">
+      {#each chargingStates as state, _i}
+        <ButtonGroupButton on:click={() => changeChargingState(state)} classes="{state === $chargingState ? "btn-active" : ""}">
+          { state }
+        </ButtonGroupButton>
+      {/each}
+    </div> 
+  </div>
+</div>
+{/if}
+
+<style></style>

src/lib/wallbox-simulator/WallboxSimulator.svelte

@@ -5,6 +5,7 @@
   import ConnectionState from './ConnectionState.svelte';
   import { connectionState } from './store';
   import ChargingState from './ChargingState.svelte'
+  import ChargingStateSelector from './ChargingStateSelector.svelte'
   import PluginCableButton from './PluginCableButton.svelte'
 
   export let webSocketUrl = 'wss://connection/string...'
@@ -22,6 +23,7 @@
     />
   </div>
 
+  {#if $connectionState === 'connected'}
   {#if !(webSocket === undefined)}
   <div transition:fade class="flex flex-row gap-3 justify-center">
     <ConnectionState />
@@ -32,6 +34,11 @@
   <div class="max-w-sm m-auto">
     <PluginCableButton bind:webSocket={webSocket} connectionState={connectionStateStore}/>
   </div>
+
+  <div class="m-auto">
+    <ChargingStateSelector bind:webSocket={webSocket} />
+  </div>
+  {/if}
 </div>
 
 <style></style>

src/lib/wallbox-simulator/ocpp/messages/transaction-event/stopTransaction.ts

@@ -1,8 +1,9 @@
+import type { TriggerReasonEnumType } from "../../types/triggerReasonEnumType";
 import { ReadingContextEnumType } from "../meterValue";
 
 export function StopTransactionEventPayload(
   transactionId,
-  triggerReason = "EVCommunicationLost"
+  triggerReason: TriggerReasonEnumType = "EVCommunicationLost"
 ) {
   const lastMeterValueFromSessionStorage =
     sessionStorage.getItem("LastMeterValue");
@@ -19,10 +20,6 @@ export function StopTransactionEventPayload(
     timestamp: new Date().toISOString(),
     triggerReason,
     seqNo: 0,
-    idToken: {
-      idToken: "TAG1",
-      type: "Central",
-    },
     evse: {
       id: 1,
       connectorId: 1,

src/lib/wallbox-simulator/ocpp/messages/transaction-event/updateTransaction.ts

@@ -0,0 +1,24 @@
+import type { ChargingStateEnumType } from "../../types/chargingStateEnumType";
+import type { TransactionEventRequestType } from "../../types/transactionEventRequestType";
+import type { TriggerReasonEnumType } from "../../types/triggerReasonEnumType";
+
+export function UpdateTransactionEventPayload(
+  transactionId,
+  chargingState: ChargingStateEnumType,
+  triggerReason: TriggerReasonEnumType = "ChargingStateChanged"
+): TransactionEventRequestType {
+  return {
+    eventType: "Updated",
+    timestamp: new Date().toISOString(),
+    triggerReason,
+    seqNo: 0,
+    evse: {
+      id: 1,
+      connectorId: 1,
+    },
+    transactionData: {
+      id: transactionId,
+      chargingState,
+    },
+  };
+}

src/lib/wallbox-simulator/ocpp/types/additionalInfoType.ts

@@ -0,0 +1,25 @@
+/**
+ * ### 1.2. AdditionalInfoType
+ * _Class_
+ *
+ * Contains a case insensitive identifier to use for the authorization and the type of authorization
+ * to support multiple forms of identifiers.
+ *
+ * AdditionalInfoType is used by: Common:IdTokenType
+ */
+export type AdditionalInfoType = {
+  /**
+   * Required. This field specifies the additional IdToken.
+   *
+   * * max-length: 36
+   */
+  additionalIdToken: string;
+
+  /**
+   * Required. This defines the type of the additionalIdToken. This is a custom type, so the
+   * implementation needs to be agreed upon by all involved parties.
+   *
+   * max-length: 50
+   */
+  type: string;
+};

src/lib/wallbox-simulator/ocpp/types/encodingMethodEnumType.ts

@@ -0,0 +1,19 @@
+/**
+ * ### 2.31. EncodingMethodEnumType
+ * _Enumeration_
+ *
+ * Enumeration of the method used to encode the meter value into binary data before applying the
+ * digital signature algorithm.
+ * If the EncodingMethod is set to Other, the CSMS MAY try to determine the encoding method from the
+ * encodedMeterValue field.
+ *
+ * EncodingMethodEnumType is used by: Common:SignedMeterValueType
+ */
+export type EncodingMethodEnumType = typeof encodingMethods[number];
+
+export const encodingMethods = [
+  "Other", // Encoding method is not included in the enumeration.
+  "DLMS Message", //  The data is encoded in adigitally signed DLMS message, as described in the DLMS Green Book 8.
+  "COSEM Protected Data", // The data is encoded according to the COSEM data protection methods, as described in the DLMS Blue Book 12.
+  "EDL", // The data is encoded in the format used by EDL meters.
+] as const;

src/lib/wallbox-simulator/ocpp/types/evseType.ts

@@ -0,0 +1,20 @@
+/**
+ * ### 1.23. EVSEType
+ * _Class_
+ *
+ * Electric Vehicle Supply Equipment
+ *
+ * EVSEType is used by: Common:ComponentType, TriggerMessageRequest,
+ * Renegotiate15118ScheduleRequest, TransactionEventRequest, ReserveNowRequest.ReservationType
+ */
+export type EVSEType = {
+  /**
+   * Required. EVSE Identifier. When 0, the ID references the Charging Station as a whole.
+   */
+  id: number; // integer
+
+  /**
+   * Optional. An id to designate a specific connector (on an EVSE) by connector index number.
+   */
+  connectorId?: number; // integer
+};

src/lib/wallbox-simulator/ocpp/types/idTokenEnumType.ts

@@ -0,0 +1,19 @@
+/**
+ * ### 2.43. IdTokenEnumType
+ * _Enumeration_
+ *
+ * Allowable values of the IdTokenType field.
+ *
+ * IdTokenEnumType is used by: Common:GroupIdTokenType , Common:IdTokenType
+ */
+export type IdTokenEnumType = typeof idTokenTypes[number];
+
+export const idTokenTypes = [
+  "Central", // A centrally, in the CSMS (or other server) generated id (for example used for a remotely started transaction that is activated by SMS). No format defined, might be a UUID.
+  "eMAID", // Electro-mobility account id as defined in ISO 15118
+  "ISO14443", // ISO 14443 UID of RFID card. It is represented as an array of 4 or 7 bytes in hexadecimal representation.
+  "KeyCode", // User use a private key-code to authorize a charging transaction. For example: Pin-code.
+  "Local", // A locally generated id (e.g. internal id created by the Charging Station). No format defined, might be a UUID
+  "NoAuthorization", // Transaction is started and no authorization possible. Charging Station only has a start button or mechanical key etc. IdToken field SHALL be left empty.
+  "ISO15693", // ISO 15693 UID of RFID card. It is represented as an array of 8 bytes in hexadecimal representation.
+] as const;

src/lib/wallbox-simulator/ocpp/types/idTokenType.ts

@@ -0,0 +1,35 @@
+import type { AdditionalInfoType } from "./additionalInfoType";
+import type { IdTokenEnumType } from "./idTokenEnumType";
+
+/**
+ * ### 1.29. IdTokenType
+ * _Class_
+ *
+ * Contains a case insensitive identifier to use for the authorization and the type of authorization
+ * to support multiple forms of identifiers.
+ *
+ * IdTokenType is used by: Common:AuthorizationData, RequestStartTransactionRequest,
+ * AuthorizeRequest, TransactionEventRequest, ReserveNowRequest, CustomerInformationRequest
+ */
+export type IdTokenType = {
+  /**
+   * Required. IdToken is case insensitive. Might hold the hidden id of an RFID tag, but can for
+   * example also contain a UUID.
+   */
+  idToken: string;
+
+  /**
+   * Required. Enumeration of possible idToken types.
+   */
+  type: IdTokenEnumType;
+
+  /**
+   * Optional. AdditionalInfo can be used to send extra information which can be validated by the
+   * CSMS in addition to the regular authorization with IdToken.
+   *
+   * AdditionalInfo contains one or more custom types, which need to be agreed upon by all parties
+   * involved. When AdditionalInfo is NOT implemented or a not supported AdditionalInfo.type is
+   * used, the CSMS/Charging Station MAY ignore the AdditionalInfo.
+   */
+  additionalInfo?: AdditionalInfoType[];
+};

src/lib/wallbox-simulator/ocpp/types/locationEnumType.ts

@@ -0,0 +1,17 @@
+/**
+ * ### 2.44. LocationEnumType
+ * _Enumeration_
+ *
+ * Allowable values of the optional "location" field of a value element.
+ *
+ * LocationEnumType is used by: Common:SampledValueType
+ */
+export type LocationEnumType = typeof locations[number];
+
+export const locations = [
+  "Body", // Measurement inside body of Charging Station (e.g. Temperature).
+  "Cable", // Measurement taken from cable between EV and Charging Station.
+  "EV", // Measurement taken by EV.
+  "Inlet", // Measurement at network ("grid") inlet connection.
+  "Outlet", // Measurement at a Connector. Default value.
+] as const;

src/lib/wallbox-simulator/ocpp/types/measurandEnumType.ts

@@ -0,0 +1,26 @@
+/**
+ * ### 2.47. MeasurandEnumType
+ * _Enumeration_
+ *
+ * Allowable values of the optional "measurand" field of a Value element, as used in
+ * MeterValuesRequest and TransactionEventRequest with eventTypes Started, Ended and Updated.
+ *
+ * Default value of "measurand" is always "Energy.Active.Import.Register".
+ *
+ * MeasurandEnumType is used by: Common:SampledValueType
+ */
+export type MeasurandEnumType = typeof measurands[number];
+
+export const measurands = [
+  "Current.Export", // Instantaneous current flow from EV
+  "Current.Import", // Instantaneous current flow to EV
+  "Current.Offered", // Maximum current offered to EV
+  "Energy.Active.Export.Register", // Numerical value read from the "active electrical energy" (Wh or kWh) register of the (most authoritative) electrical meter measuring energy exported (to the grid).
+  "Energy.Active.Import.Register", // Numerical value read from the "active electrical energy" (Wh or kWh) register of the (most authoritative) electrical meter measuring energy imported (from the grid supply).
+  "Energy.Reactive.Export.Register", // Numerical value read from the "reactive electrical energy" (varh or kvarh) register of the (most authoritative) electrical meter measuring energy exported (to the grid).
+  "Energy.Reactive.Import.Register", // Numerical value read from the "reactive electrical energy" (varh or kvarh) register of the (most authoritative) electrical meter measuring energy imported (from the grid supply).
+  "Energy.Active.Export.Interval", // Absolute amount of "active electrical energy" (Wh or kWh) exported (to the grid) during an associated time "interval", specified by a Metervalues ReadingContext, and applicable interval duration configuration values (in seconds) for ClockAlignedDataInterval and TxnMeterValueSampleInterval.
+  "Energy.Active.Import.Interval", // Absolute amount of "active electrical energy" (Wh or kWh) imported (from the grid supply) during an associated time "interval", specified by a Metervalues ReadingContext, and applicable interval duration configuration values (in seconds) for ClockAlignedDataInterval and TxnMeterValueSampleInterval.
+  "Energy.Active.Net", // Numerical value read from the “net active electrical energy" (Wh or kWh) register.
+  "Energy.Reactive.Export.Interval", // Absolute amount of "reactive electrical energy" (varh or kvarh) exported (to the grid) during an associated time "interval", specified by a Metervalues ReadingContext, and applicable interval duration configuration values (in seconds) for ClockAlignedDataInterval and TxnMeterValueSampleInterval.
+] as const;

src/lib/wallbox-simulator/ocpp/types/meterValueType.ts

@@ -0,0 +1,22 @@
+import type { SampledValueType } from "./sampledValueType";
+
+/**
+ * ### 1.33. MeterValueType
+ * _Class_
+ *
+ * Collection of one or more sampled values in MeterValuesRequest and TransactionEvent. All sampled
+ * values in a MeterValue are sampled at the same point in time.
+ *
+ * MeterValueType is used by: MeterValuesRequest , TransactionEventRequest
+ */
+export type MeterValueType = {
+  /**
+   * Required. Timestamp for measured value(s).
+   */
+  timestamp: string; // Date-Time
+
+  /**
+   * Required. One or more measured values
+   */
+  sampledValue: SampledValueType[];
+};

src/lib/wallbox-simulator/ocpp/types/phaseEnumType.ts

@@ -0,0 +1,23 @@
+/**
+ * ### 2.61. PhaseEnumType
+ * _Enumeration_
+ *
+ * Phase specifies how a measured value is to be interpreted. Please note that not all values of
+ * Phase are applicable to all Measurands.
+ *
+ * PhaseEnumType is used by: Common:SampledValueType
+ */
+export type PhaseEnumType = typeof phases[number];
+
+export const phases = [
+  "L1", // Measured on L1
+  "L2", // Measured on L2
+  "L3", // Measured on L3
+  "N", // Measured on Neutral
+  "L1-N", // Measured on L1 with respect to Neutral conductor
+  "L2-N", // Measured on L2 with respect to Neutral conductor
+  "L3-N", // Measured on L3 with respect to Neutral conductor
+  "L1-L2", // Measured between L1 and L2
+  "L2-L3", // Measured between L2 and L3
+  "L3-L1", // Measured between L3 and L1
+] as const;

src/lib/wallbox-simulator/ocpp/types/readingContextEnumType.ts

@@ -0,0 +1,20 @@
+/**
+ * ### 2.63. ReadingContextEnumType
+ * _Enumeration_
+ *
+ * Values of the context field.
+ *
+ * ReadingContextEnumType is used by: Common:SampledValueType
+ */
+export type ReadingContextEnumType = typeof readingContexts[number];
+
+export const readingContexts = [
+  "Interruption.Begin", // Value taken at start of interruption.
+  "Interruption.End", // Value taken when resuming after interruption.
+  "Other", // Value for any other situations.
+  "Sample.Clock", // Value taken at clock aligned interval.
+  "Sample.Periodic", // Value taken as periodic sample relative to start time of transaction.
+  "Transaction.Begin", // Value taken at start of transaction.
+  "Transaction.End", // Value taken at end of transaction.
+  "Trigger", // Value taken in response to TriggerMessageRequest.
+] as const;