Merge branch 'release/0.5.0'

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

README.md

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

app/app.js

@@ -14,13 +14,15 @@ import wsSagas from './sagas';
 const sagaMiddleware = createSagaMiddlevar();
 const store = createStore(reducer, applyMiddleware(sagaMiddleware));
 
+
 const renderApp = (Component) => {
   render(
-    <AppContainer>
+    // <AppContainer>
       <Provider store={store}>
         <Component />
       </Provider>
-    </AppContainer>,
+    // </AppContainer>,
+    ,
     document.getElementById('app'),
   );
 };
@@ -29,8 +31,8 @@ sagaMiddleware.run(wsSagas);
 
 renderApp(App);
 
-if (module.hot) {
-  module.hot.accept('./containers/app', () => {
-    renderApp(App);
-  });
-}
+// if (module.hot) {
+//   module.hot.accept('./containers/app', () => {
+//     renderApp(App);
+//   });
+// }

app/components/app/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types'
 import MainView from '../../containers/mainView';
 
 import style from './style.css';

app/components/app/style.css

@@ -8,4 +8,6 @@
 
 body {
   background-color: #f2f5c3;
+  background: linear-gradient(0deg, rgba(254,255,163,1) 0%, rgba(255,255,255,1) 100%);
+  /* background-color: white; */
 }

app/components/app/variables.css

@@ -6,3 +6,11 @@ $printer-error: rgb(122, 59, 61);
 $printer-paused: rgb(227, 218, 101);
 $printer-hover: rgb(27, 108, 182);
 $printer-finish: #98cc74;
+
+
+$printer-operational-gradient: linear-gradient(180deg, $printer-operational 0%, rgba(255,255,255,1) 80%);
+$printer-printing-gradient: linear-gradient(180deg, $printer-printing 0%, rgba(255,255,255,1) 80%);
+$printer-error-gradient: linear-gradient(180deg, $printer-error 0%, rgba(255,255,255,1) 80%);
+$printer-paused-gradient: linear-gradient(180deg, $printer-paused 0%, rgba(255,255,255,1) 80%);
+$printer-hover-gradient: linear-gradient(180deg, $printer-hover 0%, rgba(255,255,255,1) 80%);
+$printer-finish-gradient: #98cc74;

app/components/controllBar/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types'
 import Modal from 'react-modal';
 import { cloneDeep } from 'lodash';
 

app/components/controllBar/style.css

@@ -2,7 +2,9 @@
   position: fixed;
   bottom: 0;
   width: 100%;
-  background-color: #f9ef7f;
+  background-image: #f9ef7fe8;
+  background-attachment: fixed;
+
   padding: 10px;
   text-align: center;
   height: 45px;

app/components/preheatModal/index.js

