Remove system icon and panel button

mobile/android/app/build.gradle

@@ -101,8 +101,8 @@ android {
         applicationId "com.deightonar"
         minSdkVersion 24
         targetSdkVersion 27
-        versionCode 9
-        versionName "1.1.3"
+        versionCode 11
+        versionName "1.2.1"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }

mobile/android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.deightonar"
-    android:versionCode="9"
-    android:versionName="1.1.3">
+    android:versionCode="11"
+    android:versionName="1.2.1">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

mobile/ios/DeightonAR/Info.plist

@@ -19,11 +19,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.3</string>
+	<string>1.2.1</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>20180529.0</string>
+	<string>20180531.0</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>

mobile/src/ARViewer/ARViewer.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { StyleSheet, View, TouchableHighlight, Image } from "react-native"
+import { StyleSheet, View, TouchableHighlight, Image, Text } from "react-native"
 import {
   ViroARSceneNavigator,
   ViroARScene,
@@ -235,6 +235,10 @@ export class ARViewer extends React.Component {
   }
 
   render() {
+    const message = this.workItemId
+      ? "Work item nearby. Stand still, point phone at a nearby surface and move it around slowly."
+      : "No work item detected. Wait for GPS signal to stabilize and move closer to a work item."
+
     return (
       <View style={{ width: "100%", height: "100%" }}>
         <ViroARSceneNavigator
@@ -261,6 +265,27 @@ export class ARViewer extends React.Component {
             <Image source={backImage} />
           </TouchableHighlight>
         </View>
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "center",
+            position: "absolute",
+            bottom: 30,
+            left: 0,
+            right: 0,
+            backgroundColor: "#99999980",
+          }}>
+          <Text
+            style={{
+              textAlign: "center",
+              fontSize: 24,
+              padding: 10,
+              color: "#FFFFFF",
+            }}>
+            {message}
+          </Text>
+        </View>
       </View>
     )
   }

mobile/src/Activity/Activity.js

@@ -27,10 +27,11 @@ import { reactAutoBind } from "auto-bind2"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { isIphoneX } from "react-native-iphone-x-helper"
 import { api } from "../API"
-import { formatLatLng } from "../util"
+import { formatLatLng, workItemTypeEnum } from "../util"
 import moment from "moment"
 import "url-search-params-polyfill"
 import { config } from "../config"
