Repository created

src/UI.js

@@ -0,0 +1,53 @@
+import { render, remove } from 'mcf-components'
+
+import { DefinedObject } from 'mcf-objects/src'
+
+import form from './components/form'
+import errorsDialog from './components/errorsDialog'
+
+
+const uiDefinition = {
+  htmlReference: { TYPE: 'string', required: true },
+
+  name: { TYPE: 'string' },
+  book: { TYPE: 'enum', availableValues: ['lor', 'sfi', 'tgr'] },
+
+  imageList:    { TYPE: 'array' },
+  activityList: { TYPE: 'array', maxLength: 3 },
+}
+const uiInitialValues = {
+  name: '',
+  imageList: [],
+  activityList: [],
+}
+
+export default class UI extends DefinedObject {
+  constructor(params, onSubmit) {
+    super({
+      fields: uiDefinition,
+      values: params,
+    })
+
+    this.onSubmit = onSubmit
+    this.setValue(uiInitialValues)
+  }
+
+  checkParams() {
+    const errors = []
+    if (!this.getValue().name) errors.push('Name')
+    if (!this.getValue().book) errors.push('Book')
+    if (this.getValue().imageList.length === 0) errors.push('Image')
+    if (this.getValue().activityList.length === 0) errors.push('Activity')
+    return errors
+  }
+
+  manageErrors(errors) {
+    remove(this.getValue().htmlReference)
+    render(errorsDialog(this, errors), this.getValue().htmlReference)
+  }
+
+  renderPage() {
+    remove(this.getValue().htmlReference)
+    render(form(this), this.getValue().htmlReference)
+  }
+}

src/components/activitiesDialog.js

@@ -0,0 +1,26 @@
+import activityOptions from './activityOptions'
+
+export default function activityDialog (ui) {
+  return {
+    type: 'dialog',
+    params: {
+      id: 'activities',
+      titleText: 'Activities',
+      contentText: 'Select one activity',
+      openButtonVariant: 'contained',
+      openButtonColor: 'primary',
+      openButtonText: 'Activities',
+      closeButtonVariant: 'contained',
+      closeButtonColor: 'primary',
+      closeButtonText: 'Close',
+      open: false,
+      openListener: function () {},
+      closeListener: function () {},
+      contents: [
+        activityOptions(ui),
+      ],
+      actionContents: [],
+    },
+  }
+}
+

src/components/activityOptions.js

@@ -0,0 +1,31 @@
+export default function activityOptions (ui) {
+  return {
+    type: 'checkboxesGroup',
+    params: {
+      id: 'activitiesOptions',
+      label: 'Funny activities',
+      helperText: 'Which one is for you?',
+      isRow: false,
+      checkboxes: [
+        {
+          id: 'nothing',
+          checked: false,
+          label: 'Do nothing',
+        },
+        {
+          id: 'friends',
+          checked: false,
+          label: 'Enjoy with friends',
+        },
+        {
+          id: 'programming',
+          checked: false,
+          label: 'Programming',
+        },
+      ],
+      onChangeListener: (function (id, value) {
+        ui.updateArrayField('activityList', id, value)
+      }),
+    },
+  }
+}

src/components/booksSelection.js

@@ -0,0 +1,24 @@
+export default function booksSelection (ui) {
+  return {
+    type: 'select',
+    params: {
+      id: 'booksOptions',
+      disabled: false,
+      error: false,
+      required: false,
+      shrink: false,
+      label: 'Books',
+      value: '',
+      displayEmpty: false,
+      autoWidth: false,
+      readOnly: false,
+      helperText: 'Select your favourite',
+      elementsList: [
+        {name: 'Lord of the Rings', value: 'lor'},
+        {name: 'Song of fire and ice', value: 'sfi'},
+        {name: 'Think and Grow Rich', value: 'tgr'},
+      ],
+      onSelectListener: function (value) {ui.setValue({book: value})},
+    },
+  }
+}

