-
Notifications
You must be signed in to change notification settings - Fork 324
/
demo_iframe.tsx
103 lines (90 loc) · 3.16 KB
/
demo_iframe.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import mqtt, { ClientSubscribeCallback, IConnackPacket } from "mqtt";
import React from "react";
import { uuid } from "farmbot";
import axios from "axios";
import { ExternalUrl } from "../external_urls";
import { t } from "../i18next_wrapper";
import { tourPath } from "../help/tours";
import { Path } from "../internal_urls";
import { FBSelect } from "../ui";
import { SEED_DATA_OPTIONS, SEED_DATA_OPTIONS_DDI } from "../messages/cards";
interface State {
error: Error | undefined;
stage: string;
productLine: string;
}
const WS_CONFIG = {
username: "farmbot_demo",
password: "required, but not used.",
};
const SECRET = uuid().split("-").join("");
export const MQTT_CHAN = "demos/" + SECRET;
const HTTP_URL = "/api/demo_account";
export const EASTER_EGG = "BIRDS AREN'T REAL";
export const WAITING_ON_API = "Planting your demo garden...";
// APPLICATION CODE ==============================
export class DemoIframe extends React.Component<{}, State> {
state: State = {
error: undefined,
stage: t("DEMO THE APP"),
productLine: "genesis_1.7",
};
setError = (error?: Error) => this.setState({ error });
connectMqtt = (): Promise<IConnackPacket> => {
const client = mqtt.connect(globalConfig.MQTT_WS, WS_CONFIG);
return new Promise(resolve => {
client.on("message", this.handleMessage);
client.subscribe(MQTT_CHAN, this.setError as ClientSubscribeCallback);
client.on("connect", resolve);
});
};
connectApi = () => {
const is51 = (Math.round(Math.random() * 100) == 51);
is51 && this.setState({ stage: EASTER_EGG });
return axios
.post<string>(HTTP_URL, {
secret: SECRET,
product_line: this.state.productLine,
})
.then(() => this.setState({ stage: WAITING_ON_API }))
.catch(this.setError);
};
handleMessage =
(_chan: string, _buffer: Buffer) => {
localStorage.setItem("session", _buffer.toString());
const stepUrl = Path.withApp(Path.plants());
location.assign(tourPath(stepUrl, "gettingStarted", "intro"));
};
requestAccount = () => {
this.connectMqtt().then(this.connectApi);
};
ok = () => {
const selection = this.state.productLine;
return <div className="demo-container">
<video muted={true} autoPlay={true} loop={true} className="demo-video">
<source src={ExternalUrl.Video.desktop} type="video/mp4" />
</video>
<img className="demo-phone" src={ExternalUrl.Video.mobile} />
<button className="demo-button"
title={t("demo the app")}
onClick={this.requestAccount}>
{this.state.stage}
</button>
<FBSelect
key={selection}
extraClass={"demo-options"}
list={SEED_DATA_OPTIONS(true).filter(x => x.value != "none")}
customNullLabel={t("Select a model")}
selectedItem={SEED_DATA_OPTIONS_DDI()[selection]}
onChange={ddi => this.setState({ productLine: "" + ddi.value })} />
</div>;
};
no = () => {
console.error(this.state.error);
const message = JSON.stringify(this.state.error, undefined, 2);
return <pre>{message}: {"" + this.state.error}</pre>;
};
render() {
return this.state.error ? this.no() : this.ok();
}
}