Tag can be added from a new page.

Author: malcolmmackay

reactapp/src/AdminPage.jsx

@@ -3,6 +3,7 @@ import {Footer, Header, Section} from "./BasePage";
 import React from "react";
 import {Link, Redirect, useLocation} from "react-router-dom";
 import {RemoveAdminToken} from "./api";
+import {AdminConfigSubMenu} from "./AdminTagPage";
 
 export function AdminLogin() {
     return (
@@ -148,11 +149,22 @@ export function AdminBC(props) {
     );
 }
 
+function TagSubMenu(props) {
+    const isHidden = !((props.activetab.toLowerCase() === "tags") || (props.activetab.toLowerCase() === "add"));
+    return (
+        <div className={isHidden ? "is-hidden" : "is-block"}>
+            <ul>
+                <MenuListElement name="Add" url={'/admin/tags/add'} active={props.activetab}/>
+            </ul>
+        </div>
+    )
+}
+
 export function AdminMenu(props) {
     return (
         <div>
             <ul className="menu-list">
-                <MenuListElement name="Tags" url="/admin/tags" active={props.activetab} />
+                <MenuListElement name="Tags" url="/admin/tags" active={props.activetab} children={<TagSubMenu name="Tags" url="/admin/tags/add" activetab={props.activetab} />} />
                 <MenuListElement name="Captures" url="/admin/captures" active={props.activetab} />
                 <MenuListElement name="Webhooks" url="/admin/webhooks" active={props.activetab} />
             </ul>

reactapp/src/AdminTagsAddPage.jsx

@@ -0,0 +1,141 @@
+import AdminTagPage, {AdminTagBC, AdminTagMenu} from "./AdminTagPage";
+import {GetAdminToken, getData, handleErrors, postData} from "./api";
+import {AdminBC, AdminMenu, AdminPage, RedirectToLogin} from "./AdminPage";
+import {
+    BulmaControl,
+    Section,
+    BulmaLabel,
+    BulmaInput,
+    BulmaCheckbox,
+    BulmaRadio,
+    BulmaField,
+    BulmaSubmit, ErrorMessage
+} from "./BasePage";
+import React from "react";
+import {Redirect, withRouter} from "react-router-dom";
+import {AdminTagsBC} from "./AdminTagsListPage";
+
+
+class AdminTagsAddPage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    GetAdminToken.call(this);
+
+    this.state = {serial: null, secretkey: null, description: null, fwversion: null, hwversion: null};
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleSubmit(event) {
+      const admintoken = this.admintoken;
+      const bearertoken = `Bearer ${admintoken}`;
+      const extraheaders = {'Authorization': bearertoken};
+      var payload = {};
+
+      if (this.state.serial) {
+          payload.serial = this.state.serial;
+      }
+
+      if (this.state.secretkey) {
+          payload.secretkey = this.state.secretkey;
+      }
+
+      if (this.state.description) {
+          payload.description = this.state.description;
+      }
+
+      if (this.state.fwversion) {
+          payload.fwversion = this.state.fwversion;
+      }
+
+      if (this.state.hwversion) {
+          payload.hwversion = this.state.hwversion;
+      }
+
+      if (event) {
+          event.preventDefault();
+      }
+
+      postData(process.env.REACT_APP_WSB_ORIGIN + '/api/admin/tags',
+        payload,
+        extraheaders)
+        .then(handleErrors)
+        .then(response => response.json())
+        .then(json => {
+        },
+        (error) => {
+            if (error) {
+                this.setState({error: error});
+            }
+        });
+  }
+
+  handleChange(event) {
+    this.setState({[event.target.id]: event.target.value});
+  }
+
+  render() {
+      const activetab = 'Add';
+      const error = this.state.error;
+      if (error) {
+          if (error.code ===401) {
+              return <RedirectToLogin error={error} />
+          }
+      }
+      return (
+          <AdminPage bc={<AdminTagsAddBC />} menu={<AdminMenu activetab={activetab} />}>
+            <ErrorMessage error={error} handleDismiss={this.handleDismiss} />
+            <Section>
+              <form onSubmit={this.handleSubmit} autoComplete="off">
+                      <BulmaField>
+                          <BulmaControl>
+                              <BulmaLabel>Serial</BulmaLabel>
+                              <BulmaInput id="serial" type="text" value={this.state.serial || ""} changeHandler={this.handleChange} maxLength={8}/>
+                          </BulmaControl>
+                      </BulmaField>
+                      <BulmaField>
+                          <BulmaControl>
+                              <BulmaLabel>Secret Key</BulmaLabel>
+                              <BulmaInput id="secretkey" type="text"  value={this.state.secretkey || ""} changeHandler={this.handleChange} maxLength={16}/>
+                          </BulmaControl>
+                      </BulmaField>
+                      <BulmaField>
+                          <BulmaControl>
+                              <BulmaLabel>Firmware Version</BulmaLabel>
+                              <BulmaInput id="fwversion" type="text" value={this.state.fwversion || ""} changeHandler={this.handleChange}/>
+                          </BulmaControl>
+                      </BulmaField>
+                      <BulmaField>
+                          <BulmaControl>
+                              <BulmaLabel>Hardware Version</BulmaLabel>
+                              <BulmaInput id="hwversion" type="text" value={this.state.hwversion || ""} changeHandler={this.handleChange } />
+                          </BulmaControl>
+                      </BulmaField>
+                      <BulmaField>
+                          <BulmaControl>
+                              <BulmaLabel>Description</BulmaLabel>
+                              <BulmaInput id="description" type="text" value={this.state.description || ""} changeHandler={this.handleChange} />
+                          </BulmaControl>
+                      </BulmaField>
+                      <BulmaSubmit/>
+                      {/* https://jsfiddle.net/ndebellas/y4dLcqkx/ */}
+              </form>
+              </Section>
+          </AdminPage>);
+
+    }
+}
+
+function AdminTagsAddBC(props) {
+    return(
+        <AdminBC>
+            <li><a href="/admin/tags" aria-current="page">Tags</a></li>
+            <li className="is-active"><a href="#" aria-current="page">Add</a></li>
+        </AdminBC>
+    );
+}
+
+
+export default withRouter(AdminTagsAddPage);

reactapp/src/App.js

@@ -29,6 +29,7 @@ import AdminConfigSerialPage from "./AdminConfigSerialPage";
 import AdminConfigNFCPage from "./AdminConfigNFCPage";
 import ConsumerConfigNFCPage from "./ConsumerConfigNFCPage";
 import ConsumerVersionPage from "./ConsumerVersionPage";
+import AdminTagsAddPage from "./AdminTagsAddPage";
 
 
 function App() {
@@ -87,6 +88,9 @@ function App() {
           <Route exact path="/admin/tags">
             <AdminTagsList />
           </Route>
+          <Route exact path="/admin/tags/add">
+            <AdminTagsAddPage />
+          </Route>
           <Route exact path="/admin/tag/:id" render={props => (
               <Redirect to={`/admin/tag/${props.match.params.id}/simulate`} />
           )} />

reactapp/src/BasePage.jsx

@@ -63,14 +63,16 @@ export function BulmaSubmit(props) {
 export function BulmaInput(props) {
   var readOnly = false;
   var disabled = false;
+  const maxLength = props.maxLength || null;
   if (props.readOnly) {
       readOnly = true;
   }
   if (props.disabled) {
       disabled = true;
   }
+
   return (
-    <input className="input" id={props.id} type={props.type} value={props.value} disabled={disabled} onChange={props.changeHandler} readOnly={readOnly} />
+    <input className="input" id={props.id} type={props.type} value={props.value} disabled={disabled} onChange={props.changeHandler} readOnly={readOnly} maxLength={maxLength}/>
   );
 }