add text_strategy, small clean up of provider and form generation

README.md

@@ -2,7 +2,9 @@
 
 > First Commit: 2022-06-03
 
-> Last Commit: 2022-06-06 (Added eslint on 2022-06-07)
+> Last Commit before hand-in: 2022-06-06
+
+> Commits after: 'Added eslint', 'small refactoring of provider and consumer div creation', 'added Text-Strategy'
 
 > Contact: M. Voss
 

src/devices/DeviceService.ts

@@ -5,6 +5,7 @@ import {getConsumerContainer, getProviderContainer, replaceSpaceWithDash} from '
 import {CONSUMER_FORM_NAME, STRATEGIES_FORM_NAME, TOPIC_FORM_NAME} from './FormService'
 import {ConsumerImpl} from './consumer/ConsumerImpl'
 import {Consumer} from './consumer/Consumer'
+import {TextStrategy} from './strategies/TextStrategy'
 
 /**
  * Creates a provider element for the given topic and strategy type.
@@ -16,12 +17,15 @@ export function createProvider(topic: string, strategyType: StrategyType): HTMLE
 
     if (strategyType != null) {
         switch (strategyType) {
-        case StrategyType.BOOLEAN_STRATEGY.valueOf():
+        case StrategyType.BOOLEAN_STRATEGY:
             result = new BooleanStrategy().createProviderElement(topic)
             break
-        case StrategyType.NUMBER_STRATEGY.valueOf():
+        case StrategyType.NUMBER_STRATEGY:
             result = new NumberStrategy().createProviderElement(topic)
             break
+        case StrategyType.TEXT_STRATEGY:
+            result = new TextStrategy().createProviderElement(topic)
+            break
         default:
             console.error('Cannot create provider for non existent strategy: ', strategyType)
             break
@@ -42,14 +46,17 @@ export function createConsumer(topic: string, label: string, strategyType: Strat
 
     if (strategyType != null) {
         switch (strategyType) {
-        case StrategyType.BOOLEAN_STRATEGY.valueOf():
+        case StrategyType.BOOLEAN_STRATEGY:
             result = new ConsumerImpl(topic, label, new BooleanStrategy())
             break
-        case StrategyType.NUMBER_STRATEGY.valueOf():
+        case StrategyType.NUMBER_STRATEGY:
             result = new ConsumerImpl(topic, label, new NumberStrategy())
             break
+        case StrategyType.TEXT_STRATEGY:
+            result = new ConsumerImpl(topic, label, new TextStrategy())
+            break
         default:
-            console.error('Cannot create provider for non existent strategy: ', strategyType)
+            console.error('Cannot create consumer for non existent strategy: ', strategyType)
             break
         }
     }
@@ -68,14 +75,18 @@ 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
         }
@@ -84,7 +95,7 @@ export function createDeviceWithFormData(formData: FormData, deviceType: DeviceT
     // generate new provider and add to container
     if ((topic && topic.length > 0) && strategyType) {
         const consumerElement = createConsumer(topic, name, strategyType)?.getElement()
-        
+
         switch (deviceType) {
         case DeviceType.PROVIDER:
             getProviderContainer()?.appendChild(createProvider(topic, strategyType))

src/devices/strategies/BooleanStrategy.ts

@@ -1,6 +1,6 @@
 import {Strategy, StrategyType} from './Strategy'
 import {EventData} from '../../entities/EventData'
-import {createCustomEvent, createDeletionButton} from '../../domUtils'
+import {createBaseForm, createCustomEvent, createDeletionButton} from '../../domUtils'
 import {addGlobalConsumerDisplay, getRandomID, TOPIC_CONSUMER_MAP} from '../../constants'
 import {createInputElement, createLabelElement} from '../FormService'
 
@@ -53,17 +53,15 @@ export class BooleanStrategy extends Strategy {
 
     createProviderElement(topic: string, label?: string): HTMLElement {
         const formId = getRandomID()
-        const formElement = document.createElement('form')
-        formElement.id = formId
-        formElement.classList.add('bool-strategy-form')
+        const formElement = createBaseForm(formId, 'bool-strategy')
 
-        const randomID = getRandomID()
-        const labelElement = createLabelElement(randomID, label ? label : topic, 'provider-item-label_' + topic)
+        const labelID = getRandomID()
+        const labelElement = createLabelElement(labelID, label ? label : topic, 'provider-item-label_' + topic)
         formElement.appendChild(labelElement)
 
-        const inputElement = createInputElement(randomID, 'provider-item-input_' + topic, 'checkbox')
+        const inputElement = createInputElement(labelID, 'provider-item-input_' + topic, 'checkbox')
         inputElement.setAttribute('name', label ? label : topic)
-        inputElement.addEventListener('change', (event) => this.dispatchEvent(event, topic, randomID))
+        inputElement.addEventListener('change', (event) => this.dispatchEvent(event, topic, labelID))
         formElement.appendChild(inputElement)
 
         formElement.appendChild(createDeletionButton(formId))

src/devices/strategies/NumberStrategy.ts

@@ -1,7 +1,7 @@
 import {Strategy, StrategyType} from './Strategy'
 import {EventData} from '../../entities/EventData'
 import {addGlobalConsumerDisplay, getRandomID, TOPIC_CONSUMER_MAP} from '../../constants'
-import {createCustomEvent, createDeletionButton} from '../../domUtils'
+import {createBaseForm, createCustomEvent, createDeletionButton} from '../../domUtils'
 import {createInputElement, createLabelElement} from '../FormService'
 
 /**
@@ -29,21 +29,19 @@ export class NumberStrategy extends Strategy {
      */
     createProviderElement(topic: string, label?: string): HTMLElement {
         const formId = getRandomID()
-        const formElement = document.createElement('form')
-        formElement.classList.add('number-strategy-form')
-        formElement.id = formId
+        const formElement = createBaseForm(formId, 'number-strategy')
 
-        const randomID = getRandomID()
-        const labelElement = createLabelElement(randomID, label ? label : topic, 'provider-item-label_' + topic)
+        const labelID = getRandomID()
+        const labelElement = createLabelElement(labelID, label ? label : topic, 'provider-item-label_' + topic)
         formElement.appendChild(labelElement)
 
-        const inputElement = createInputElement(randomID, 'provider-item-input_' + topic, 'number')
+        const inputElement = createInputElement(labelID, 'provider-item-input_' + topic, 'number')
         inputElement.setAttribute('name', label ? label : topic)
         inputElement.setAttribute('min', '0')
         inputElement.setAttribute('max', '1')
         inputElement.setAttribute('step', '0.1')
         inputElement.setAttribute('placeholder', '% max. value')
-        inputElement.addEventListener('change', (event) => this.dispatchEvent(event, topic, randomID))
+        inputElement.addEventListener('change', (event) => this.dispatchEvent(event, topic, labelID))
         formElement.appendChild(inputElement)
 
         formElement.appendChild(createDeletionButton(formId))

src/devices/strategies/Strategy.ts

@@ -24,7 +24,7 @@ export abstract class Strategy {
     /**
      * @param event -> dispatches data for its topic
      */
-    abstract dispatchEvent(event: Event): void;
+    abstract dispatchEvent(event: Event, ...args: string[]): void;
 
     /**
      * Updates the underlying div that represents the display / api for implementing strategy
@@ -36,5 +36,6 @@ export abstract class Strategy {
 
 export enum StrategyType {
     BOOLEAN_STRATEGY = 'BOOLEAN_STRATEGY',
-    NUMBER_STRATEGY = 'NUMBER_STRATEGY'
+    NUMBER_STRATEGY = 'NUMBER_STRATEGY',
+    TEXT_STRATEGY = 'TEXT_STRATEGY'
 }

src/devices/strategies/TextStrategy.ts

@@ -0,0 +1,59 @@
+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 {createInputElement, createLabelElement} from '../FormService'
+
+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.addEventListener(topic, this.update)
+        addGlobalConsumerDisplay(topic, consumerDisplay)
+        return consumerDisplay
+    }
+
+    createProviderElement(topic: string, label?: string): HTMLElement {
+        const formID = getRandomID()
+        const form = createBaseForm(formID, 'text-strategy')
+
+        const labelID = getRandomID()
+        const labelElement = createLabelElement(labelID, label ? label : topic, 'provider-item-label_' + topic)
+        form.appendChild(labelElement)
+
+        const inputElement = createInputElement(labelID, 'provider-item-input_' + topic, 'text')
+        inputElement.setAttribute('name', label ? label : topic)
+        inputElement.setAttribute('placeholder', 'some led display')
+        inputElement.addEventListener('input', (event) => this.dispatchEvent(event, topic, labelID))
+        form.appendChild(inputElement)
+
+        form.appendChild(createDeletionButton(formID))
+
+        return form
+    }
+
+    dispatchEvent(event: Event, ...args: string[]): void {
+        const topic = args[0] as string
+        const randomID = args[1] as string
+        const textField = event.target as HTMLInputElement
+        const changeEvent = createCustomEvent(topic, randomID, textField?.value)
+        const consumers = TOPIC_CONSUMER_MAP.get(topic)
+        consumers?.forEach(item => {
+            item.dispatchEvent(changeEvent)
+        })
+    }
+
+    update(event: Event): void {
+        const eventData: EventData = (<CustomEvent>event).detail as EventData
+
+        // force typecast
+        const displayElement = this as unknown as HTMLSpanElement
+
+        if (displayElement) {
+            displayElement.textContent = eventData.value
+        }
+    }
+
+}

src/domUtils.ts

@@ -23,6 +23,14 @@ export function replaceSpaceWithDash(value: string) {
     return value?.replaceAll(' ', '-').toLowerCase()
 }
 
+export function createBaseForm(id: string, label: string): HTMLFormElement {
+    const formElement = document.createElement('form')
+    formElement.classList.add(`${label}-form`)
+    formElement.id = id
+
+    return formElement
+}
+
 export function createDataAttribute(suffix: string, value: any): DataAttribute {
     return {
         type: 'data-' + suffix,