Change the checkboxes to chips. Provide input field for extra modules

On considerations, the checkboxes were found to be limited as the
customization was limited by that interface. Now a "chip" styled
interface has been introduced alongside a text input field to add
custom packages.
An array separated by commas or newline can be feeded into the input
for bigger lists.

Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>

src/containers/home/home.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   AppBar,
   Button,
-  Checkbox,
+  Chip,
   CircularProgress,
   ClickAwayListener,
   Container,
@@ -12,9 +12,8 @@ import {
   DialogContentText,
   DialogTitle,
   FormControl,
-  FormControlLabel,
-  FormGroup,
   Grid,
+  Input,
   InputAdornment,
   List,
   ListItem,
@@ -23,6 +22,7 @@ import {
   Tab,
   Tabs,
   TextField,
+  Tooltip,
   Typography,
 } from '@material-ui/core';
 import {fade, makeStyles} from '@material-ui/core/styles';
@@ -116,25 +116,6 @@ function AlertDialog({open, handleClose, text, title, t}) {
 
 class Home extends React.Component {
 
-  deviceNames = [];
-  deviceNamesID = {};
-  state = {
-    showDeviceData: false,
-    device: {},
-    deviceLoaded: false,
-    devices: [],
-    devicesLoaded: false,
-    searchResults: [],
-    showSearch: false,
-    selectedSearchIndex: 0,
-    query: '',
-    downloading: false,
-    packages: {},
-    release_version_number: '',
-  };
-  fuzzySet;
-  basicInterface = 0;
-  confirmingBuild = false;
   packages = [
     'opkg',
     'ip6tables',
@@ -163,6 +144,26 @@ class Home extends React.Component {
     'iptables',
     'firewall',
     'luci'];
+  deviceNames = [];
+  deviceNamesID = {};
+  state = {
+    showDeviceData: false,
+    device: {},
+    deviceLoaded: false,
+    devices: [],
+    devicesLoaded: false,
+    searchResults: [],
+    showSearch: false,
+    selectedSearchIndex: 0,
+    query: '',
+    downloading: false,
+    packages: this.packages,
+    release_version_number: '',
+    packageName: '',
+  };
+  fuzzySet;
+  basicInterface = 0;
+  confirmingBuild = false;
 
   getDevicesData = () => fetch(
       'https://chef.libremesh.org/download/json/devices.json')
@@ -185,13 +186,6 @@ class Home extends React.Component {
         release_version_number: data['version_number'],
       });
     });
-    let packages = {};
-    this.packages.forEach((package_name) => {
-      packages[package_name] = true;
-    });
-    this.setState({
-      packages,
-    });
   }
 
   selectDevice = (device_name) => {
@@ -242,14 +236,6 @@ class Home extends React.Component {
     this.basicInterface = val;
   };
 
-  packageSettingChange = (event, package_name) => {
-    let packages = this.state.packages;
-    packages[package_name] = event.target.checked;
-    this.setState({
-      packages,
-    });
-  };
-
   downloadingImageIndicatorShow = (i) => {
     this.setState({
       downloading: true,
@@ -261,6 +247,37 @@ class Home extends React.Component {
     }, 1000);
   };
 
+  changeAddPackageInput = (event) => {
+    this.setState({
+      packageName: event.target.value,
+    });
+  };
+
+  deletePackage = (i) => {
+    let packages = this.state.packages;
+    packages.splice(i, 1);
+    this.setState({
+      packages,
+    });
+  };
+
+  addPackage = (event) => {
+    if ((event.which || event.keyCode) === 13 && !event.shiftKey) {
+      let packages = this.state.packages;
+      const packageArray = this.state.packageName.split(/[,\n]+/);
+      packageArray.forEach((package_name) => {
+        package_name = package_name.replace(' ', '');
+        if (package_name !== '') {
+          packages.push(package_name);
+        }
+      });
+      this.setState({
+        packages,
+        packageName: '',
+      });
+    }
+  };
+
   closeConfirmBuildDialog = (v) => {
     this.confirmingBuild = false;
     console.log(v);
@@ -419,34 +436,39 @@ class Home extends React.Component {
                         </TabContainer>
                     ) : (
                         <TabContainer>
-                          <FormGroup row>
+                          <Paper elevation={0} className="package-list-input">
-                            {
+                            <div>
-                              this.packages.map((package_name, i) => {
+                              {
-                                return (
+                                this.state.packages.map((package_name, i) => {
-                                    <FormControlLabel
+                                  return (
-                                        className="package"
+                                      <Chip className="package"
-                                        key={i}
+                                            key={package_name + i}
-                                        control={
+                                            onDelete={() => this.deletePackage(
-                                          <Checkbox
+                                                i)}
-                                              onChange={(event) => this.packageSettingChange(
+                                            label={package_name}
-                                                  event, package_name)}
+                                      />
-                                              value={this.state.packages[package_name]}
+                                  );
-                                              checked={this.state.packages[package_name]}
+                                })
-                                          />
+                              }
-                                        }
+                              <Tooltip
-                                        label={package_name}
+                                  title={<span>Use comma or new line separated array.  <br/>Press enter to apply.</span>}>
-                                    />
+                                <Input
-                                );
+                                    multiline
-                              })
+                                    value={this.state.packageName}
-                            }
+                                    onKeyUp={this.addPackage}
-                          </FormGroup>
+                                    onChange={this.changeAddPackageInput}
-                          <br/>
+                                    placeholder={this.props.t('Add package(s)')}
-                          <Button variant="outlined" color="primary"
+                                />
-                                  onClick={this.openConfirmBuildDialog}>
+                              </Tooltip>
-                            <BuildIcon/>
+                            </div>
-                            &nbsp;
+                            <br/>
-                            {this.props.t('Build')}
+                            <Button variant="outlined" color="primary"
-                          </Button>
+                                    onClick={this.openConfirmBuildDialog}>
+                              <BuildIcon/>
+                              &nbsp;
+                              {this.props.t('Build')}
+                            </Button>
+                          </Paper>
                         </TabContainer>
                     )
                   }

src/containers/home/home.scss

@@ -53,9 +53,11 @@
       background-color: #fff;
       z-index: 9;
       overflow: hidden;
+
       .interface-switch {
         color: #000;
       }
+
       .advanced-settings {
         border: 1px solid #999;
         background-color: #f0f0f0;
@@ -73,22 +75,24 @@
           padding-top: 30px;
           background-color: #fff;
         }
+      }
+    }
 