@@ -16,6 +16,7 @@ const PreheatModal = ({ isOpen, children, close, confirm, selectedPrinters, tool
     className={modalStyle.modal}
     overlayClassName={modalStyle.modalOverlay}
     onRequestClose={close}
+    contentLabel="whatever"
   >
     <H1>{children}</H1>
     <SelectedPrinters selectedPrinters={selectedPrinters} />

app/components/preheatPresets/index.js

@@ -4,11 +4,12 @@ import { forEach } from 'lodash'
 import ControllButton from '../controllButton';
 import { getUniqueId } from '../../lib/utils';
 
+
 const PreheatPresets = ({ presets, onClick }) => (
   <div>
     {Object.keys(presets).map(preset => {
       return (<div>
-        <ControllButton onClick={() => { onClick(presets[preset].value); }}>{presets[preset].name}</ControllButton>
+        <ControllButton onClick={() => { onClick(presets[preset]); }}>{presets[preset].name}</ControllButton>
       </div>);
     })}
   </div>

app/components/printer/index.js

@@ -5,6 +5,7 @@ import Dropzone from 'react-dropzone';
 import style from './style.css';
 import { getUnits, convertMinutesDuration } from '../../lib/utils';
 import Link from '../link';
+import ProgressBar from '../progressBar';
 
 const ProgressBarLine = Progress.Line;
 
@@ -65,14 +66,18 @@ function getPrinterStateClassName(state, isFileHover) {
   } else {
     return 'printerFileHover';
   }
+
 }
 
 const Printer = ({ name, state, progress, nozzleTemperature, bedTemperature, fileName, timePrinting, timeRemaining, link, selected, toggleSelected, onFileHover, onFileLeave, isFileHover, onFileDrop}) => (
-  <Dropzone disableClick
-    className={`printer ${style.printer} ${style[getPrinterStateClassName(state, isFileHover)]}`}
-    onDragEnter={onFileHover}
-    onDragLeave={onFileLeave}
-    onDrop={onFileDrop}
+  // <Dropzone disableClick
+  //   className={`printer ${style.printer} ${style[getPrinterStateClassName(state, isFileHover)]}`}
+  //   onDragEnter={onFileHover}
+  //   onDragLeave={onFileLeave}
+  //   onDrop={onFileDrop}
+  // >
+  <div
+  className={`printer ${style.printer} ${style[getPrinterStateClassName(state, isFileHover)]}`}
   >
     <div className={``}>
       <div className={`${style.printerHeader} ${selected ? style['printer--selected'] : ''}`}>
@@ -86,16 +91,21 @@ const Printer = ({ name, state, progress, nozzleTemperature, bedTemperature, fil
         <div className={style.info} title={fileName}>file name: <span>{fileName}</span></div>
         <div className={style.info}>time printing: <span>{convertMinutesDuration(timePrinting)}</span></div>
         <div className={style.info}>time remaining: <span>{convertMinutesDuration(timeRemaining)}</span></div>
-          <ProgressBarLine
+          {/* <ProgressBarLine
             progress={progress/100}
             text={progress}
             initialAnimate
             options={progressBarOptions}
             containerClassName={style.progressBar}
+          /> */}
+          <ProgressBar
+            progress={progress}
+
           />
       </div>
     </div>
-  </Dropzone>
+  </div>
+  //</Dropzone>
 );
 
 export default Printer;

app/components/printer/style.css

@@ -1,37 +1,43 @@
 @import "../app/variables.css";
 
-
 .printer {
   display: inline-block;
   background-color: #eee;
   border: solid 1px grey;
+  /* border: solid 10px black; */
   padding: 1px;
   margin:10px;
   width: 400px;
   transition: 0.5s;
-  border-radius: 2px;
+  border-radius: 0px;
   &--selected{
     @inherit: .printer;
   }
 
   &Operational {
     background-color: blue;
-    background-color: $printer-operational;
+    /* background-color: $printer-operational; */
+    background: $printer-operational-gradient;
   }
   &Printing {
-    background-color: $printer-printing;
+    background: $printer-printing;
+    background: $printer-printing-gradient;
   }
   &Error {
-    background-color: $printer-error;
+    background: $printer-error;
+    background: $printer-error-gradient;
   }
   &Paused {
-    background-color: $printer-paused;
+    background: $printer-paused;
+    background: $printer-paused-gradient;
   }
   &FileHover {
-    background-color: $printer-hover;
+    background: $printer-hover;
+    background: $printer-hover-gradient;
   }
   &Finished {
-    background-color: $printer-finish;
+    background: $printer-finish;
+    background: $printer-finish-gradient;
   }
 }
 

app/components/printerList/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types'
 import moment from 'moment';
 import Dropzone from 'react-dropzone';
 import _ from 'lodash';
@@ -109,14 +110,14 @@ class PrinterListComponent extends React.Component {
           {this.generatePrinterList()}
         </div>
         <div className={style.lastUpdated}>last updated {this.formatTime(this.props.updated)}</div>
-        <Dropzone
+        {/* <Dropzone
           className={`${style.overlayDropzone} ${this.state.fileHoverPrinter === 'overlay-window' || this.state.fileHoverPrinter === 'overlay' ? style.overlayDropzoneFileHover : ''}`}
           onDragEnter={this.onPrinterFileHover('overlay')}
           onDragLeave={this.onPrinterFileLeave}
           onDrop={this.onPrinterFileDrop}
           disableClick
           preventDropOnDocument={false}
-        />
+        /> */}
       </div>);
   }
 }
@@ -125,8 +126,8 @@ class PrinterListComponent extends React.Component {
 PrinterListComponent.propTypes = {
   printers: PropTypes.object.isRequired,
   toggleSelected: PropTypes.func.isRequired,
-  grid: PropTypes.object.isRequired,
-  updated: PropTypes.number.isRequired,
+  // grid: PropTypes.object.isRequired,
+// updated: PropTypes.number.isRequired,
 };
 
 export default PrinterListComponent;

app/components/progressBar/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import style from './style.css'
+
+const ProgressBar = (({progress}) => (
+  <div
+    className={style['progress-container']}
+    >
+    <div className={style["progress-wrapper"]}>
+      <div className={style['progress']} style={{width: progress+"%"}}>
+        .
+      </div>
+    </div>
+    {progress == 0 ? 0 : Math.round(progress*100)/100}%
+  </div>
+));
+
+export default ProgressBar;

app/components/progressBar/style.css

@@ -0,0 +1,19 @@
+.progress-container {
+  text-align: center;
+}
+
+.progress-wrapper {
+  background-color: rgba(0, 0, 0, 0.212);
+  padding: 0;
+  margin: 8px;
+  margin-top: 14px;
+}
+
+.progress {
+  padding: 0;
+  margin: 0;
+  color: transparent;
+  background-color: black;
+  height: 6px;
+  transition: 0.3s;
+}

app/components/settings/index.js

@@ -52,6 +52,7 @@ class Settings extends React.Component {
         className={`${modalStyle.modal} ${style.modal}`}
         overlayClassName={modalStyle.modalOverlay}
         onRequestClose={this.closeModal}
+        contentLabel="whatEVER"
       >
         <H1>Settings</H1>
         <H2>system</H2>

app/lib/config.js

@@ -1,5 +1,7 @@
-export const REMOTE_BASE = `http://${window.location.hostname}`;
-export const WEBSOCKET_BASE = `ws://${window.location.hostname}`;
+// export const REMOTE_BASE = `http://${window.location.hostname}`;
+// export const WEBSOCKET_BASE = `ws://${window.location.hostname}`;
+export const REMOTE_BASE = `http://localhost`;
+export const WEBSOCKET_BASE = `ws://localhost`;
 
 export const API_PORT = '8000';
 export const WEBSOCKET_PORT = '8001';

app/sagas/index.js

@@ -1,7 +1,7 @@
 import 'babel-polyfill';
 
 import { eventChannel } from 'redux-saga';
-import { put, takeEvery, call, take } from 'redux-saga/effects';
+import { put, takeEvery, call, take, all } from 'redux-saga/effects';
 import { map } from 'lodash';
 
 import { WEBSOCKET_URL, API_URL } from '../lib/config';
@@ -10,6 +10,7 @@ import { addPrinter, updatePrinterState, applyConfig } from '../actions/mainView
 
 //  Code which handles websocket connection and receiving data
 function initWebsocket() {
+  console.log("websocket? ")
   const returnThis = eventChannel((emitter) => {
     function makeWebsocket() {
       const ws = new WebSocket(WEBSOCKET_URL);
@@ -54,6 +55,7 @@ function loadConfig() {
 
 function* makeRequest() {
   const data = yield call(loadConfig);
+  console.log(data)
   const actions = map(data.printers, (printer, key) => {
     return addPrinter(printer.name, key, printer.url);
   });
@@ -64,10 +66,12 @@ function* makeRequest() {
 }
 
 function* watchFetchConfig() {
+  console.log('watchfetch config')
   yield takeEvery(APP_FETCH_CONFIG, makeRequest);
 }
 
 function* wsSagas() {
+  console.log('websocket saga')
   const channel = yield call(initWebsocket);
   while (true) {
     const action = yield take(channel);
@@ -76,8 +80,12 @@ function* wsSagas() {
 }
 
 export default function* rootSaga() {
-  yield [
+  console.log('redux saga call')
+
+  yield  all([
     wsSagas(),
     watchFetchConfig(),
-  ];
+  ]);
+
+
 }