Add BooleanField

4 files changed, 83 insertions, 6 deletions

diff --git a/frontend/src/components/fields/BooleanField.js b/frontend/src/components/fields/BooleanField.js
new file mode 100644
index 0000000..06a6da7
--- /dev/null
+++ b/frontend/src/components/fields/BooleanField.js
@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import './BooleanField.scss';
+import {randomClassName} from "../../utils";
+
+const classNames = require('classnames');
+
+class BooleanField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.id = `field-${this.props.name || "noname"}-${randomClassName()}`;
+    }
+
+    render() {
+
+        const checked = this.props.checked || false;
+        const small = this.props.small || false;
+        const name = this.props.name || null;
+        const handler = () => {
+            if (this.props.onChange) {
+                this.props.onChange(!checked);
+            }
+        };
+
+        return (
+            <div className={classNames( "boolean-field", {"field-checked" : checked}, {"field-small": small})}>
+                <div className="field-input">
+                    <input type="checkbox" id={this.id} checked={checked} onChange={handler} />
+                    <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + name}</label>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default BooleanField;
diff --git a/frontend/src/components/fields/BooleanField.scss b/frontend/src/components/fields/BooleanField.scss
new file mode 100644
index 0000000..6ec25f7
--- /dev/null
+++ b/frontend/src/components/fields/BooleanField.scss
@@ -0,0 +1,34 @@
+@import '../../colors.scss';
+
+.boolean-field {
+  font-size: 0.9em;
+
+  .field-input {
+    border-radius: 5px;
+    width: fit-content;
+    background-color: $color-primary-2;
+
+    input {
+      display: none;
+    }
+
+    label {
+      margin: 0;
+      padding: 6px 15px;
+      cursor: pointer;
+    }
+
+    &:hover {
+      background-color: $color-primary-1;
+    }
+  }
+
+  &.field-checked .field-input {
+    background-color: $color-primary-4 !important;
+    color: $color-primary-3;
+  }
+
+  &.field-small {
+    font-size: 0.8em;
+  }
+}
diff --git a/frontend/src/components/fields/StringField.js b/frontend/src/components/fields/StringField.js
index aa23fe8..7781b2d 100644
--- a/frontend/src/components/fields/StringField.js
+++ b/frontend/src/components/fields/StringField.js
@@ -6,8 +6,14 @@ const classNames = require('classnames');
 
 class StringField extends Component {
 
+    constructor(props) {
+        super(props);
+
+        this.id = `field-${this.props.name || "noname"}-${randomClassName()}`;
+    }
+
     render() {
-        const id = `field-${this.props.name || "noname"}-${randomClassName()}`;
+
         const active = this.props.active || false;
         const invalid = this.props.invalid || false;
         const small = this.props.small || false;
@@ -27,18 +33,18 @@ class StringField extends Component {
         };
 
         return (
-            <div className={classNames("field", "string-field", {"field-active" : active},
-                {"field-invalid": invalid}, {"field-small": small}, {"field-inline": inline})}>
+            <div className={classNames("string-field", {"field-active" : active}, {"field-invalid": invalid},
+                {"field-small": small}, {"field-inline": inline})}>
                 <div className="field-wrapper">
                     { name &&
                     <div className="field-name">
-                        <label id={id}>{name}:</label>
+                        <label id={this.id}>{name}:</label>
                     </div>
                     }
                     <div className="field-input">
                         <div className="field-value">
                             <input type={type} placeholder={this.props.defaultValue} aria-label={name}
-                                   aria-describedby={id} onChange={handler} value={value} />
+                                   aria-describedby={this.id} onChange={handler} value={value} />
                         </div>
                         { value !== "" &&
                         <div className="field-clear">
diff --git a/frontend/src/components/fields/StringField.scss b/frontend/src/components/fields/StringField.scss
index 674815f..2523c8d 100644
--- a/frontend/src/components/fields/StringField.scss
+++ b/frontend/src/components/fields/StringField.scss
@@ -1,6 +1,6 @@
 @import '../../colors.scss';
 
-.field {
+.string-field {
   font-size: 0.9em;
 
   .field-name {