mission results upload enhancements

gondzo · gondzo · commit f0b356e7458e · 2017-01-15T11:35:59.000+01:00
diff --git a/src/routes/EditData/components/EditDataHeader/EditDataHeader.jsx b/src/routes/EditData/components/EditDataHeader/EditDataHeader.jsx
@@ -8,7 +8,7 @@ import styles from './EditDataHeader.scss';
 
 export const EditDataHeader = () => (
   <div styleName="edit-data-header">
-    <div styleName="title">Edit Telemetry Data</div>
+    <div styleName="title">Upload Mission Results</div>
   </div>
 );
 
diff --git a/src/routes/EditData/components/EditDataHeader/EditDataHeader.scss b/src/routes/EditData/components/EditDataHeader/EditDataHeader.scss
@@ -5,10 +5,8 @@
 	border-bottom: 1px solid rgba(140,140,140,.29);
   .title {
 		font-size: 24px;
-		flex: 0 1 255px;
+		flex: 0 1 310px;
 		align-self: center;
 		padding: 5px 0;
 	}
 }
-
-
diff --git a/src/routes/EditData/components/TelemetryTabs/TelemetryTabs.jsx b/src/routes/EditData/components/TelemetryTabs/TelemetryTabs.jsx
@@ -18,23 +18,9 @@ export const TelemetryTabs = ({fields, handleSubmit, resetForm, uploadPicture})
   <Tabs>
 
     <TabList>
-      <Tab>Telemetry Data</Tab>
       <Tab>Picture from Mission</Tab>
     </TabList>
 
-    <TabPanel>
-      <div className="telemetry-form-container">
-        <form onSubmit={handleSubmit}>
-          <TelemetryDataForm fields={fields} />
-
-          <div styleName="actions">
-            <Button color="gray" onClick={resetForm} className={styles.btnMargin}>Cancel</Button>
-            <Button type="submit" color="blue">Save</Button>
-          </div>
-        </form>
-      </div>
-    </TabPanel>
-
     <TabPanel>
       <PictureFromMission uploadPicture={uploadPicture} />
     </TabPanel>
@@ -79,4 +65,3 @@ const validate = (values) => {
 };
 
 export default reduxForm({form: 'editDataForm', fields, validate})(CSSModules(TelemetryTabs, styles));
-
diff --git a/src/routes/EditData/components/UploadPicture/UploadPicture.jsx b/src/routes/EditData/components/UploadPicture/UploadPicture.jsx
@@ -9,7 +9,7 @@ import Loader from 'components/Loader';
 */
 
 export const UploadPicture = ({picture, removePicture}) => {
-  const {status, src} = picture;
+  const {status, src, file} = picture;
   const onRemove = (e) => {
     if (picture.status === 'deleting') {
       return;
@@ -19,15 +19,34 @@ export const UploadPicture = ({picture, removePicture}) => {
   };
   return (
     <li styleName={cn('upload-picture', {loading: status !== 'uploaded'})}>
-      <img src={src} alt="uploaded" />
+      {
+        file != null && file.type === 'image'? (
+            <img src={src} alt="uploaded" />
+        ): null
+      }
+      {
+        file != null && file.type === 'pdf'? (
+            <a target="_blank" href={src} styleName='pdf'><span>PDF</span></a>
+        ): null
+      }
+      {
+        file === null || (file.type != 'image' && file.type != 'pdf')? (
+            <a target="_blank" href={src} styleName='file'><span>{file.type}</span></a>
+        ): null
+      }
+      {
+        file != null ? (
+          <span>{file.name}</span>
+        ): null
+      }
       <div styleName="loader">
         <Loader scale={0.25} />
       </div>
       <a
         href="javascript:"
         onClick={onRemove}
       >
-        <i styleName="icon-delete-pic" />{status === 'uploading' ? 'Cancel' : 'Delete Picture'}
+        <i styleName="icon-delete-pic" />{status === 'uploading' ? 'Cancel' : 'Delete'}
       </a>
     </li>
   );
diff --git a/src/routes/EditData/components/UploadPicture/UploadPicture.scss b/src/routes/EditData/components/UploadPicture/UploadPicture.scss
@@ -52,3 +52,19 @@
     display: block;
   }
 }
+
+.file, .pdf {
+  border: 1px solid #888;
+  height: 180px;
+  width: 180px;
+  text-align: center;
+  margin-bottom: 5px;
+  cursor: pointer;
+  display: block;
+}
+.file span, .pdf span {
+  display: inline-block;
+  padding-top: 70px;
+  font-size: 20px;
+  text-transform: uppercase;
+}
diff --git a/src/routes/EditData/components/UploadPictureForm/UploadPictureForm.jsx b/src/routes/EditData/components/UploadPictureForm/UploadPictureForm.jsx
@@ -45,7 +45,7 @@ class UploadPictureForm extends React.Component {
     };
 
     this.onDrop = (e) => {
-      const droppedFiles = _.filter(e.dataTransfer.files, (file) => accepts(file, 'image/*'));
+      const droppedFiles = _.filter(e.dataTransfer.files, (file) => accepts(file, ['image/*', '.log', 'application/pdf', '.kml', '.xml']));
       droppedFiles.forEach(props.uploadPicture);
     };
   }
