Adding and updating Servers, fixes #524

src/js/components/Servers.js

@@ -12,6 +12,7 @@ import { indexToArray } from '../util/arrays';
 import * as uiActions from '../services/ui/actions';
 import * as coreActions from '../services/core/actions';
 import * as mopidyActions from '../services/mopidy/actions';
+import { iconFromKeyword } from '../util/helpers';
 
 const Servers = ({
   match: { params: { id: serverId } },
@@ -19,27 +20,70 @@ const Servers = ({
 }) => {
   const store = useStore();
   const dispatch = useDispatch();
-  const { mopidy: { servers } } = store.getState();
+  const {
+    mopidy: {
+      servers,
+      current_server,
+      connected: mopidyConnected,
+      connecting: mopidyConnecting,
+    },
+    pusher: {
+      connected: pusherConnected,
+      connecting: pusherConnecting,
+    },
+  } = store.getState();
+
+  const addServer = () => {
+    const action = mopidyActions.addServer();
+    dispatch(action);
+    history.push(`/settings/servers/${action.server.id}`);
+  };
 
   const renderMenu = () => (
     <div className="sub-tabs__menu" id="servers-menu">
       <div className="menu__inner">
-        {indexToArray(servers).map((server) => (
-          <Link
-            history={history}
-            className="menu-item"
-            activeClassName="menu-item--active"
-            to={`/settings/servers/${server.id}`}
-            scrollTo="#servers-menu"
-            key={server.id}
-          >
-            <div className="menu-item__inner">
-              <div className="menu-item__title">
-                {server.name}
+        {indexToArray(servers).map((server) => {
+          let status = <span className="status mid_grey-text">Inactive</span>;
+          if (server.id === current_server) {
+            if (mopidyConnecting || pusherConnecting) {
+              status = <span className="status mid_grey-text">Connecting</span>
+            } else if (!mopidyConnected || !pusherConnected) {
+              status = <span className="status red-text">Disconnected</span>
+            } else if (mopidyConnected && pusherConnected) {
+              status = <span className="status green-text">Connected</span>
+            }
+          }
+          return (
+            <Link
+              history={history}
+              className="menu-item"
+              activeClassName="menu-item--active"
+              to={`/settings/servers/${server.id}`}
+              scrollTo="#servers-menu"
+              key={server.id}
+            >
+              <div className="menu-item__inner">
+                <Icon className="menu-item__icon" name={iconFromKeyword(server.name) || 'dns'} />
+                <div className="menu-item__title">
+                  {server.name}
+                </div>
+                {status}
               </div>
+            </Link>
+          );
+        })}
+        <span
+          className="menu-item menu-item--add"
+          onClick={addServer}
+        >
+          <div className="menu-item__inner">
+            <Icon className="menu-item__icon" name="add" />
+            <div className="menu-item__title">
+              Add
             </div>
-          </Link>
-        ))}
+            <span className="status mid_grey-text">New server</span>
+          </div>
+        </span>
       </div>
     </div>
   );
@@ -49,6 +93,14 @@ const Servers = ({
     const server = servers[serverId];
     if (!server) return null;
 
+    const remove = () => {
+      dispatch(mopidyActions.removeServer(server.id));
+    };
+
+    const setAsCurrent = () => {
+      dispatch(mopidyActions.setCurrentServer(server));
+    };
+
     return (
       <div className="sub-tabs__content">
         <label className="field">
@@ -66,7 +118,7 @@ const Servers = ({
           <div className="input">
             <TextField
               value={server.host}
-              onChange={value => updateServer({ id: server.id, host: value })}
+              onChange={value => dispatch(mopidyActions.updateServer({ id: server.id, host: value }))}
             />
           </div>
         </label>
@@ -76,10 +128,18 @@ const Servers = ({
             <TextField
               type="text"
               value={server.port}
-              onChange={value => updateServer({ id: server.id, port: value })}
+              onChange={value => dispatch(mopidyActions.updateServer({ id: server.id, port: value }))}
             />
           </div>
         </label>
+        <label className="field">
+          <div className="name" />
+          <div className="input">
+            <button className="button button--primary" disabled={server.id === current_server} onClick={setAsCurrent}>Switch to this server</button>
+            <button className="button button--destructive" onClick={remove}>Remove</button>
+          </div>
+        </label>
+
       </div>
     );
   };

src/js/components/SnapcastGroups.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { collate } from '../util/format';
 import { sortItems } from '../util/arrays';
+import { iconFromKeyword } from '../util/helpers';
 import VolumeControl from './Fields/VolumeControl';
 import MuteControl from './Fields/MuteControl';
 import TextField from './Fields/TextField';
@@ -106,31 +107,6 @@ const SnapcastGroups = (props) => {
         !group.clients.filter((client) => client.connected).length
       )
     );
-    const icon = () => {
-      const iconWords = [
-        { icon: 'business', words: ['office', 'work'] },
-        { icon: 'king_bed', words: ['bed'] },
-        { icon: 'weekend', words: ['lounge', 'tv', 'sitting room'] },
-        { icon: 'directions_car', words: ['garage', 'laundry'] },
-        { icon: 'fitness_center', words: ['gym'] },
-        { icon: 'kitchen', words: ['kitchen'] },
-        { icon: 'deck', words: ['deck', 'outside'] },
-        { icon: 'restaurant_menu', words: ['dining', 'dinner'] },
-        { icon: 'laptop', words: ['laptop'] },
-        { icon: 'bug_report', words: ['test', 'debug'] },
-        { icon: 'child_care', words: ['kids', 'baby'] },
-        { icon: 'smartphone', words: ['phone', 'mobile'] },
-      ];
-      const name = group.name.toLowerCase();
-      for (let item of iconWords) {
-        for (let word of item.words) {
-          if (name.match(new RegExp(`(${word})`, 'gi'))) {
-            return item.icon;
-          }
-        }
-      };
-      return 'speaker_group';
-    }
     return (
       <Link
         className={`snapcast__groups__menu-item menu-item${anyClients ? ' menu-item--no-clients' : ''}`}
@@ -141,7 +117,7 @@ const SnapcastGroups = (props) => {
         scrollTo="#services-snapcast-groups"
       >
         <div className="snapcast__groups__menu-item__inner menu-item__inner">
-          <Icon className="menu-item__icon" name={icon()} />
+          <Icon className="menu-item__icon" name={iconFromKeyword(group.name.toLowerCase()) || 'speaker_group'} />
           <div className="menu-item__title">
             {group.name}
             {group.mute && (