Merge branch 'release/0.4.0'

README.md

@@ -1,7 +1,7 @@
 # Farm - client
  Application that drives 3D printer farm
 
-Version 0.3.0
+Version 0.4.0
 
 # Requirements
 

app/actions/settings.js

@@ -0,0 +1,30 @@
+export const SETTINGS_ACTIVE = 'SETTINGS_ACTIVE';
+export const SETTINGS_ACTION_START = 'SETTINGS_ACTION_START';
+export const SETTINGS_ACTION_FINISHED = 'SETTINGS_ACTION_FINISHED';
+
+export const SETTINGS_SHUTDOWN_PRINTERS = 'SETTINGS_SHUTDOWN_PRINTERS';
+export const SETTINGS_SHUTDOWN_FARM = 'SETTINGS_SHUTDOWN_FARM';
+
+export const settingsActive = state => ({
+  type: SETTINGS_ACTIVE,
+  state,
+});
+
+export const settingsActionStart = (message, onConfirm) => ({
+  type: SETTINGS_ACTION_START,
+  onConfirm,
+  message,
+});
+
+export const settingsActionFinish = () => ({
+  type: SETTINGS_ACTION_FINISHED,
+});
+
+export const settingsShutdownPrinters = (printers) => ({
+  type: SETTINGS_SHUTDOWN_PRINTERS,
+  printers,
+});
+
+export const settingsShutdownFarm = () => ({
+  type: SETTINGS_SHUTDOWN_FARM,
+});

app/components/app/style.css

@@ -7,5 +7,5 @@
 }
 
 body {
-  background-color: #faffad;
+  background-color: #f2f5c3;
 }

app/components/app/variables.css

@@ -5,3 +5,4 @@ $printer-printing: rgb(67, 150, 163);
 $printer-error: rgb(122, 59, 61);
 $printer-paused: rgb(227, 218, 101);
 $printer-hover: rgb(27, 108, 182);
+$printer-finish: #98cc74;

app/components/controllBar/index.js

@@ -8,6 +8,7 @@ import FileUploadModal from '../fileUploadModal';
 import PrinterActionConfirmModal from '../confirmModal';
 import PreheatModal from '../preheatModal';
 import style from './style.css';
