Add demo text provider/consumer, move state to state.ts

cypress/e2e/forms.cy.ts

@@ -22,7 +22,7 @@ describe('forms.cy.ts', () => {
         cy.get('#provider-form > input[type=submit][data-form-element="submit_add-provider"]').click()
 
         // validate created provider
-        cy.get('#provider > :nth-child(5)').within(() => {
+        cy.get('#provider > :nth-child(6)').within(() => {
             cy.get('label[data-form-element="provider-item-label_some-topic-label"]').should('have.text', someTopic)
             cy.get('input[data-form-element="provider-item-input_some-topic-input"]').should('have.attr', 'type').and('equal', 'checkbox')
         })

src/constants.ts

@@ -1,19 +1,4 @@
-// Topic -> Consumers Map
-export const TOPIC_CONSUMER_MAP = new Map<string, Array<HTMLElement>>()
 
-export function addGlobalConsumerDisplay(topic: string, consumer: HTMLElement | null): void {
-    if (consumer) {
-        if (TOPIC_CONSUMER_MAP.has(topic)) {
-            TOPIC_CONSUMER_MAP.get(topic)?.push(consumer)
-        } else {
-            TOPIC_CONSUMER_MAP.set(topic, [consumer])
-        }
-    }
-}
-
-// On provider creation submit, the new topic will be added here.
-// Can be used by consumer form, for example.
-export const AVAILABLE_TOPICS: Array<string> = []
 
 // DOM
 export const PROVIDER_CONTAINER_ID = 'provider'

src/devices/DeviceService.ts

@@ -75,18 +75,14 @@ export function createDeviceWithFormData(formData: FormData, deviceType: DeviceT
     let name = ''
     let strategyType: StrategyType | null = null
 
-    console.log('formData', formData)
-
     // I am aware, that this is technically the second time that we are looping over the same FormData,
     // but it should be feasible with this certainly limited amount of ever available from input values.
     formData.forEach((value, key) => {
         if (key === TOPIC_FORM_NAME) {
             topic = replaceSpaceWithDash(value.toString())
-            console.log('topic', topic)
         } else if (key === STRATEGIES_FORM_NAME) {
             // force TypeCast, we know that the select options are being generated by the available StrategyTypes
             strategyType = value as unknown as StrategyType
-            console.log('strategyType', strategyType)
         } else if (key === CONSUMER_FORM_NAME) {
             name = value as string
         }

src/devices/FormService.ts

@@ -1,7 +1,8 @@
-import {AVAILABLE_TOPICS, getRandomID} from '../constants'
+import {getRandomID} from '../constants'
 import {StrategyType} from './strategies/Strategy'
 import {createDeviceWithFormData, DeviceType} from './DeviceService'
 import {getFormDataAttribute, replaceSpaceWithDash, setDataAttribute} from '../domUtils'
+import {AVAILABLE_TOPICS} from '../state'
 
 export const TOPIC_FORM_NAME = 'topic'
 export const CONSUMER_FORM_NAME = 'name'

src/devices/consumer/ConsumerImpl.ts

@@ -43,6 +43,7 @@ export class ConsumerImpl extends Consumer {
 
     getElement(): HTMLElement {
         const consumerWrapper = ConsumerImpl.getConsumerWrapper(this.id, this.getLabel())
+        consumerWrapper.classList.add(`consumer-item-${this.strategy.strategyType}`)
         consumerWrapper.textContent = this.getLabel() + ': '
         consumerWrapper.appendChild(this.getDisplayElement())
 

src/devices/strategies/BooleanStrategy.ts

@@ -1,8 +1,9 @@
 import {Strategy, StrategyType} from './Strategy'
 import {EventData} from '../../entities/EventData'
 import {createBaseForm, createCustomEvent, createDeletionButton} from '../../domUtils'
-import {addGlobalConsumerDisplay, getRandomID, TOPIC_CONSUMER_MAP} from '../../constants'
+import {getRandomID} from '../../constants'
 import {createInputElement, createLabelElement} from '../FormService'
+import {addGlobalConsumerDisplay, TOPIC_CONSUMER_MAP} from '../../state'
 
 const classOff = 'bool-strategy-off'
 const classOn = 'bool-strategy-on'

src/devices/strategies/NumberStrategy.ts

@@ -1,8 +1,9 @@
 import {Strategy, StrategyType} from './Strategy'
 import {EventData} from '../../entities/EventData'
-import {addGlobalConsumerDisplay, getRandomID, TOPIC_CONSUMER_MAP} from '../../constants'
+import {getRandomID} from '../../constants'
 import {createBaseForm, createCustomEvent, createDeletionButton} from '../../domUtils'
 import {createInputElement, createLabelElement} from '../FormService'
+import {addGlobalConsumerDisplay, TOPIC_CONSUMER_MAP} from '../../state'
 
 /**
  * Strategy that represents a number input, e.g. to set the temperature of a heating device.

src/devices/strategies/TextStrategy.ts

@@ -1,15 +1,17 @@
 import {Strategy, StrategyType} from './Strategy'
 import {EventData} from '../../entities/EventData'
 import {createBaseForm, createCustomEvent, createDeletionButton} from '../../domUtils'
-import {addGlobalConsumerDisplay, getRandomID, TOPIC_CONSUMER_MAP} from '../../constants'
+import {getRandomID} from '../../constants'
 import {createInputElement, createLabelElement} from '../FormService'
+import {addGlobalConsumerDisplay, TOPIC_CONSUMER_MAP} from '../../state'
 
 export class TextStrategy extends Strategy {
     strategyType: StrategyType = StrategyType.TEXT_STRATEGY
 
     createConsumerElement(topic: string, eventData: EventData): HTMLElement {
         const consumerDisplay = document.createElement('span')
         consumerDisplay.textContent = eventData.value
+        consumerDisplay.style.color = 'blue'
         consumerDisplay.addEventListener(topic, this.update)
         addGlobalConsumerDisplay(topic, consumerDisplay)
         return consumerDisplay

src/index.ts

@@ -3,45 +3,51 @@ import {ConsumerImpl} from './devices/consumer/ConsumerImpl'
 import {BooleanStrategy} from './devices/strategies/BooleanStrategy'
 import {NumberStrategy} from './devices/strategies/NumberStrategy'
 import {createSelectOption, generateConsumerForm, generateProviderForm} from './devices/FormService'
-import {AVAILABLE_TOPICS, CONSUMER_FORM_ID, PROVIDER_FORM_ID} from './constants'
+import {CONSUMER_FORM_ID, PROVIDER_FORM_ID} from './constants'
+import {TextStrategy} from './devices/strategies/TextStrategy'
+import {AVAILABLE_TOPICS} from './state'
 
 document.getElementById('load-demo-button')?.addEventListener('click', (event) => {
     const TOPIC_LIGHT_1 = 'light-1'
     const TOPIC_LIGHT_2 = 'light-2'
     const TOPIC_HEATING_1 = 'heating-1'
+    const TOPIC_TEXT_1 = 'text-1'
     AVAILABLE_TOPICS.push(TOPIC_LIGHT_1)
     AVAILABLE_TOPICS.push(TOPIC_LIGHT_2)
     AVAILABLE_TOPICS.push(TOPIC_HEATING_1)
+    AVAILABLE_TOPICS.push(TOPIC_TEXT_1)
 
     const topicSelect = document.querySelector('#consumer-form > select[data-form-element="consumer-topic-select"]')
     topicSelect?.appendChild(createSelectOption(TOPIC_LIGHT_1))
     topicSelect?.appendChild(createSelectOption(TOPIC_LIGHT_2))
     topicSelect?.appendChild(createSelectOption(TOPIC_HEATING_1))
+    topicSelect?.appendChild(createSelectOption(TOPIC_TEXT_1))
 
     // dummy provider container
     const providerContainer = getProviderContainer()
+
     const kitchenLightProvider = new BooleanStrategy().createProviderElement(TOPIC_LIGHT_1)
     providerContainer?.appendChild(kitchenLightProvider)
     const livingRoomLightProvider = new BooleanStrategy().createProviderElement(TOPIC_LIGHT_2)
     providerContainer?.appendChild(livingRoomLightProvider)
-
     const livingRoomHeatingProvider = new NumberStrategy().createProviderElement(TOPIC_HEATING_1)
     providerContainer?.appendChild(livingRoomHeatingProvider)
+    const ledDisplayProvider = new TextStrategy().createProviderElement(TOPIC_TEXT_1)
+    providerContainer?.appendChild(ledDisplayProvider)
 
     // dummy consumer container
     const consumerContainer = getConsumerContainer()
 
     const demoConsumerKitchen1 = new ConsumerImpl(TOPIC_LIGHT_1, 'Kitchen - Light (Left)', new BooleanStrategy())
     consumerContainer?.appendChild(demoConsumerKitchen1.getElement())
-
     const demoConsumerKitchen2 = new ConsumerImpl(TOPIC_LIGHT_1, 'Kitchen - Light (Right)', new BooleanStrategy())
     consumerContainer?.appendChild(demoConsumerKitchen2.getElement())
-
     const demoConsumerLivingRoom1 = new ConsumerImpl(TOPIC_LIGHT_2, 'Living Room - Light (All)', new BooleanStrategy())
     consumerContainer?.appendChild(demoConsumerLivingRoom1.getElement())
-
     const demoConsumerLivingRoom2 = new ConsumerImpl(TOPIC_HEATING_1, 'Living Room - (Heating)', new NumberStrategy())
     consumerContainer?.appendChild(demoConsumerLivingRoom2.getElement())
+    const demoConsumerWall1 = new ConsumerImpl(TOPIC_TEXT_1, 'LED Display - (Wall)', new TextStrategy())
+    consumerContainer?.appendChild(demoConsumerWall1.getElement())
 
     // hide demo button
     const demoButton = event.target as HTMLButtonElement

src/state.ts

@@ -0,0 +1,16 @@
+// Topic -> Consumers Map
+export const TOPIC_CONSUMER_MAP = new Map<string, Array<HTMLElement>>()
+
+export function addGlobalConsumerDisplay(topic: string, consumer: HTMLElement | null): void {
+    if (consumer) {
+        if (TOPIC_CONSUMER_MAP.has(topic)) {
+            TOPIC_CONSUMER_MAP.get(topic)?.push(consumer)
+        } else {
+            TOPIC_CONSUMER_MAP.set(topic, [consumer])
+        }
+    }
+}
+
+// On provider creation submit, the new topic will be added here.
+// Can be used by consumer form, for example.
+export const AVAILABLE_TOPICS: Array<string> = []

src/test/formService.test.ts

@@ -3,7 +3,8 @@
  */
 
 import {
-    CONSUMER_FORM_NAME, createInputElement,
+    CONSUMER_FORM_NAME,
+    createInputElement,
     createLabelElement,
     createSelectOption,
     createSubmit,
@@ -12,7 +13,7 @@ import {
     STRATEGIES_FORM_NAME,
     TOPIC_FORM_NAME,
 } from '../devices/FormService'
-import {AVAILABLE_TOPICS} from '../constants'
+import {AVAILABLE_TOPICS} from '../state'
 
 const label = 'some-label'
 const topic = 'some-topic'