React input editor

package.json

@@ -21,6 +21,7 @@
     "antd": "^3.21.3",
     "axios": "^0.19.0",
     "babel-plugin-import": "^1.12.0",
+    "color-interpolate": "^1.0.5",
     "connected-react-router": "^6.5.2",
     "deck.gl": "^7.2.2",
     "electron-updater": "^4.1.2",

src/renderer/actions/inputEditor.js

@@ -15,6 +15,8 @@ export const REQUEST_MAPDATA = 'REQUEST_MAPDATA';
 export const RECEIVE_MAPDATA = 'RECEIVE_MAPDATA';
 export const SET_SELECTED = 'SET_SELECTED';
 export const UPDATE_INPUTDATA = 'UPDATE_INPUTDATA';
+export const UPDATE_YEARSCHEDULE = 'UPDATE_YEARSCHEDULE';
+export const UPDATE_DAYSCHEDULE = 'UPDATE_DAYSCHEDULE';
 export const DELETE_BUILDINGS = 'DELETE_BUILDINGS';
 export const SAVE_INPUTDATA = 'SAVE_INPUTDATA';
 export const SAVE_INPUTDATA_SUCCESS = 'SAVE_INPUTDATA_SUCCESS';
@@ -38,69 +40,69 @@ export const fetchInputData = () =>
 export const saveChanges = () => (dispatch, getState) =>
   // eslint-disable-next-line no-undef
   new Promise((resolve, reject) => {
-    const { tables, geojsons, crs } = getState().inputData;
+    const { tables, geojsons, crs, schedules } = getState().inputData;
     dispatch(
       httpAction({
         url: '/inputs/all-inputs',
         method: 'PUT',
         type: SAVE_INPUTDATA,
-        data: { tables, geojsons, crs },
+        data: { tables, geojsons, crs, schedules },
         onSuccess: data => resolve(data),
         onFailure: error => reject(error)
       })
     );
   });
 
-export const fetchBuildingSchedule = buildings => (dispatch, getState) => {
-  const toFetch = buildings.filter(
-    building => !Object.keys(getState().inputData.schedules).includes(building)
+export const fetchBuildingSchedule = buildings => dispatch => {
+  dispatch({ type: REQUEST_BUILDINGSCHEDULE });
+  let errors = {};
+  const promises = buildings.map(building =>
+    axios
+      .get(`http://localhost:5050/api/inputs/building-schedule/${building}`)
+      .then(resp => {
+        return { [building]: resp.data };
+      })
+      .catch(error => {
+        errors[building] = error.response.data;
+      })
   );
-  if (toFetch.length) {
-    dispatch({ type: REQUEST_BUILDINGSCHEDULE });
-    let errors = {};
-    const promises = buildings.map(building =>
-      axios
-        .get(`http://localhost:5050/api/inputs/building-schedule/${building}`)
-        .then(resp => {
-          return { [building]: resp.data };
-        })
-        .catch(error => {
-          errors[building] = error.response.data;
-        })
-    );
-    // eslint-disable-next-line no-undef
-    return Promise.all(promises).then(values => {
-      if (Object.keys(errors).length) {
-        throw errors;
-      } else {
-        let out = {};
-        for (const schedule of values) {
-          const building = Object.keys(schedule)[0];
-          out[building] = schedule[building];
-        }
-        dispatch({
-          type: REQUEST_BUILDINGSCHEDULE_SUCCESS,
-          payload: out
-        });
-      }
-    });
-  }
   // eslint-disable-next-line no-undef
-  return Promise.resolve();
+  return Promise.all(promises).then(values => {
+    if (Object.keys(errors).length) {
+      throw errors;
+    } else {
+      let out = {};
+      for (const schedule of values) {
+        const building = Object.keys(schedule)[0];
+        out[building] = schedule[building];
+      }
+      dispatch({
+        type: REQUEST_BUILDINGSCHEDULE_SUCCESS,
+        payload: out
+      });
+    }
+  });
 };
 
-export const discardChanges = () => dispatch =>
+export const discardChanges = () => (dispatch, getState) =>
   // eslint-disable-next-line no-undef
-  new Promise((resolve, reject) => {
-    dispatch(
-      httpAction({
-        url: '/inputs/all-inputs',
-        type: DISCARD_INPUTDATA_CHANGES,
-        onSuccess: data => resolve(data),
-        onFailure: error => reject(error)
-      })
-    );
-  });
+  Promise.all([
+    // eslint-disable-next-line no-undef
+    new Promise((resolve, reject) => {
+      dispatch(
+        httpAction({
+          url: '/inputs/all-inputs',
+          type: DISCARD_INPUTDATA_CHANGES,
+          onSuccess: data => resolve(data),
+          onFailure: error => reject(error)
+        })
+      );
+    }),
+    fetchBuildingSchedule(Object.keys(getState().inputData.schedules))(
+      dispatch,
+      getState
+    )
+  ]);
 
 export const updateInputData = (
   table = '',
@@ -111,6 +113,22 @@ export const updateInputData = (
   payload: { table, buildings, properties }
 });
 
+export const updateYearSchedule = (buildings = [], month = '', value = 0) => ({
+  type: UPDATE_YEARSCHEDULE,
+  payload: { buildings, month, value }
+});
+
+export const updateDaySchedule = (
+  buildings = [],
+  tab = '',
+  day = '',
+  hour = 0,
+  value = ''
+) => ({
+  type: UPDATE_DAYSCHEDULE,
+  payload: { buildings, tab, day, hour, value }
+});
+
 export const deleteBuildings = (buildings = []) => ({
   type: DELETE_BUILDINGS,
   payload: { buildings }

src/renderer/components/InputEditor/InputEditor.js

@@ -8,7 +8,6 @@ import CenterSpinner from '../HomePage/CenterSpinner';
 import NavigationPrompt from './NavigationPrompt';
 import { withErrorBoundary } from '../../utils/ErrorBoundary';
 import './InputEditor.css';
-import ScheduleEditor from './ScheduleEditor';
 
 const MAP_STYLE = {
   height: '500px',
@@ -78,7 +77,7 @@ const InputTable = () => {
         {TabPanes}
       </Tabs>
       <div className="cea-input-editor-table">
-        {tab != 'schedules' ? <Table tab={tab} /> : <ScheduleEditor />}
+        <Table tab={tab} />
       </div>
     </div>
   );

src/renderer/components/InputEditor/ScheduleEditor.css

@@ -40,6 +40,14 @@
 .cea-schedule-no-data {
   grid-column: 1/-1;
   grid-row: 1/-1;
+  margin: auto;
+}
+
+.cea-schedule-error {
+  grid-column: 1/-1;
+  grid-row: 1/-1;
+  overflow: auto;
+  text-align: center;
   height: 100%;
   width: 100%;
 }