-        .package {
+    .package-list-input {
-          padding-right: 15px;
+      .package {
-          padding-left: 5px;
+        margin: 5px 10px 5px 0px;
-          border-radius: 30px;
+        border-radius: 30px;
-          user-select: none;
+        vertical-align: middle;
-        }
+        user-select: none;
+      }
 
-        .package:hover {
+      .package:hover {
-          background-color: #f0f0f0;
+        background-color: #f0f0f0;
-        }
+      }
 
-        .package:focus, .package:active {
+      .package:focus, .package:active {
-          transition: .2s;
+        transition: .2s;
-          background-color: darken(#f0f0f0, 15%);
+        background-color: darken(#f0f0f0, 15%);
-        }
       }
     }
   }

src/locales/de.json

@@ -14,6 +14,7 @@
     "Advanced": "Fortgeschritten",
     "Build": "Bauen",
     "Cancel": "Abbrechen",
+    "Add package(s)": "Paket (e) hinzufügen",
     "Please confirm that you want to perform this action": "Bitte bestätigen Sie, dass Sie diese Aktion ausführen möchten",
     "Building image requires computation resources, so we would request you to check if this selection is what you want": "Das Erstellen eines Image erfordert Rechenressourcen. Wir bitten Sie daher, zu prüfen, ob diese Auswahl Ihren Wünschen entspricht",
     "Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.": "Geräte mit ≤4MB Flash und / oder ≤32MB RAM funktionieren, sind jedoch sehr eingeschränkt (normalerweise können sie keine zusätzlichen Pakete installieren oder ausführen), da sie über wenig RAM und Flash-Speicher verfügen. Berücksichtigen Sie dies, wenn Sie ein Gerät zum Kaufen auswählen oder wenn Sie OpenWrt auf Ihrem Gerät flashen, da es als unterstützt aufgeführt ist Zusätzliche Pakete können nicht installiert oder ausgeführt werden, da sie über wenig RAM und wenig Flash-Speicher verfügen. Berücksichtigen Sie dies, wenn Sie ein Gerät zum Kaufen auswählen oder wenn Sie sich entscheiden, OpenWrt auf Ihrem Gerät zu flashen, da es als unterstützt aufgeführt ist.",

src/locales/en.json

@@ -14,6 +14,7 @@
     "Advanced": "Advanced",
     "Build": "Build",
     "Cancel": "Cancel",
+    "Add package(s)": "Add package(s)",
     "Please confirm that you want to perform this action": "Please confirm that you want to perform this action",
     "Building image requires computation resources, so we would request you to check if this selection is what you want": "Building image requires computation resources, so we would request you to check if this selection is what you want",
     "Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.": "Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.",