UI Fixes (#84)

* Chart files * Added mock_records * AnalyticsWidgets BarChart and SurveyResponseFrequencyChart take in data as prop * Started filtering * Working on applying checkboxes for filtering * Filtering re-renders the charts * Filtering for age group and tourists * dashboard aesthetics * Merged in from backend * Bolded headers for ManagedLocation tabs * added develop environment * amplify fix * Visualization of average rating over time * Statistics overview plus filter charts with checkboxes * Adjusted time parsing correctly * Added code to update overview section with real data * Filtering for day and hours * Added capacity questions, fixed some styling * Initial settings commit * Changed location boxes to reflect new design Made stars accommodate fractional ratings * Function to render checkboxes * formatting * Added titles to charts * cardstyle outline * upload pic fixed' : * amplify pull * Time filtering for both sections of charts * Only shows not enough data message when data has been retrieved and length is 0 * Reformatted filtering options * Formatting * Formatting for overview statistics * Changed location boxes to reflect new design Made stars accommodate fractional ratings * front end edit location * Formatting * Formatting * update location * QR Code Filtering * Formatting * Formatting * Slight style changes * Bug fix for if age question isn't answered * Analytics Dashboard excludes partially answered survey responses, 0 - 17 bucket changed to 13 - 17 (#48) * Started throwing out incomplete surveys * Exclude partially answered or unanswered surveys from analysis * Changed occurences of 0-17 to 13-17 * Check if age is undefined in FilteredDataToAgeBarChart * Change all occurrences of 0-17 to 13-17 in the data from the get request * added TODO * Minor change * Github Workflow (#57) * Displays a message if there is no data that fits the filtering criteria, changed QR code bottom axis to QR Code Name (#58) * evan/qr-formatting (#50) - deleted unnecessary console.log - formatted QR management tab * Survey data for 0-12 year olds is not collected. * Functionality for deleting location from ManagedLocation page * Jake/settings (#60) * backend support * amplify * Basic create settings progress * Initial settings page on sign up * Create manager settings works after making an account * Finished settings account creation and update in settings tab Added bootstrap error message instead of alert * Small star rating fix * Fixed bug from merging Co-authored-by: evansegaul <[email protected]> Co-authored-by: jsladerman <[email protected]> * Issue #62 - Populating flag for whether or not slider bar was touched (#63) * Survey should now be including info on whether or not slider was touched * Should be final version * Including flag for whether or not slider was touched or rating is valid Co-authored-by: Aviral Somani <[email protected]> * Dropdown menu for analytics filtering (#64) * Made filtering options collapsable * Slight styling change * Added instructions for filter widget Co-authored-by: jsladerman <[email protected]> * Billing page (#67) * Add location button is a pencil icon * Delete button in edit location modal * Changed == to === and != to !== in analytics dashboard * Fixed formatting so that everything is left-aligned in analytics dashboard when viewing from a wider screen * Changing delete phrasing correcting style difference (#72) * Jake/new loader (#70) LOADING replaced with loader everywhere * Evan/phone validation (#71) * validation fields * Fixing form completing notices * change name of field Co-authored-by: evansegaul <[email protected]> Co-authored-by: Aviral Somani <[email protected]> * Commenting out a line for Evan (#76) Co-authored-by: Aviral Somani <[email protected]> * Changed Tagline (#77) Co-authored-by: jsladerman <[email protected]> * Bug fix- NaN now displays a message (#78) * Minor UI Fixes (#80) Co-authored-by: evansegaul <[email protected]> * Added 3 default placeholders (#82) Co-authored-by: evansegaul <[email protected]> * privacy policy * add billing image * See menu launches new tab Co-authored-by: Gabi Gresenz <[email protected]> Co-authored-by: evansegaul <[email protected]> Co-authored-by: jsladerman <[email protected]> Co-authored-by: cleanview-jake <[email protected]> Co-authored-by: gabrielagresenz <[email protected]> Co-authored-by: aviralsomani <[email protected]> Co-authored-by: Aviral Somani <[email protected]>
jsladerman · Aug 4, 2020 · 6c64250 · 6c64250
1 parent bbb5320
commit 6c64250
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 35 deletions.
diff --git a/src/Components/Dashboard/AddLocation.js b/src/Components/Dashboard/AddLocation.js
@@ -11,10 +11,16 @@ import Alert from 'react-bootstrap/Alert'
 class AddLocation extends Component {
   constructor(props) {
     super(props);
-    // TOOD: add placeholder location images
+
+    const placeholderMap = {
+      0: require('../../images/locationPlaceholders/dark_blue.jpg'),
+      1: require('../../images/locationPlaceholders/teal.jpg'),
+      2: require('../../images/locationPlaceholders/light_blue.jpg'),
+    }
+    const placeholderUrl = placeholderMap[(Math.floor(Math.random() * Math.floor(3)))]
+
     this.state = {
-      imageUrl:
-        "https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg",
+      imageUrl: placeholderUrl,
       id: uuid(),
       imageLoading: false,
       noOutdoorSeating: true,

diff --git a/src/Components/Login/SignUpBox.js b/src/Components/Login/SignUpBox.js
@@ -51,15 +51,12 @@ class SignUpBox extends Component {
                     <Form.Group>
                         <div className={styles.checkBoxLabel}>
                             I agree to CleanView's {' '}
-                            <div className={styles.linkText}
-                                 onClick={() => console.log('Terms')}> {/* TODO */}
+                            <a 
+                            target="_blank"
+                            href="https://cleanview-location214612-prod.s3.us-east-1.amazonaws.com/public/CleanView_Terms_Of_Use.pdf"
+                            className={styles.linkText}>
                                 Terms of Use {' '}
-                            </div>
-                            and {' '}
-                            <div className={styles.linkText}
-                                 onClick={() => console.log('Privacy Policy')}> {/* TODO */}
-                                Privacy Policy
-                            </div>
+                            </a>
                         </div>
                         <Form.Control
                             className={styles.formCheckBox}

diff --git a/src/Components/ManagedLocationPage/QRCodeGenerator.js b/src/Components/ManagedLocationPage/QRCodeGenerator.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import styles from './css/QRCodeGenerator.module.css'
 import uuid from 'react-uuid';
 import { API } from 'aws-amplify';
-import { Formik, Form, Field } from 'formik';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
 import Button from "react-bootstrap/Button";
 import Table from 'react-bootstrap/Table'
 import Row from 'react-bootstrap/Row';
@@ -15,6 +15,7 @@ class QRCodeGenerator extends Component {
     this.state = {
       sublocations: '',
       environmentURL: '',
+      menuLink: '',
     };
 
     this.addSublocation = this.addSublocation.bind(this)
@@ -32,15 +33,21 @@ class QRCodeGenerator extends Component {
       name: values.name,
       id: uuid(),
       color: values.color,
+      active: 1,
+      menuLink: this.state.menuLink
     })
 
+    this.updateSublocations(currentSublocations)
+  }
+
+  updateSublocations = (sublocations) => {
     const apiName = 'ManageLocationApi';
     const path = '/location/sublocations';
     const requestData = {
       headers: {},
       response: true,
       body: {
-        sublocations: currentSublocations,
+        sublocations: sublocations,
         loc_id: this.props.id
       },
     }
@@ -71,6 +78,7 @@ class QRCodeGenerator extends Component {
         let currState = this.state
         currState.sublocations = response.data.body.sublocations
         currState.environmentURL = response.data.environmentURL
+        currState.menuLink = response.data.body.menu_link
         this.setState(currState)
       })
       .catch(error => {
@@ -91,12 +99,36 @@ class QRCodeGenerator extends Component {
       });
   };
 
+  // selectSublocations = () => {
+  //   return(
+  //     <div>
+  //         <FormCheck
+  //         custom
+  //         type={"switch"}
+  //         label={"Does this work"}
+  //         />
+  //         {this.state.sublocations.map( (sublocation) => {
+  //           console.log(sublocation)
+  //           return(
+  //             <FormCheck
+  //             custom
+  //             type={"switch"}
+  //             // className={'sublocationEditCheckbox'}
+  //             label={sublocation.name}
+  //             // defaultChecked={sublocation.active}
+  //             />
+  //           )
+  //         })}
+  //     </div>
+  //   )
+  // } 
+
   render() {
     if (!this.state.sublocations) {
       return (<p>Looking for QR codes...</p>)
     }
 
-    const sublocationRow = (name, color, sublocId) => {
+    const sublocationRow = (name, color, sublocId, menuLink) => {
       const totalId = this.props.id + '99strl99strl' + sublocId
       const apiEndpoint = "https://api.qrserver.com/v1/create-qr-code/?data=" + this.state.environmentURL + "/survey/"
       const colorParam = "&color=" + color
@@ -117,6 +149,9 @@ class QRCodeGenerator extends Component {
               <img src={inBrowserURL} alt="" title="" onClick={() => this.downloadQRCode(name, downloadURL)} />
              </a>
           </td>
+          <td>
+            <a href={menuLink ?? this.state.menuLink} target="_blank">See menu</a>
+          </td>
         </tr>
       );
     }
@@ -127,16 +162,22 @@ class QRCodeGenerator extends Component {
           <h4 className={styles.qrCodeSubheader}>Your QR Codes</h4>
           <Table striped bordered hover className={styles.qrTable}>
           <thead className={styles.qrTableHeaderRow}>
-            <th>
-            Name
-            </th>
-            <th>
-            QR Code Image (click to download)
-            </th>
+            <tr>
+              <th>
+              Name
+              </th>
+              <th>
+              QR Code Image (click to download)
+              </th>
+              <th>
+                Menu Link
+              </th>
+            </tr>
           </thead>
           <tbody>
           {this.state.sublocations.map((sublocation) => {
-            return sublocationRow(sublocation.name, sublocation.color, sublocation.id)
+            if(sublocation.active)
+              return sublocationRow(sublocation.name, sublocation.color, sublocation.id, sublocation.menuLink)
           })}
           </tbody>
         </Table>
@@ -146,13 +187,7 @@ class QRCodeGenerator extends Component {
       )
     }
 
-
-    // const subLocationList = this.state.sublocations.map((sublocation) => {
-    //   const total_id = this.props.id + '99strl99strl' + sublocation.id
-    //   return(
-    //     <SublocationQRCode id={total_id} name={sublocation.name} color={sublocation.color} key={sublocation.id} environmentURL={this.state.environmentURL} />
-    //   )
-    // })
+
 
     return (
         <div className={styles.qrManagementBlock}>
@@ -166,13 +201,8 @@ class QRCodeGenerator extends Component {
               <li>Use distinct QR codes for each individual table</li>
             </ul>
             <AddNewSublocation handleSubmit={this.addSublocation}/>
+            {/* {this.selectSublocations()} */}
             {sublocationtable()}
-            {/* <AddNewSublocation handleSubmit={this.addSublocation}/>
-            <br/>
-
-            <p>Each QR code links to the survey and then to your menu. You can manage your menu on the Menu Manager
-              tab.</p>
-            {subLocationList} */}
           </div>
         </div>
     );
@@ -192,6 +222,12 @@ class AddNewSublocation extends Component {
             name: '',
             color: '000000',
           }}
+          validate={(values) => {
+            let errors = {}
+            if(!values.name)
+              errors.name = "You must name your QR code."
+            return errors;
+          }}
         >
           <Form className={styles.qrCodeGeneratorWrapper}>
             <Row>
@@ -216,6 +252,11 @@ class AddNewSublocation extends Component {
                 <Button className={styles.generateQrCodeSubmit} type="submit">Generate</Button>
               </Col>
             </Row>
+            <Row>
+              <Col className={styles.qrCodeFormColumn}>
+                <ErrorMessage type="div" name="name" style={{'color': 'red'}}/>
+              </Col>
+            </Row>
           </Form>
         </Formik>
       </div>

diff --git a/src/Pages/Billing.js b/src/Pages/Billing.js
@@ -3,11 +3,17 @@ import styles from './css/Billing.module.css';
 
 class Billing extends Component {
     render() {
+        const imgSrc = require('./../images/FirstMonth.png')
         return (
             <div>
                 <div className={styles.body}>
                     <h1 className={styles.headerText}>Billing Dashboard</h1>
-                    <h4 className={styles.firstMonth}>Enjoy your first month, on us! 😊</h4>
+                    <br />
+                    <img 
+                    src={imgSrc} 
+                    alt={"Enjoy your first month, on us! 😊"} 
+                    height={600}
+                    ></img>
                 </div>
             </div>
 

diff --git a/src/images/FirstMonth.png b/src/images/FirstMonth.png
diff --git a/src/images/locationPlaceholders/dark_blue.jpg b/src/images/locationPlaceholders/dark_blue.jpg
diff --git a/src/images/locationPlaceholders/light_blue.jpg b/src/images/locationPlaceholders/light_blue.jpg
diff --git a/src/images/locationPlaceholders/teal.jpg b/src/images/locationPlaceholders/teal.jpg