@@ -93,7 +93,7 @@ class UploadPictureForm extends React.Component {
           </div>
         </div>}
         <form onSubmit={(e) => this.handleSubmit(e)} styleName="row">
-          <label htmlFor="upload">Upload Picture</label>
+          <label htmlFor="upload">Upload</label>
           <div styleName="upload-input">
             <input
               key={inputKey}
diff --git a/src/routes/EditData/components/UploadedPictures/UploadedPictures.jsx b/src/routes/EditData/components/UploadedPictures/UploadedPictures.jsx
@@ -3,7 +3,7 @@ import CSSModules from 'react-css-modules';
 import Button from 'components/Button';
 import styles from './UploadedPictures.scss';
 import UploadPicture from '../UploadPicture';
-
+import {browserHistory} from 'react-router';
 
 /*
 * UploadedPictures
@@ -21,8 +21,12 @@ export const UploadedPictures = ({pictures, removePicture}) => (
 
     {/* uploaded-pictures end */}
     <div styleName="actions">
-      <Button color="black" className={styles.btnMargin}>Cancel</Button>
-      <Button type="submit" color="blue">Save</Button>
+      <Button color="black" className={styles.btnMargin} onClick={() => {
+        browserHistory.push('/my-request');
+      }}>Cancel</Button>
+      <Button type="submit" color="blue" onClick={() => {
+        browserHistory.push('/my-request');
+      }}>Save</Button>
     </div>
     {/* actions end */}
   </div>
diff --git a/src/routes/EditData/containers/EditDataContainer.js b/src/routes/EditData/containers/EditDataContainer.js
@@ -4,7 +4,7 @@ import {actions} from '../modules/EditData';
 import EditDataView from '../components/EditDataView';
 
 const resolve = [{
-  promise: ({store: {dispatch}}) => dispatch(actions.load()),
+  promise: ({params, store: {dispatch}}) => dispatch(actions.load(params.requestId)),
 }];
 
 const mapState = (state) => state.editData;