+import { FormStaticOptionStrip, FormStaticPhotoPanel } from "../ui"
 
 const styles = StyleSheet.create({
   container: {
@@ -124,6 +125,9 @@ export class Activity extends React.Component {
               ),
               location: formatLatLng(lat, lng),
               dateTime: moment().format(),
+              details: workItem.details,
+              workItemType: workItem.workItemType,
+              workItemPhotos: workItem.photos,
             })
 
             this.region = {
@@ -288,7 +292,10 @@ export class Activity extends React.Component {
       waitModal,
       dateTime,
       location,
+      details,
+      workItemType,
       uploadPercent,
+      workItemPhotos,
     } = this.state
 
     return (
@@ -301,14 +308,6 @@ export class Activity extends React.Component {
           rightButton={{ icon: "done", onPress: this.handleDonePress }}
         />
         <ScrollView style={styles.container}>
-          <View style={styles.panel}>
-            <BoundInput
-              binder={binder}
-              name="resolution"
-              label="Resolution:"
-              message="You must supply a resolution for the activity"
-            />
-          </View>
           <View style={styles.panel}>
             <BoundOptionStrip
               binder={binder}
@@ -322,17 +321,38 @@ export class Activity extends React.Component {
               name="status"
               message="You must supply a status for the activity"
             />
-          </View>
-          <View style={styles.panel}>
+            <BoundInput
+              binder={binder}
+              name="resolution"
+              label="Resolution:"
+              message="You must supply a resolution for the activity"
+            />
             <BoundInput
               binder={binder}
               name="notes"
               label="Notes:"
               message="You must supply notes for the activity"
             />
+            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
+            <BoundPhotoPanel
+              name="photos"
+              binder={binder}
+              onUploadStarted={this.handleUploadStarted}
+              onUploadProgress={this.handleUploadProgress}
+              onUploadEnded={this.handleUploadEnded}
+            />
           </View>
           <View style={styles.panel}>
-            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
+            <FormStaticOptionStrip
+              label="Work Item Type:"
+              options={workItemTypeEnum}
+              value={workItemType}
+            />
+            <FormStaticInput label="Details:" value={details} />
+            <FormStaticPhotoPanel
+              label="Work Item Photos:"
+              value={workItemPhotos}
+            />
             <FormStaticInput label="Location:" value={location} />
             <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
@@ -369,15 +389,6 @@ export class Activity extends React.Component {
               />
             </View>
           </View>
-          <View style={styles.panel}>
-            <BoundPhotoPanel
-              name="photos"
-              binder={binder}
-              onUploadStarted={this.handleUploadStarted}
-              onUploadProgress={this.handleUploadProgress}
-              onUploadEnded={this.handleUploadEnded}
-            />
-          </View>
           {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
         <ProgressModal

mobile/src/WorkItem/WorkItem.js

@@ -100,6 +100,7 @@ export class WorkItem extends React.Component {
       messageModal: null,
       waitModal: null,
       progressModal: null,
+      allowLocationUpdates: false,
     }
     this.region = null
     this.isMapReady = false
@@ -151,6 +152,8 @@ export class WorkItem extends React.Component {
             },
           })
         })
+    } else {
+      this.setState({ allowLocationUpdates: true })
     }
   }
 
@@ -221,8 +224,9 @@ export class WorkItem extends React.Component {
   }
 
   handleRegionChange(region) {
-    if (!this.isMapReady) {
+    if (!this.state.allowLocationUpdates || !this.isMapReady) {
       // On iOS we get this after setting the initial region, before the map declared as ready!
+      // Also, if we are only viewing the work item, then don't allow region changes
       return
     }
 
@@ -348,8 +352,6 @@ export class WorkItem extends React.Component {
               options={workItemTypeEnum}
               message="Select a work item type"
             />
-          </View>
-          <View style={styles.panel}>
             <BoundInput
               binder={binder}
               name="details"
@@ -357,8 +359,6 @@ export class WorkItem extends React.Component {
               label="Details:"
               message="You must supply details for the work item"
             />
-          </View>
-          <View style={styles.panel}>
             <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
                 ref={(ref) => (this.mapView = ref)}
@@ -405,8 +405,6 @@ export class WorkItem extends React.Component {
               name="address"
               label="Address:"
             />
-          </View>
-          <View style={styles.panel}>
             <BoundPhotoPanel
               name="photos"
               binder={binder}
@@ -428,7 +426,9 @@ export class WorkItem extends React.Component {
             )}
           {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
+        {!this.state.allowLocationUpdates && (
           <Geolocation onUpdate={this.handlePositionUpdate} watch={false} />
+        )}
         <ProgressModal
           open={!!progressModal}
           message={progressModal ? progressModal.message : ""}

mobile/src/config.js

@@ -2,13 +2,13 @@ import React from "react"
 import { Platform } from "react-native"
 
 export const config = {
-  //localIPAddr: "192.168.1.175",
-  localIPAddr: "192.168.1.14",
+  localIPAddr: "192.168.1.175",
+  //localIPAddr: "192.168.1.14",
   viroAPIKey: "06F37B6A-74DA-4A83-965A-7DE2209A5C46",
   googleGeocodeAPIKey: "AIzaSyCs4JVT6gysnY5dAJ7KjVJYeykLv_xz1GI",
   googleGeocodeURL: "https://maps.googleapis.com/maps/api/geocode/json",
   refererURL: "https://dar.kss.us.com",
-  minDistanceToItem: 10,
+  minDistanceToItem: 20,
   workItemRegionDelta: 0.005,
   activityRegionDelta: 0.005,
   homeRegionInset: 0.02,

mobile/src/ui/BoundInput.js

@@ -85,10 +85,9 @@ export class BoundInput extends React.Component {
         <Text
           style={{
             fontSize: 12,
-            display: valid ? "none" : "flex",
             color: "red",
           }}>
-          {message}
+          {valid ? " " : message}
         </Text>
       </View>
     )

mobile/src/ui/BoundOptionStrip.js

@@ -55,10 +55,9 @@ export class BoundOptionStrip extends React.Component {
         <Text
           style={{
             fontSize: 12,
-            display: valid ? "none" : "flex",
             color: "red",
           }}>
-          {message}
+          {valid ? " " : message}
         </Text>
       </View>
     )

mobile/src/ui/BoundPhotoPanel.js

@@ -14,17 +14,7 @@ import ImagePicker from "react-native-image-picker"
 import ImageResizer from "react-native-image-resizer"
 import { reactAutoBind } from "auto-bind2"
 import { api } from "../API"
-
-const getScreenPortraitDimensions = () => {
-  const { width, height } = Dimensions.get("window")
-
-  return {
-    screenWidth: Math.min(width, height),
-    screenHeight: Math.max(width, height),
-  }
-}
-
-const photoSpacing = 10
+import { PhotoPanel } from "."
 
 export class BoundPhotoPanel extends Component {
   static propTypes = {
@@ -95,56 +85,15 @@ export class BoundPhotoPanel extends Component {
     )
   }
 
-  handleLayout(e) {
-    if (!this.state.photoSize) {
-      const { layout } = e.nativeEvent
-      const ratio = 3 / 4
-      const width = (layout.width - photoSpacing) / 2
-      const height = width / ratio
-
-      this.setState({ photoSize: { width, height } })
-    }
-  }
-
   render() {
-    const { photoSize, value: assetIds } = this.state
-
-    const renderPhoto = (index) => {
-      const assetId = assetIds[index]
-
-      return (
-        <TouchableOpacity
-          key={assetId || "blank" + index.toString()}
-          style={{
-            width: photoSize.width,
-            height: photoSize.height,
-            borderWidth: 2,
-            borderColor: "gray",
-            borderRadius: 4,
-            justifyContent: "center",
-          }}
-          onPress={() => this.handlePhotoPress(index)}>
-          {!assetId && (
-            <Icon name="add" size={24} style={{ alignSelf: "center" }} />
-          )}
-          {assetId && (
-            <Image
-              source={{ uri: api.makeImageUrl(assetId) }}
-              style={{ width: "100%", height: "100%" }}
-              resizeMode="contain"
-            />
-          )}
-        </TouchableOpacity>
-      )
-    }
+    const { photoSize, value } = this.state
 
     return (
       <View
         style={{
           flexDirection: "column",
           justifyContent: "space-between",
-        }}
-        onLayout={this.handleLayout}>
+        }}>
         <Text
           style={{
             fontSize: 14,
@@ -152,18 +101,7 @@ export class BoundPhotoPanel extends Component {
           }}>
           Pictures:
         </Text>
-        {photoSize && (
-          <View style={styles.photoRow}>
-            {renderPhoto(0)}
-            {renderPhoto(1)}
-          </View>
-        )}
-        {photoSize && (
-          <View style={styles.photoRow}>
-            {renderPhoto(2)}
-            {renderPhoto(3)}
-          </View>
-        )}
+        <PhotoPanel onPhotoPress={this.handlePhotoPress} value={value} />
       </View>
     )
   }

mobile/src/ui/FormStaticInput.js

@@ -39,6 +39,7 @@ export class FormStaticInput extends React.Component {
           underlineColorAndroid="white"
           value={value}
         />
+        <Text>&nbsp;</Text>
       </View>
     )
   }

mobile/src/ui/FormStaticOptionStrip.js

@@ -0,0 +1,33 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Text, View, Platform } from "react-native"
+import { OptionStrip } from "."
+
+export class FormStaticOptionStrip extends React.Component {
+  static propTypes = {
+    label: PropTypes.string,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
+    ).isRequired,
+    value: PropTypes.string,
+  }
+
+  render() {
+    const { label, value, options } = this.props
+
+    return (
+      <View style={{ width: "100%" }}>
+        <Text
+          style={{
+            color: "black",
+            fontSize: 14,
+            marginBottom: 5,
+          }}>
+          {label}
+        </Text>
+        <OptionStrip value={value} readOnly options={options} />
+        <Text>&nbsp;</Text>
+      </View>
+    )
+  }
+}

mobile/src/ui/FormStaticPhotoPanel.js

@@ -0,0 +1,30 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Text, View, Platform } from "react-native"
+import { PhotoPanel } from "."
+
+export class FormStaticPhotoPanel extends React.Component {
+  static propTypes = {
+    label: PropTypes.string,
+    value: PropTypes.arrayOf(PropTypes.string),
+  }
+
+  render() {
+    const { label, value, options } = this.props
+
+    return (
+      <View style={{ width: "100%" }}>
+        <Text
+          style={{
+            color: "black",
+            fontSize: 14,
+            marginBottom: 5,
+          }}>
+          {label}
+        </Text>
+        <PhotoPanel value={value} readOnly />
+        <Text>&nbsp;</Text>
+      </View>
+    )
+  }
+}

mobile/src/ui/OptionStrip.js

@@ -9,6 +9,7 @@ export class OptionStrip extends Component {
       PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
     ).isRequired,
     value: PropTypes.string,
+    readOnly: PropTypes.bool,
     onValueChanged: PropTypes.func,
   }
 
@@ -41,14 +42,15 @@ export class OptionStrip extends Component {
   handlePress(option) {
     const { onValueChanged } = this.props
 
-    this.setState({ selectedOption: option })
     if (onValueChanged) {
       onValueChanged(option.value)
+    } else if (!this.props.readOnly) {
+      this.setState({ selectedOption: option })
     }
   }
 
   render() {
-    const { style, options, value } = this.props
+    const { style, options, value, readOnly } = this.props
     const { selectedOption } = this.state
 
     // TODO: Handle visible, disabled & read-only
@@ -58,6 +60,7 @@ export class OptionStrip extends Component {
         {options.map((option, index) => (
           <TouchableHighlight
             key={index}
+            disabled={readOnly}
             underlayColor="#3BB0FD"
             style={[
               {
@@ -65,7 +68,11 @@ export class OptionStrip extends Component {
                 flexBasis: 0,
                 height: 40,
                 backgroundColor:
-                  option === selectedOption ? "#3BB0FD" : "#EEEEEE",
+                  option !== selectedOption
+                    ? "#EEEEEE"
+                    : readOnly
+                      ? "#AAAAAA"
+                      : "#3BB0FD",
               },
               index === 0 && {
                 borderTopLeftRadius: 6,

mobile/src/ui/PhotoPanel.js

@@ -0,0 +1,108 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  Dimensions,
+  ActivityIndicator,
+} from "react-native"
+import { Icon } from "."
+import { reactAutoBind } from "auto-bind2"
+import { api } from "../API"
+
+const photoSpacing = 10
+
+export class PhotoPanel extends Component {
+  static propTypes = {
+    onPhotoPress: PropTypes.func,
+    readOnly: PropTypes.bool,
+    value: PropTypes.arrayOf(PropTypes.string),
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+    this.state = {
+      photoSize: null,
+    }
+  }
+
+  handleLayout(e) {
+    if (!this.state.photoSize) {
+      const { layout } = e.nativeEvent
+      const ratio = 3 / 4
+      const width = (layout.width - photoSpacing) / 2
+      const height = width / ratio
+
+      this.setState({ photoSize: { width, height } })
+    }
+  }
+
+  render() {
+    const { photoSize } = this.state
+    const { value: assetIds, readOnly, onPhotoPress } = this.props
+    const renderPhoto = (index) => {
+      const assetId = assetIds && assetIds[index]
+
+      return (
+        <TouchableOpacity
+          key={assetId || "blank" + index.toString()}
+          disabled={readOnly}
+          style={{
+            width: photoSize.width,
+            height: photoSize.height,
+            borderWidth: 2,
+            borderColor: "gray",
+            borderRadius: 4,
+            justifyContent: "center",
+          }}
+          onPress={() => onPhotoPress(index)}>
+          {!assetId && (
+            <Icon
+              name={!readOnly ? "add" : "blank"}
+              size={24}
+              style={{ alignSelf: "center" }}
+            />
+          )}
+          {assetId && (
+            <Image
+              source={{ uri: api.makeImageUrl(assetId) }}
+              style={{ width: "100%", height: "100%" }}
+              resizeMode="contain"
+            />
+          )}
+        </TouchableOpacity>
+      )
+    }
+
+    return (
+      <View onLayout={this.handleLayout}>
+        {photoSize && (
+          <View style={styles.photoRow}>
+            {renderPhoto(0)}
+            {renderPhoto(1)}
+          </View>
+        )}
+        {photoSize && (
+          <View style={styles.photoRow}>
+            {renderPhoto(2)}
+            {renderPhoto(3)}
+          </View>
+        )}
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  photoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    paddingTop: 5,
+    paddingBottom: 5,
+  },
+})

mobile/src/ui/index.js

@@ -3,10 +3,13 @@ export { Header } from "./Header"
 export { OptionStrip } from "./OptionStrip"
 export { BubbleLoader } from "./BubbleLoader"
 export { ProgressBar } from "./ProgressBar"
+export { PhotoPanel } from "./PhotoPanel"
 export { Geolocation } from "./Geolocation"
 export { BoundSwitch } from "./BoundSwitch"
 export { BoundInput } from "./BoundInput"
 export { FormStaticInput } from "./FormStaticInput"
+export { FormStaticPhotoPanel } from "./FormStaticPhotoPanel"
+export { FormStaticOptionStrip } from "./FormStaticOptionStrip"
 export { BoundButton } from "./BoundButton"
 export { BoundOptionStrip } from "./BoundOptionStrip"
 export { BoundHeader } from "./BoundHeader"

mobile/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.1.3',
-  fullVersion: '1.1.3-20180529.0',
+  version: '1.2.1',
+  fullVersion: '1.2.1-20180531.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "deighton-ar",
-  "version": "1.1.3",
+  "version": "1.2.1",
   "description": "Deighton AR Training System",
   "main": "index.js",
   "repository": {

server/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.1.3',
-  fullVersion: '1.1.3-20180529.0',
+  version: '1.2.1',
+  fullVersion: '1.2.1-20180531.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',

version.json5

@@ -15,11 +15,11 @@
   buildFormat: "full",
   tags: {
     major: 1,
-    minor: 1,
-    patch: 3,
-    build: 20180529,
+    minor: 2,
+    patch: 1,
+    build: 20180531,
     revision: 0,
-    sequence: 9,
+    sequence: 11,
     tz: "America/Los_Angeles",
     title: "Deighton AR System",
     copyright: "© 2018, Kingston Software Solutions.",

website/src/App.js

@@ -13,7 +13,6 @@ import { Home } from "./Home"
 import { Profile } from "./Profile"
 import { Users } from "./Users"
 import { Teams } from "./Teams"
-import { System } from "./System"
 import { Header, Column, Footer } from "ui"
 import { BrowserRouter, Route, Switch } from "react-router-dom"
 import { sizeInfo } from "ui/style"
@@ -84,12 +83,6 @@ export class App extends Component {
             />
             <ProtectedRoute exact admin path="/admin/home" component={Home} />
             <ProtectedRoute exact admin path="/admin/teams" component={Teams} />
-            <ProtectedRoute
-              exact
-              admin
-              path="/admin/system"
-              component={System}
-            />
             <ProtectedRoute exact admin path="/admin/users" component={Users} />
             <DefaultRoute user="/user/profile" admin="/admin/home" />
           </Switch>

website/src/Home/Home.js

@@ -1,47 +1,217 @@
 import React, { Component, Fragment } from "react"
 import PropTypes from "prop-types"
-import { Row, Column, PanelButton } from "ui"
-import { sizeInfo } from "ui/style"
+import { Box, Image, Column, Row, Button, Link } from "ui"
+import { MessageModal, WaitModal, YesNoMessageModal } from "../Modal"
+import { sizeInfo, colorInfo } from "ui/style"
+import headerLogo from "images/logo.png"
+import autobind from "autobind-decorator"
+import { api } from "../API"
 
 export class Home extends Component {
   static propTypes = {
-    history: PropTypes.object,
+    changeTitle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      messageModal: null,
+      waitModal: null,
+      yesNoModal: null,
+    }
+  }
+
+  @autobind
+  handleDeleteActivities() {
+    this.setState({
+      yesNoModal: {
+        question:
+          "Are you sure you want to delete all activities in the system?",
+        onDismiss: this.handleDeleteActivitiesDismiss,
+      },
+    })
+  }
+
+  @autobind
+  handleDeleteActivitiesDismiss(yes) {
+    if (yes) {
+      this.setState({ waitModal: { message: "Deleting All Activities..." } })
+      api
+        .deleteAllActivities()
+        .then(() => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "thumb",
+              message: "All logged activities have been deleted",
+            },
+          })
+        })
+        .catch((error) => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "hand",
+              message: "Unable to request delete activities.",
+              detail: error.message,
+            },
+          })
+        })
+    }
+
+    this.setState({
+      yesNoModal: null,
+    })
+  }
+
+  @autobind
+  handleDeleteWorkItems() {
+    this.setState({
+      yesNoModal: {
+        question:
+          "Are you sure you want to delete all work items & activities in the system?",
+        onDismiss: this.handleDeleteWorkItemsDismiss,
+      },
+    })
+  }
+
+  @autobind
+  handleDeleteWorkItemsDismiss(yes) {
+    if (yes) {
+      this.setState({
+        waitModal: { message: "Deleting All Work Items & Activities..." },
+      })
+      api
+        .deleteAllWorkItems()
+        .then(() => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "thumb",
+              message: "All work items and logged activities have been deleted",
+            },
+          })
+        })
+        .catch((error) => {
+          this.setState({
+            waitModal: null,
+            messageModal: {
+              icon: "hand",
+              message: "Unable to delete work items and activities.",
+              detail: error.message,
+            },
+          })
+        })
+    }
+
+    this.setState({
+      yesNoModal: null,
+    })
+  }
+
+  @autobind
+  handleMessageModalDismiss() {
+    this.setState({ messageModal: null })
   }
 
   render() {
+    const { messageModal, yesNoModal, waitModal } = this.state
+
     return (
       <Fragment>
         <Column.Item grow />
+        <Column.Item>
+          <Row>
+            <Row.Item grow />
+            <Row.Item width={sizeInfo.formRowSpacing} />
+            <Row.Item width={sizeInfo.modalWidth}>
+              <Box
+                border={{
+                  width: sizeInfo.headerBorderWidth,
+                  color: colorInfo.headerBorder,
+                }}
+                radius={sizeInfo.formBoxRadius}>
+                <Column>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
                   <Column.Item>
                     <Row>
                       <Row.Item grow />
                       <Row.Item>
-              <PanelButton
-                icon="users"
-                text="Users"
-                onClick={() => this.props.history.push("/admin/users")}
-              />
-            </Row.Item>
-            <Row.Item width={sizeInfo.panelButtonSpacing} />
-            <Row.Item>
-              <PanelButton
-                icon="teams"
-                text="Teams"
-                onClick={() => this.props.history.push("/admin/teams")}
-              />
-            </Row.Item>
-            <Row.Item width={sizeInfo.panelButtonSpacing} />
-            <Row.Item>
-              <PanelButton
-                icon="system"
-                text="System"
-                onClick={() => this.props.history.push("/admin/system")}
+                        <Image
+                          source={headerLogo}
+                          width={sizeInfo.loginLogoWidth}
                         />
                       </Row.Item>
                       <Row.Item grow />
                     </Row>
                   </Column.Item>
-        <Column.Item grow />
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Button
+                          text="Delete All Activities"
+                          width={sizeInfo.buttonWideWidth}
+                          onClick={this.handleDeleteActivities}
+                        />
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Button
+                          text="Delete All Work Items"
+                          width={sizeInfo.buttonWideWidth}
+                          onClick={this.handleDeleteWorkItems}
+                        />
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Link to={api.makeTeamStatusUrl()}>
+                          Download Team Data
+                        </Link>
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item height={sizeInfo.formColumnSpacing} />
+                </Column>
+              </Box>
+            </Row.Item>
+            <Row.Item grow />
+          </Row>
+        </Column.Item>
+        <Column.Item grow>
+          <YesNoMessageModal
+            open={!!yesNoModal}
+            question={yesNoModal ? yesNoModal.question : ""}
+            onDismiss={yesNoModal && yesNoModal.onDismiss}
+          />
+
+          <MessageModal
+            open={!!messageModal}
+            icon={messageModal ? messageModal.icon : ""}
+            message={messageModal ? messageModal.message : ""}
+            detail={messageModal ? messageModal.title : ""}
+            onDismiss={this.handleMessageModalDismiss}
+          />
+
+          <WaitModal
+            open={!!waitModal}
+            message={waitModal ? waitModal.message : ""}
+          />
+        </Column.Item>
       </Fragment>
     )
   }

website/src/System/System.js

@@ -1,218 +0,0 @@
-import React, { Component, Fragment } from "react"
-import PropTypes from "prop-types"
-import { Box, Image, Column, Row, Button, Link } from "ui"
-import { MessageModal, WaitModal, YesNoMessageModal } from "../Modal"
-import { sizeInfo, colorInfo } from "ui/style"
-import headerLogo from "images/logo.png"
-import autobind from "autobind-decorator"
-import { api } from "../API"
-
-export class System extends Component {
-  static propTypes = {
-    changeTitle: PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      messageModal: null,
-      waitModal: null,
-      yesNoModal: null,
-    }
-  }
-
-  @autobind
-  handleDeleteActivities() {
-    this.setState({
-      yesNoModal: {
-        question:
-          "Are you sure you want to delete all activities in the system?",
-        onDismiss: this.handleDeleteActivitiesDismiss,
-      },
-    })
-  }
-
-  @autobind
-  handleDeleteActivitiesDismiss(yes) {
-    if (yes) {
-      this.setState({ waitModal: { message: "Deleting All Activities..." } })
-      api
-        .deleteAllActivities()
-        .then(() => {
-          this.setState({
-            waitModal: null,
-            messageModal: {
-              icon: "thumb",
-              message: "All logged activities have been deleted",
-            },
-          })
-        })
-        .catch((error) => {
-          this.setState({
-            waitModal: null,
-            messageModal: {
-              icon: "hand",
-              message: "Unable to request delete activities.",
-              detail: error.message,
-            },
-          })
-        })
-    }
-
-    this.setState({
-      yesNoModal: null,
-    })
-  }
-
-  @autobind
-  handleDeleteWorkItems() {
-    this.setState({
-      yesNoModal: {
-        question:
-          "Are you sure you want to delete all work items & activities in the system?",
-        onDismiss: this.handleDeleteWorkItemsDismiss,
-      },
-    })
-  }
-
-  @autobind
-  handleDeleteWorkItemsDismiss(yes) {
-    if (yes) {
-      this.setState({
-        waitModal: { message: "Deleting All Work Items & Activities..." },
-      })
-      api
-        .deleteAllWorkItems()
-        .then(() => {
-          this.setState({
-            waitModal: null,
-            messageModal: {
-              icon: "thumb",
-              message: "All work items and logged activities have been deleted",
-            },
-          })
-        })
-        .catch((error) => {
-          this.setState({
-            waitModal: null,
-            messageModal: {
-              icon: "hand",
-              message: "Unable to delete work items and activities.",
-              detail: error.message,
-            },
-          })
-        })
-    }
-
-    this.setState({
-      yesNoModal: null,
-    })
-  }
-
-  @autobind
-  handleMessageModalDismiss() {
-    this.setState({ messageModal: null })
-  }
-
-  render() {
-    const { messageModal, yesNoModal, waitModal } = this.state
-
-    return (
-      <Fragment>
-        <Column.Item grow />
-        <Column.Item>
-          <Row>
-            <Row.Item grow />
-            <Row.Item width={sizeInfo.formRowSpacing} />
-            <Row.Item width={sizeInfo.modalWidth}>
-              <Box
-                border={{
-                  width: sizeInfo.headerBorderWidth,
-                  color: colorInfo.headerBorder,
-                }}
-                radius={sizeInfo.formBoxRadius}>
-                <Column>
-                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
-                  <Column.Item>
-                    <Row>
-                      <Row.Item grow />
-                      <Row.Item>
-                        <Image
-                          source={headerLogo}
-                          width={sizeInfo.loginLogoWidth}
-                        />
-                      </Row.Item>
-                      <Row.Item grow />
-                    </Row>
-                  </Column.Item>
-                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
-                  <Column.Item>
-                    <Row>
-                      <Row.Item grow />
-                      <Row.Item>
-                        <Button
-                          text="Delete All Activities"
-                          width={sizeInfo.buttonWideWidth}
-                          onClick={this.handleDeleteActivities}
-                        />
-                      </Row.Item>
-                      <Row.Item grow />
-                    </Row>
-                  </Column.Item>
-                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
-                  <Column.Item>
-                    <Row>
-                      <Row.Item grow />
-                      <Row.Item>
-                        <Button
-                          text="Delete All Work Items"
-                          width={sizeInfo.buttonWideWidth}
-                          onClick={this.handleDeleteWorkItems}
-                        />
-                      </Row.Item>
-                      <Row.Item grow />
-                    </Row>
-                  </Column.Item>
-                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
-                  <Column.Item>
-                    <Row>
-                      <Row.Item grow />
-                      <Row.Item>
-                        <Link to={api.makeTeamStatusUrl()}>
-                          Download Team Data
-                        </Link>
-                      </Row.Item>
-                      <Row.Item grow />
-                    </Row>
-                  </Column.Item>
-                  <Column.Item height={sizeInfo.formColumnSpacing} />
-                </Column>
-              </Box>
-            </Row.Item>
-            <Row.Item grow />
-          </Row>
-        </Column.Item>
-        <Column.Item grow>
-          <YesNoMessageModal
-            open={!!yesNoModal}
-            question={yesNoModal ? yesNoModal.question : ""}
-            onDismiss={yesNoModal && yesNoModal.onDismiss}
-          />
-
-          <MessageModal
-            open={!!messageModal}
-            icon={messageModal ? messageModal.icon : ""}
-            message={messageModal ? messageModal.message : ""}
-            detail={messageModal ? messageModal.title : ""}
-            onDismiss={this.handleMessageModalDismiss}
-          />
-
-          <WaitModal
-            open={!!waitModal}
-            message={waitModal ? waitModal.message : ""}
-          />
-        </Column.Item>
-      </Fragment>
-    )
-  }
-}

website/src/System/index.js

@@ -1 +0,0 @@
-export { System } from './System'

website/src/ui/Header.js

@@ -127,6 +127,8 @@ Header.TextButton = Radium(
 
     static style = {
       display: "inline-block",
+      position: "relative",
+      top: 3,
       fontSize: fontInfo.size.header,
       fontFamily: fontInfo.family,
       color: fontInfo.color.normal,

website/src/ui/Icon.js

@@ -31,7 +31,6 @@ export class Icon extends Component {
     logout: require("./icons/logout.svg"),
     profile: require("./icons/profile.svg"),
     placeholder: require("./icons/placeholder.svg"),
-    system: require("./icons/system.svg"),
     thumb: require("./icons/thumb.svg"),
     team: require("./icons/team.svg"),
     teams: require("./icons/teams.svg"),

website/src/ui/PanelButton.js

@@ -1,65 +0,0 @@
-import Radium from 'radium'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { Icon } from '.'
-import { sizeInfo, fontInfo, colorInfo } from 'ui/style'
-
-@Radium
-export class PanelButton extends Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-    icon: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  }
-
-  static style = {
-    button: {
-      borderWidth: sizeInfo.panelButtonBorderWidth,
-      borderRadius:  sizeInfo.panelButtonBorderRadius,
-      padding: '0 0 0 0',
-      background: colorInfo.panelButtonBackground,
-      verticalAlign: 'middle',
-      outline: 'none',
-      ':hover': {
-        background: colorInfo.panelButtonBackgroundHover,
-      },
-      ':disabled': {
-        background: colorInfo.panelDisabledButtonBackground,
-      },
-      ':active': {
-        borderWidth: 0,
-        background: colorInfo.panelButtonBackgroundActive,
-      }
-    }
-  }
-
-  render() {
-    const { onClick, icon, text } = this.props
-
-    return (
-      <button type='button'
-        style={[
-          PanelButton.style.button, { height: sizeInfo.panelButton, width: sizeInfo.panelButton }
-        ]}
-        onClick={onClick}>
-        <div style={{ position: 'relative' }}>
-          <Icon
-            name={icon} size={sizeInfo.panelButtonIcon}
-            margin={sizeInfo.panelButtonIconMargin}
-            style={{ position: 'relative', top: sizeInfo.panelButtonIconOffset }} />
-          <span style={{
-            position: 'absolute',
-            top: sizeInfo.panelButtonTextOffset,
-            left: 0,
-            display: 'block',
-            fontSize: fontInfo.size.huge,
-            fontFamily: fontInfo.family,
-            color: fontInfo.color.text,
-            textAlign: 'center',
-            width: '100%',
-          }}>{text}</span>
-        </div>
-      </button>
-    )
-  }
-}

website/src/ui/icons/system.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
-    <title>system</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Home" transform="translate(-905.000000, -108.000000)" fill="#000000" fill-rule="nonzero">
-            <g id="System" transform="translate(870.000000, 94.000000)">
-                <g id="settings" transform="translate(35.000000, 14.000000)">
-                    <path d="M101.074434,139.158895 C101.074434,140.19171 101.889968,141 102.932039,141 C103.97411,141 104.789644,140.19171 104.789644,139.158895 L104.789644,102.696028 C107.779935,101.887737 110,99.193437 110,95.9602763 C110,92.1433506 106.873786,89 102.977346,89 C99.0809061,89 96,92.1433506 96,95.9602763 C96,99.148532 98.1747573,101.842832 101.119741,102.651123 L101.119741,139.158895 L101.074434,139.158895 Z M99.6245955,95.9602763 C99.6245955,94.164076 101.119741,92.6822107 102.932039,92.6822107 C104.744337,92.6822107 106.239482,94.164076 106.239482,95.9602763 C106.239482,97.7564767 104.744337,99.238342 102.932039,99.238342 C101.119741,99.238342 99.6245955,97.7564767 99.6245955,95.9602763 Z" id="Shape"></path>
-                    <path d="M122.954839,89 C121.916129,89 121.103226,89.8075928 121.103226,90.8395168 L121.103226,109.77308 C118.167742,110.580673 116,113.272649 116,116.458154 C116,119.643658 118.167742,122.335634 121.103226,123.143227 L121.103226,139.160483 C121.103226,140.192407 121.916129,141 122.954839,141 C123.993548,141 124.806452,140.192407 124.806452,139.160483 L124.806452,123.143227 C127.787097,122.335634 130,119.643658 130,116.413287 C130,113.182916 127.787097,110.49094 124.806452,109.683348 L124.806452,90.8395168 C124.806452,89.8075928 123.993548,89 122.954839,89 Z M126.341935,116.458154 C126.341935,118.252804 124.851613,119.733391 123.045161,119.733391 C121.23871,119.733391 119.748387,118.252804 119.748387,116.458154 C119.748387,114.663503 121.23871,113.182916 123.045161,113.182916 C124.851613,113.182916 126.341935,114.618637 126.341935,116.458154 Z" id="Shape"></path>
-                    <path d="M142.851184,127.348877 L142.851184,90.8411054 C142.851184,89.8082902 142.03832,89 140.999661,89 C139.961001,89 139.148137,89.8082902 139.148137,90.8411054 L139.148137,127.348877 C136.167637,128.157168 134,130.851468 134,134.039724 C134,137.856649 137.115978,141 140.999661,141 C144.883343,141 147.999321,137.901554 147.999321,134.039724 C148.04448,130.851468 145.831684,128.157168 142.851184,127.348877 Z M141.04482,137.317789 C139.238456,137.317789 137.748205,135.835924 137.748205,134.039724 C137.748205,132.243523 139.238456,130.761658 141.04482,130.761658 C142.851184,130.761658 144.341434,132.243523 144.341434,134.039724 C144.341434,135.835924 142.851184,137.317789 141.04482,137.317789 Z" id="Shape"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

website/src/ui/index.js

@@ -4,7 +4,6 @@ export { Button } from "./Button"
 export { FormIconButton } from "./FormIconButton"
 export { Header } from "./Header"
 export { Footer } from "./Footer"
-export { PanelButton } from "./PanelButton"
 export { Checkbox } from "./Checkbox"
 export { Input } from "./Input"
 export { Image } from "./Image"

website/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.1.3',
-  fullVersion: '1.1.3-20180529.0',
+  version: '1.2.1',
+  fullVersion: '1.2.1-20180531.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',