-
Menu Manager
+
Current Menu
{this.titleText(this.state.menu_link)}
@@ -217,14 +216,12 @@ class PDFMenuUpload extends Component {
contentDisposition: 'inline; filename="' + filename + '"',
contentType: 'application/pdf'
})
- .then(result => console.log(result))
.catch(err => console.log(err))
Storage.get(filename)
.then(resultURL => {
const idx = resultURL.indexOf(filename)
const url = resultURL.substring(0, idx) + '' + filename
- console.log(url)
handleChangeFunc(url)
})
.catch(err => console.log(err))
diff --git a/src/Components/ManagedLocationPage/QRCodeGenerator.js b/src/Components/ManagedLocationPage/QRCodeGenerator.js
index bc4899f..933479f 100644
--- a/src/Components/ManagedLocationPage/QRCodeGenerator.js
+++ b/src/Components/ManagedLocationPage/QRCodeGenerator.js
@@ -4,6 +4,7 @@ import uuid from 'react-uuid';
import { API } from 'aws-amplify';
import { Formik, Form, Field } from 'formik';
import Button from "react-bootstrap/Button";
+import Table from 'react-bootstrap/Table'
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
@@ -77,51 +78,114 @@ class QRCodeGenerator extends Component {
})
}
+ downloadQRCode = (name, link) => {
+ fetch(link)
+ .then((response) => {
+ response.blob().then((blob) => {
+ let url = window.URL.createObjectURL(blob);
+ let a = document.createElement("a");
+ a.href = url;
+ a.download = "qr_code_" + name + ".jpg";
+ a.click();
+ });
+ });
+ };
+
render() {
if (!this.state.sublocations) {
- return (
Looking for sublocations...
)
+ return (
Looking for QR codes...
)
}
-
+ const sublocationRow = (name, color, sublocId) => {
+ 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
+
- console.log('id',this.props.id)
- console.log()
+ const browserSizeParam = "&size=100x100"
+ const inBrowserURL = apiEndpoint + totalId + colorParam + browserSizeParam
- const subLocationList = this.state.sublocations.map((sublocation) => {
- const total_id = this.props.id + '99strl99strl' + sublocation.id
+ const downloadSizeParam = "&size=500x500"
+ const downloadURL = apiEndpoint + totalId + colorParam + downloadSizeParam
return(
-
+
+ |
+ {name}
+ |
+
+
+  this.downloadQRCode(name, downloadURL)} />
+
+ |
+
+ );
+ }
+
+ const sublocationtable = () => {
+ return(
+
+
Your QR Codes
+
+
+ |
+ Name
+ |
+
+ QR Code Image (click to download)
+ |
+
+
+ {this.state.sublocations.map((sublocation) => {
+ return sublocationRow(sublocation.name, sublocation.color, sublocation.id)
+ })}
+
+
+
+
+
)
- })
+ }
+
+
+ // const subLocationList = this.state.sublocations.map((sublocation) => {
+ // const total_id = this.props.id + '99strl99strl' + sublocation.id
+ // return(
+ //
+ // )
+ // })
+
return (
-
+
-
QR Code Management
+
You can use a single QR code for the whole restaurant, or you can create multiple QR codes to gain more
targeted insight.
-
Examples:
+
- Use distinct QR codes for indoor and outdoor tables
- Use distinct QR codes for each individual table
+ {sublocationtable()}
+ {/*
- Your QR Codes
Each QR code links to the survey and then to your menu. You can manage your menu on the Menu Manager
tab.
- {subLocationList}
+ {subLocationList} */}
);
}
}
+
+
class AddNewSublocation extends Component {
render() {
return (
-
Create new QR code
+
Create New QR Code
this.props.handleSubmit(values)}
initialValues={{
@@ -133,13 +197,13 @@ class AddNewSublocation extends Component {
-
+