src/components/diversityImageCard.js

@@ -0,0 +1,30 @@
+export default function diversityImageCard(ui) {
+  return {
+    type: 'mediaCard',
+    params: {
+      id: 'diversityLike',
+      mainText: 'Diversity',
+      secondaryText: 'Click if like',
+      imageURL: 'https://i0.wp.com/www.ampaeb.cat/wp-content/uploads/2017/11/diversidad-funcional.jpg?resize=880%2C360&ssl=1',
+      imageTitle: 'Diversity',
+      imageAlt: 'A paper children circle joined by their hands',
+      contents: [
+        {
+          type: 'button',
+          params: {
+            id: 'diversityButton',
+            text: 'Like',
+            variant: 'contained',
+            color: 'primary',
+            size: 'medium',
+            disabled: false,
+            onClickListener: function () {
+              ui.updateArrayField('imageList', 'diversity', true)
+            },
+          },
+        },
+      ],
+    },
+  }
+}
+

src/components/errorsDialog.js

@@ -0,0 +1,33 @@
+
+
+export default function errorsDialog (ui, errors) {
+  let errorMessage = 'Please, review the inputs:'
+  for (const error of errors){
+    errorMessage += '  · ' + error
+  }
+
+  return {
+    type: 'dialog',
+    params: {
+      id: 'errors',
+      titleText: 'Check errors',
+      contentText: errorMessage,
+      openButtonVariant: 'text',
+      openButtonColor: 'primary',
+      openButtonText: 'Result',
+      closeButtonVariant: 'contained',
+      closeButtonColor: 'primary',
+      closeButtonText: 'Close',
+      open: true,
+      openListener: function () {
+      },
+      closeListener: function () {
+        ui.renderPage()
+      },
+      contents: [
+      ],
+      actionContents: [],
+    },
+  }
+}
+

src/components/feminismImageCard.js

@@ -0,0 +1,30 @@
+export default function feminismImageCard(ui) {
+  return {
+    type: 'mediaCard',
+    params: {
+      id: 'feminismLike',
+      mainText: 'Feminism',
+      secondaryText: 'Click if like',
+      imageURL: 'https://www.conservativewoman.co.uk/wp-content/uploads/2019/03/feminism.jpg',
+      imageTitle: 'Feminism',
+      imageAlt: 'Women hands join in a stack',
+      contents: [
+        {
+          type: 'button',
+          params: {
+            id: 'feminismButton',
+            text: 'Like',
+            variant: 'contained',
+            color: 'primary',
+            size: 'medium',
+            disabled: false,
+            onClickListener: function () {
+              ui.updateArrayField('imageList', 'feminism', true)
+            },
+          },
+        },
+      ],
+    },
+  }
+}
+

src/components/form.js

@@ -0,0 +1,39 @@
+import nameText from './nameText'
+import feminismImageCard from './feminismImageCard'
+import paperWorkImageCard from './paperWorkImageCard'
+import submitFormButton from './submitFormButton'
+import diversityImageCard from './diversityImageCard'
+import activitiesDialog from './activitiesDialog'
+import booksSelection from './booksSelection'
+
+export default function form(ui) {
+
+  return {
+    type: 'card',
+    params: {
+      id: 'mainContainer',
+      mainText: 'Kaleider tester',
+      secondaryText: '',
+      contents: [
+        {
+          type: 'card',
+          params: {
+            id: 'infoContainer',
+            mainText: '',
+            secondaryText: '',
+            contents: [
+              nameText(ui),
+              feminismImageCard(ui),
+              diversityImageCard(ui),
+              paperWorkImageCard(ui),
+              activitiesDialog(ui),
+              booksSelection(ui),
+            ],
+          },
+        },
+        {type: 'divider', params: {id: 'submitButtonDivider'}},
+        submitFormButton(ui),
+      ],
+    },
+  }
+}

src/components/nameText.js