+import controllButtonStyle from '../controllButton/style.css';
 import api from '../../lib/api';
 
 class ControllBar extends React.Component {
@@ -122,6 +123,10 @@ class ControllBar extends React.Component {
         this.props.setPrinterActionConfirmModalState(true, type);
         break;
       }
+      case 'FINISH': {
+        this.props.setPrinterActionConfirmModalState(true, type);
+        break;
+      }
       default: {
         break;
       }
@@ -152,6 +157,8 @@ class ControllBar extends React.Component {
           <ControllButton disabled={disabled} onClick={() => { this.controllButtonClick('RESUME'); }}>resume</ControllButton>
           <ControllButton disabled={disabled} onClick={() => { this.controllButtonClick('CANCEL'); }}>cancel</ControllButton>
           <ControllButton disabled={disabled} onClick={() => { this.controllButtonClick('PREHEAT'); }}>preheat</ControllButton>
+          <ControllButton disabled={disabled} onClick={() => { this.controllButtonClick('FINISH'); }}>finish</ControllButton>
+          <ControllButton onClick={() => { this.props.settingsActive(true); }}>settings</ControllButton>
           <FileUploadModal {...modalSettings} />
           <PrinterActionConfirmModal {...this.getConfirmModalSettings()}>{this.getConfirmModalText(this.props.confirmModalActionType)}</PrinterActionConfirmModal>
           <PreheatModal {...this.getPreheatModalSettings()}>Preheat</PreheatModal>

app/components/controllBar/style.css

@@ -7,41 +7,3 @@
   text-align: center;
   height: 45px;
 }
-
-.controllButton {
-  padding: 0;
-  margin: 0;
-  border: 0;
-
-  padding: 10px;
-  margin: 3px;
-
-  font-family: 'roboto';
-  letter-spacing: 1.1px;
-
-  border: solid 1px #aaa;
-  border-radius: 4px;
-
-  background-color: #fff699;
-
-  transition: 0.1s;
-
-  &:hover {
-    background-color: #fffac6;
-    cursor: pointer;
-  }
-
-  &:active {
-    border: solid 1px #aaa;
-  }
-
-  &--disabled {
-    background-color: #ddd699;
-
-    &:hover {
-      background-color: #ddd699;
-
-    }
-  }
-
-}

app/components/controllButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from '../controllBar/style.css';
+import style from './style.css';
 
 const ControllButton = ({ onClick, disabled, children }) => (
   <button

app/components/controllButton/style.css

@@ -0,0 +1,36 @@
+.controllButton {
+  padding: 0;
+  margin: 0;
+  border: 0;
+
+  padding: 10px;
+  margin: 3px;
+
+  font-family: 'roboto';
+  letter-spacing: 1.1px;
+
+  border: solid 1px #aaa;
+  border-radius: 4px;
+
+  background-color: #fff699;
+
+  transition: 0.1s;
+
+&:hover {
+   background-color: #fffac6;
+   cursor: pointer;
+ }
+
+&:active {
+   border: solid 1px #aaa;
+ }
+
+&--disabled {
+   background-color: #ddd699;
+
+&:hover {
+   background-color: #ddd699;
+
+ }
+}
+}

app/components/mainView/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PrinterList from '../../containers/printer'
 import ControllBar from '../../containers/controllBar';
+import SettingsContainer from '../../containers/settings';
 
 class MainViewComponent extends React.Component {
   constructor(props) {
@@ -10,6 +11,7 @@ class MainViewComponent extends React.Component {
     return (<div>
       <PrinterList />
       <ControllBar />
+      <SettingsContainer />
     </div>);
   }
 }

app/components/preheatModal/index.js

@@ -9,7 +9,6 @@ import ControllButton from '../controllButton';
 import SelectedPrinters from '../selectedPrinters';
 import TemperatureInput from '../temperatureInput';
 import PreheatPresets from '../preheatPresets';
-import preheatPresetsConfig from 'json-loader!yaml-loader!./presets.yml';
 
 const PreheatModal = ({ isOpen, children, close, confirm, selectedPrinters, toolInputChange, bedInputChange, toolInputValue, bedInputValue, onPresetClick, temperaturePresets }) => (
   <Modal

app/components/printer/index.js

@@ -55,6 +55,9 @@ function getPrinterStateClassName(state, isFileHover) {
     case 'Printer is unreachable': {
       return 'printerError';
     }
+    case 'Finished': {
+      return 'printerFinished';
+    }
     default: {
       return '';
     }

app/components/printer/style.css

@@ -30,6 +30,9 @@
   &FileHover {
     background-color: $printer-hover;
   }
+  &Finished {
+    background-color: $printer-finish;
+  }
 }
 
 .printerBody {

app/components/printerList/index.js

@@ -21,7 +21,7 @@ class PrinterListComponent extends React.Component {
     window.addEventListener('dragenter', () => {
       if (this.props.selectedPrinters.length > 0 && this.state.fileHoverPrinter !== 'overlay-window') {
         this.setState({ fileHoverPrinter: 'overlay-window' });
-    }
+      }
     });
   }
 

app/components/prompt/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Modal from 'react-modal';
+
+import H1 from '../h1';
+import modalStyle from '../fileUploadModal/style.css';
+import ControllButton from '../controllButton';
+
+const Prompt = ({ children, isOpen, confirm, reject }) => (
+  <Modal
+  isOpen={isOpen}
+  className={modalStyle.modal}
+  overlayClassName={modalStyle.modalOverlay}
+  onRequestClose={reject}
+  >
+    <H1>{children}</H1>
+    <ControllButton onClick={confirm}>Yes</ControllButton>
+    <ControllButton onClick={reject}>No</ControllButton>
+  </Modal>
+);
+
+export default Prompt;

app/components/settings/index.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import Modal from 'react-modal';
+
+import modalStyle from '../fileUploadModal/style.css';
+import style from './style.css';
+import H1 from '../h1';
+import H2 from '../h2';
+import ControllButton from '../controllButton';
+import Prompt from '../prompt';
+import api from '../../lib/api';
+
+class Settings extends React.Component {
+  constructor() {
+    super();
+    this.state = {};
+    this.closeModal = this.closeModal.bind(this);
+    this.shutdownAllPrinters = this.shutdownAllPrinters.bind(this);
+    this.shutdownFarm = this.shutdownFarm.bind(this);
+  }
+
+  closeModal() {
+    this.props.settingsActive(false);
+  }
+
+  shutdownAllPrinters() {
+    this.props.settingsActionStart('Shutdown all printers ?', () => {
+      console.log('request');
+      const body = {
+        selectedPrinters: this.props.printers
+      };
+      api.sendRequest('/api/system/shutdown/printers', 'post', body)
+        .then(() => {
+          this.props.settingsActionFinish();
+        });
+    });
+  }
+
+  shutdownFarm() {
+    this.props.settingsActionStart('Shutdown farm ?', () => {
+      console.log('request');
+      api.sendRequest('/api/system/shutdown/farm', 'post')
+        .then(() => {
+          this.props.settingsActionFinish();
+        });
+    });
+  }
+
+  render() {
+    return (
+      <Modal
+        isOpen={this.props.active}
+        className={`${modalStyle.modal} ${style.modal}`}
+        overlayClassName={modalStyle.modalOverlay}
+        onRequestClose={this.closeModal}
+      >
+        <H1>Settings</H1>
+        <H2>system</H2>
+        <ControllButton onClick={this.shutdownAllPrinters}>shutdown all printers</ControllButton>
+        <ControllButton onClick={this.shutdownFarm}>shutdown whole farm</ControllButton>
+
+        {this.props.prompt ? <Prompt
+          isOpen
+          confirm={this.props.prompt.onConfirm}
+          reject={this.props.settingsActionFinish}>
+            {this.props.prompt.message}
+          </Prompt> : false}
+      </Modal>);
+  }
+}
+
+export default Settings;

app/components/settings/style.css

@@ -0,0 +1,3 @@
+.modal {
+  width: 600px;
+}

app/containers/controllBar.js

@@ -3,6 +3,7 @@ import { map } from 'lodash';
 
 import ControllBar from '../components/controllBar';
 import { setFileUploadModal, setFileUploadState, setPrinterActionConfirmModalState } from '../actions/mainView';
+import { settingsActive } from '../actions/settings';
 
 function selectedPrintersNames(printers, selectedPrinters) {
   return map(selectedPrinters, (value) => {
@@ -26,6 +27,7 @@ const mapDispatchToProps = dispatch => ({
   setPrinterActionConfirmModalState: (state, action = false) => {
     dispatch(setPrinterActionConfirmModalState(state, action));
   },
+  settingsActive: (state) => { dispatch(settingsActive(state)); },
 });
 
 const MainView = connect(

app/containers/settings.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+
+import Settings from '../components/settings/index';
+import { settingsActive, settingsActionStart, settingsActionFinish } from '../actions/settings';
+
+const mapStateToProps = state => ({
+  active: state.settings.active,
+  settings: state.settings.settings,
+  prompt: state.settings.prompt,
+  printers: Object.keys(state.printer.printers),
+});
+
+const mapDispatchToProps = dispatch => ({
+  settingsActive: (state) => { dispatch(settingsActive(state)); },
+  settingsActionStart: (message, onConfirm) => { dispatch(settingsActionStart(message, onConfirm)); },
+  settingsActionFinish: () => { dispatch(settingsActionFinish()); },
+});
+
+const SettingsContainer = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Settings);
+
+export default SettingsContainer;

app/reducers/app.js

@@ -4,7 +4,7 @@ const initialAppState = {
   text: 'hello',
   config: {
     loading: true,
-  }
+  },
 };
 
 const appReducer = (state = initialAppState, action) => {

app/reducers/index.js

@@ -2,10 +2,12 @@ import { combineReducers } from 'redux';
 
 import appReducer from './app';
 import mainView from './mainView';
+import settingsReducer from './settings';
 
 const reducer = combineReducers({
   app: appReducer,
   printer: mainView,
+  settings: settingsReducer,
 });
 
 export default reducer;

app/reducers/mainView.js

@@ -11,6 +11,7 @@ import { PRINTER_ADD,
   PRINTER_APPLY_CONFIG,
  } from '../actions/mainView';
 
+
 const initialAppState = {
   printers: {},
   grid: {},
@@ -22,6 +23,7 @@ const initialAppState = {
     actionType: 'none',
   },
   temperaturePresets: {},
+  settingsModal: false,
 };
 
 const mainViewReducer = (state = initialAppState, action) => {