diff --git a/src/routes/EditData/index.js b/src/routes/EditData/index.js
@@ -1,8 +1,8 @@
 import {injectReducer} from '../../store/reducers';
 
 export default (store) => ({
-  path: 'edit-data',
-  name: 'Edit Data', /* Breadcrumb name */
+  path: 'edit-data(/:requestId)',
+  name: 'Mission Results', /* Breadcrumb name */
   staticName: true,
   getComponent(nextState, cb) {
     require.ensure([], (require) => {
diff --git a/src/routes/EditData/modules/EditData.js b/src/routes/EditData/modules/EditData.js
@@ -20,10 +20,9 @@ export const sendRequest = (values) => new Promise((resolve) => {
 });
 
 // load initial data and get federation token
-export const load = (requestId = '587981a6878d044ca0c76c40') => async(dispatch) => {
+export const load = (requestId) => async(dispatch) => {
   // TODO: requestId should be from query string
   // mock implementation for demo
-
   const result = await APIService.getFederationToken({
     type: 'REQUEST',
     requestId,
@@ -44,11 +43,33 @@ export const load = (requestId = '587981a6878d044ca0c76c40') => async(dispatch)
       key: item.Key,
       status: 'uploaded',
       src: s3.getSignedUrl('getObject', {Bucket: result.data.s3Bucket, Key: item.Key}),
+      file: getFileInfo(item.Key),
     }))
     .value();
   dispatch({type: LOADED, payload: {...result.data, s3, pictures}});
 };
 
+// get file info based on file name
+const getFileInfo = (key) => {
+  let fileName = key.split('/').pop();
+  let fileExtension = fileName.split('.').pop();
+
+  let fileInfo = {
+    'name': fileName
+  };
+
+  if(fileExtension === 'jpeg' || fileExtension === 'jpg' || fileExtension === 'gif' || fileExtension === 'png' || fileExtension === 'bmp') {
+    fileInfo['type'] = 'image';
+  } else if(fileExtension === 'pdf') {
+    fileInfo['type'] = 'pdf';
+  } else if(fileExtension && fileExtension.length > 0) {
+    fileInfo['type'] = fileExtension;
+  } else {
+    fileInfo['type'] = 'file';
+  }
+  return fileInfo;
+};
+
 // upload picture to AWS
 export const uploadPicture = (file) => async(dispatch, getState) => {
   const {s3KeyPrefix, s3Bucket, s3} = getState().editData;
@@ -71,6 +92,7 @@ export const uploadPicture = (file) => async(dispatch, getState) => {
         reader.onloadend = () => resolve(reader.result);
         reader.readAsDataURL(file);
       }),
+      file: getFileInfo(file.name),
     },
   });
   await request.promise();
diff --git a/src/routes/MyRequest/components/MyRequestItems/MyRequestItems.jsx b/src/routes/MyRequest/components/MyRequestItems/MyRequestItems.jsx
@@ -24,7 +24,7 @@ class MyRequestItems extends React.Component {
   }
 
   render() {
-    const {requestItems, currentStatus, assignDrone, rejectRequest, getDrones} = this.props;
+    const {requestItems, currentStatus, assignDrone, rejectRequest, completeRequest, getDrones} = this.props;
     return (
       <ul>
         {requestItems.map((requestItem, i) => (
@@ -37,6 +37,7 @@ class MyRequestItems extends React.Component {
             currentStatus={currentStatus}
             assignDrone={assignDrone}
             rejectRequest={rejectRequest}
+            completeRequest={completeRequest}
             getDrones={getDrones}
           />
         ))}
@@ -50,6 +51,7 @@ MyRequestItems.propTypes = {
   currentStatus: PropTypes.string.isRequired,
   assignDrone: PropTypes.func.isRequired,
   rejectRequest: PropTypes.func.isRequired,
+  completeRequest: PropTypes.func.isRequired,
   getDrones: PropTypes.func.isRequired,
 };
 
diff --git a/src/routes/MyRequest/components/MyRequestView.jsx b/src/routes/MyRequest/components/MyRequestView.jsx
@@ -61,7 +61,7 @@ class MyRequestView extends Component {
   }
 
   render() {
-    const {totals, statusArr, requestItems, assignDrone, rejectRequest, loadTotals, getDrones} = this.props;
+    const {totals, statusArr, requestItems, assignDrone, rejectRequest, completeRequest, loadTotals, getDrones} = this.props;
     return (
       <div styleName="my-request-view">
         <h2>Requests</h2>
@@ -106,6 +106,12 @@ class MyRequestView extends Component {
                 loadTotals();
               }
             )}
+            completeRequest={(id) => completeRequest(id).then(
+              () => {
+                this.loadData();
+                loadTotals();
+              }
+            )}
             getDrones={getDrones}
           />
           <div styleName="navigation">
@@ -136,6 +142,7 @@ MyRequestView.propTypes = {
   requestItems: PropTypes.object,
   assignDrone: PropTypes.func.isRequired,
   rejectRequest: PropTypes.func.isRequired,
+  completeRequest: PropTypes.func.isRequired,
   loadTotals: PropTypes.func.isRequired,
   getDrones: PropTypes.func.isRequired,
 };
diff --git a/src/routes/MyRequest/components/RequestItem/RequestItem.jsx b/src/routes/MyRequest/components/RequestItem/RequestItem.jsx
@@ -5,7 +5,7 @@ import styles from './RequestItem.scss';
 import RequestItemControls from '../RequestItemControls';
 import RequestDetails from '../RequestDetails';
 
-export const RequestItem = ({requestItem, index, isOpen, _toggleDetail, currentStatus, assignDrone, rejectRequest, getDrones}) => (
+export const RequestItem = ({requestItem, index, isOpen, _toggleDetail, currentStatus, assignDrone, rejectRequest, completeRequest, getDrones}) => (
   <div styleName="item-container">
     <div styleName="item-summary">
       <ul>
@@ -51,7 +51,9 @@ export const RequestItem = ({requestItem, index, isOpen, _toggleDetail, currentS
         currentStatus={currentStatus}
         assignDrone={(droneId) => assignDrone(requestItem.requestId, droneId)}
         rejectRequest={() => rejectRequest(requestItem.requestId)}
+        completeRequest={() => completeRequest(requestItem.requestId)}
         getDrones={getDrones}
+        requestId={requestItem.requestId}
       />
     </div>
     {(() => {
@@ -71,6 +73,7 @@ RequestItem.propTypes = {
   currentStatus: PropTypes.string.isRequired,
   assignDrone: PropTypes.func.isRequired,
   rejectRequest: PropTypes.func.isRequired,
+  completeRequest: PropTypes.func.isRequired,
   getDrones: PropTypes.func.isRequired,
 };
 
diff --git a/src/routes/MyRequest/components/RequestItemControls/RequestItemControls.jsx b/src/routes/MyRequest/components/RequestItemControls/RequestItemControls.jsx
diff --git a/src/routes/MyRequest/components/RequestItemControls/RequestItemControls.scss b/src/routes/MyRequest/components/RequestItemControls/RequestItemControls.scss
diff --git a/src/routes/MyRequest/containers/MyRequestContainer.js b/src/routes/MyRequest/containers/MyRequestContainer.js
diff --git a/src/routes/MyRequest/modules/MyRequest.js b/src/routes/MyRequest/modules/MyRequest.js
diff --git a/src/services/APIService.js b/src/services/APIService.js

Original file line number	Diff line number	Diff line change
`@@ -5,10 +5,8 @@`
`5`	`5`	`border-bottom: 1px solid rgba(140,140,140,.29);`
`6`	`6`	`.title {`
`7`	`7`	`font-size: 24px;`
`8`		`- flex: 0 1 255px;`
	`8`	`+ flex: 0 1 310px;`
`9`	`9`	`align-self: center;`
`10`	`10`	`padding: 5px 0;`
`11`	`11`	`}`
`12`	`12`	`}`
`13`		`-`
`14`		`-`