@@ -0,0 +1,25 @@
+export default function nameText(ui) {
+  const onChange = params => {
+    ui.setValue({name: params.value})
+  }
+
+  return {
+    type: 'text',
+    params: {
+      id: 'name',
+      label: 'Name',
+      helperText: 'Write your name',
+      value: ui.getValue().name,
+      margin: 'normal',
+      required: false,
+      error: false,
+      disabled: false,
+      placeholder: 'Site',
+      fullWidth: false,
+      variant: 'standard',
+      type: 'text',
+      shrink: true,
+      onChangeListener: onChange,
+    },
+  }
+}

src/components/paperWorkImageCard.js

@@ -0,0 +1,30 @@
+export default function paperWorkImageCard(ui) {
+  return {
+    type: 'mediaCard',
+    params: {
+      id: 'paperWorkLike',
+      mainText: 'Paper work',
+      secondaryText: 'Click if like',
+      imageURL: 'https://hermandadblanca.org/wp-content/uploads/2016/06/hermandadblanca_org_pereza1-620x465.jpg',
+      imageTitle: 'Paper work',
+      imageAlt: 'A person surrounded by paper and a laptop yawning',
+      contents: [
+        {
+          type: 'button',
+          params: {
+            id: 'paperWorkButton',
+            text: 'Like',
+            variant: 'contained',
+            color: 'primary',
+            size: 'medium',
+            disabled: false,
+            onClickListener: function () {
+              ui.updateArrayField('imageList', 'paperWork', true)
+            },
+          },
+        },
+      ],
+    },
+  }
+}
+

src/components/resultDialog.js

@@ -0,0 +1,31 @@
+
+
+export default function resultDialog (ui, isPassed) {
+  const passText = 'You are a kaleider!!'
+  const doNotPassText = "No, you aren't a kaleider"
+
+  return {
+    type: 'dialog',
+    params: {
+      id: 'result',
+      titleText: 'Test result',
+      contentText: 'The test result is: ' + (isPassed ? passText : doNotPassText),
+      openButtonVariant: 'text',
+      openButtonColor: 'primary',
+      openButtonText: 'Result',
+      closeButtonVariant: 'contained',
+      closeButtonColor: 'primary',
+      closeButtonText: 'Close',
+      open: true,
+      openListener: function () {
+      },
+      closeListener: function () {
+        ui.renderPage()
+      },
+      contents: [
+      ],
+      actionContents: [],
+    },
+  }
+}
+

src/components/submitFormButton.js

@@ -0,0 +1,19 @@
+export default function submitFormButton(ui) {
+  const onClick = function () {
+    const errors = ui.checkParams()
+    errors.length > 0 ? ui.manageErrors(errors) : ui.onSubmit(ui.getValue())
+  }
+  
+  return {
+    type: 'button',
+    params: {
+      id: 'submitFormButton',
+      text: 'Check it!',
+      variant: 'contained',
+      color: 'primary',
+      size: 'medium',
+      disabled: false,
+      onClickListener: onClick,
+    },
+  }
+}

src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofollow">
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
+
+    <title>Kaleider tester</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/index.js

@@ -0,0 +1,26 @@
+import './styles.css'
+
+import {remove, render} from 'mcf-components'
+
+import resultDialog from './components/resultDialog'
+import UI from './UI'
+
+
+const htmlReference = 'app'
+const ui = new UI({htmlReference: htmlReference}, onSubmit)
+
+function onSubmit(uiOutput) {
+  let result = true
+
+  if (uiOutput.book === 'tgr' || uiOutput.imageList.includes('paperWork') || uiOutput.activityList.includes('nothing')) result = false
+
+  remove(htmlReference)
+  render(resultDialog(ui, result), htmlReference)
+}
+
+function initPage() {
+  ui.renderPage()
+}
+
+
+initPage()

src/styles.css

@@ -0,0 +1,6 @@
+html {
+  background-color: #dcb4df;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}