init senseBox connect features
This commit is contained in:
Mario Pesch
parent
e528a78e77
commit
faabd9e693
@ -1,32 +1,38 @@
|
||||
import { VISIT, LANGUAGE, RENDERER, STATISTICS } from './types';
|
||||
|
||||
import { VISIT, LANGUAGE, RENDERER, STATISTICS, PLATFORM } from "./types";
|
||||
|
||||
export const visitPage = () => (dispatch) => {
|
||||
dispatch({
|
||||
type: VISIT
|
||||
type: VISIT,
|
||||
});
|
||||
};
|
||||
|
||||
export const setPlatform = (platform) => (dispatch) => {
|
||||
dispatch({
|
||||
type: PLATFORM,
|
||||
payload: platform,
|
||||
});
|
||||
};
|
||||
|
||||
export const setLanguage = (language) => (dispatch, getState) => {
|
||||
if (!getState().auth.progress && !getState().auth.isAuthenticated) {
|
||||
window.localStorage.setItem('locale', language);
|
||||
window.localStorage.setItem("locale", language);
|
||||
}
|
||||
dispatch({
|
||||
type: LANGUAGE,
|
||||
payload: language
|
||||
payload: language,
|
||||
});
|
||||
};
|
||||
|
||||
export const setRenderer = (renderer) => (dispatch) => {
|
||||
dispatch({
|
||||
type: RENDERER,
|
||||
payload: renderer
|
||||
payload: renderer,
|
||||
});
|
||||
};
|
||||
|
||||
export const setStatistics = (showStatistics) => (dispatch) => {
|
||||
dispatch({
|
||||
type: STATISTICS,
|
||||
payload: showStatistics
|
||||
payload: showStatistics,
|
||||
});
|
||||
};
|
||||
|
||||
@ -43,6 +43,7 @@ export const PROGRESS = "PROGRESS";
|
||||
|
||||
export const VISIT = "VISIT";
|
||||
export const LANGUAGE = "LANGUAGE";
|
||||
export const PLATFORM = "PLATFORM";
|
||||
export const RENDERER = "RENDERER";
|
||||
export const STATISTICS = "STATISTICS";
|
||||
|
||||
|
||||
@ -1,68 +1,72 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { clearStats, workspaceName } from '../actions/workspaceActions';
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import { clearStats, workspaceName } from "../actions/workspaceActions";
|
||||
|
||||
import * as Blockly from 'blockly/core';
|
||||
import { createNameId } from 'mnemonic-id';
|
||||
import * as Blockly from "blockly/core";
|
||||
import { createNameId } from "mnemonic-id";
|
||||
|
||||
import WorkspaceStats from './Workspace/WorkspaceStats';
|
||||
import WorkspaceFunc from './Workspace/WorkspaceFunc';
|
||||
import BlocklyWindow from './Blockly/BlocklyWindow';
|
||||
import CodeViewer from './CodeViewer';
|
||||
import TrashcanButtons from './Workspace/TrashcanButtons';
|
||||
import HintTutorialExists from './Tutorial/HintTutorialExists';
|
||||
import Snackbar from './Snackbar';
|
||||
import WorkspaceStats from "./Workspace/WorkspaceStats";
|
||||
import WorkspaceFunc from "./Workspace/WorkspaceFunc";
|
||||
import BlocklyWindow from "./Blockly/BlocklyWindow";
|
||||
import CodeViewer from "./CodeViewer";
|
||||
import TrashcanButtons from "./Workspace/TrashcanButtons";
|
||||
import HintTutorialExists from "./Tutorial/HintTutorialExists";
|
||||
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import Tooltip from "@material-ui/core/Tooltip";
|
||||
import { withStyles } from "@material-ui/core/styles";
|
||||
|
||||
import { faCode } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import TooltipViewer from './TooltipViewer';
|
||||
|
||||
import TooltipViewer from "./TooltipViewer";
|
||||
import Dialog from "./Dialog";
|
||||
|
||||
const styles = (theme) => ({
|
||||
codeOn: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
'&:hover': {
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.contrastText,
|
||||
color: theme.palette.primary.main,
|
||||
border: `1px solid ${theme.palette.secondary.main}`
|
||||
}
|
||||
border: `1px solid ${theme.palette.secondary.main}`,
|
||||
},
|
||||
},
|
||||
codeOff: {
|
||||
backgroundColor: theme.palette.primary.contrastText,
|
||||
color: theme.palette.primary.main,
|
||||
border: `1px solid ${theme.palette.secondary.main}`,
|
||||
'&:hover': {
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
class Home extends Component {
|
||||
|
||||
state = {
|
||||
codeOn: true,
|
||||
snackbar: false,
|
||||
type: '',
|
||||
key: '',
|
||||
message: ''
|
||||
}
|
||||
type: "",
|
||||
key: "",
|
||||
message: "",
|
||||
open: true,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({ stats: window.localStorage.getItem('stats') });
|
||||
console.log(this.props.platform);
|
||||
this.setState({ stats: window.localStorage.getItem("stats") });
|
||||
if (!this.props.project) {
|
||||
this.props.workspaceName(createNameId());
|
||||
}
|
||||
if (this.props.message && this.props.message.id === 'GET_SHARE_FAIL') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Das angefragte geteilte Projekt konnte nicht gefunden werden.`, type: 'error' });
|
||||
if (this.props.message && this.props.message.id === "GET_SHARE_FAIL") {
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: `Das angefragte geteilte Projekt konnte nicht gefunden werden.`,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,6 +84,10 @@ class Home extends Component {
|
||||
this.props.workspaceName(null);
|
||||
}
|
||||
|
||||
toggleDialog = () => {
|
||||
this.setState({ open: !this.state });
|
||||
};
|
||||
|
||||
onChange = () => {
|
||||
this.setState({ codeOn: !this.state.codeOn });
|
||||
const workspace = Blockly.getMainWorkspace();
|
||||
@ -87,67 +95,113 @@ class Home extends Component {
|
||||
if (workspace.trashcan && workspace.trashcan.flyout) {
|
||||
workspace.trashcan.flyout.hide(); // in case of resize, the trash flyout does not reposition
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.statistics ?
|
||||
<div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
|
||||
: null
|
||||
}
|
||||
<div className='workspaceFunc' style={{ float: 'right', height: '40px', marginBottom: '20px' }}>
|
||||
<WorkspaceFunc project={this.props.project} projectType={this.props.projectType} />
|
||||
{this.props.statistics ? (
|
||||
<div style={{ float: "left", height: "40px", position: "relative" }}>
|
||||
<WorkspaceStats />
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
className="workspaceFunc"
|
||||
style={{ float: "right", height: "40px", marginBottom: "20px" }}
|
||||
>
|
||||
<WorkspaceFunc
|
||||
project={this.props.project}
|
||||
projectType={this.props.projectType}
|
||||
/>
|
||||
</div>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={this.state.codeOn ? 8 : 12} style={{ position: 'relative' }}>
|
||||
<Tooltip title={this.state.codeOn ? 'Code ausblenden' : 'Code anzeigen'} >
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={this.state.codeOn ? 8 : 12}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<Tooltip
|
||||
title={this.state.codeOn ? "Code ausblenden" : "Code anzeigen"}
|
||||
>
|
||||
<IconButton
|
||||
className={`showCode ${this.state.codeOn ? this.props.classes.codeOn : this.props.classes.codeOff}`}
|
||||
style={{ width: '40px', height: '40px', position: 'absolute', top: -12, right: 8, zIndex: 21 }}
|
||||
className={`showCode ${
|
||||
this.state.codeOn
|
||||
? this.props.classes.codeOn
|
||||
: this.props.classes.codeOff
|
||||
}`}
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
position: "absolute",
|
||||
top: -12,
|
||||
right: 8,
|
||||
zIndex: 21,
|
||||
}}
|
||||
onClick={() => this.onChange()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCode} size="xs" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<TrashcanButtons />
|
||||
<div className='blocklyWindow'>
|
||||
{this.props.project ?
|
||||
< BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project.xml} />
|
||||
: < BlocklyWindow blocklyCSS={{ height: '80vH' }} />
|
||||
}
|
||||
<div className="blocklyWindow">
|
||||
{this.props.project ? (
|
||||
<BlocklyWindow
|
||||
blocklyCSS={{ height: "80vH" }}
|
||||
initialXml={this.props.project.xml}
|
||||
/>
|
||||
) : (
|
||||
<BlocklyWindow blocklyCSS={{ height: "80vH" }} />
|
||||
)}
|
||||
</div>
|
||||
</Grid>
|
||||
{this.state.codeOn ?
|
||||
{this.state.codeOn ? (
|
||||
<Grid item xs={12} md={4}>
|
||||
<CodeViewer />
|
||||
<TooltipViewer />
|
||||
</Grid>
|
||||
: null}
|
||||
) : null}
|
||||
</Grid>
|
||||
<HintTutorialExists />
|
||||
<Snackbar
|
||||
open={this.state.snackbar}
|
||||
message={this.state.message}
|
||||
type={this.state.type}
|
||||
key={this.state.key}
|
||||
/>
|
||||
{this.props.platform ? (
|
||||
<Dialog
|
||||
style={{ zIndex: 9999999 }}
|
||||
fullWidth
|
||||
maxWidth={"sm"}
|
||||
open={this.state.open}
|
||||
title=""
|
||||
content={""}
|
||||
onClose={this.toggleDialog}
|
||||
onClick={this.toggleDialog}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
<div>Du verwendest: {this.props.platform}</div>
|
||||
<div>Lade die App hier herunter: </div>
|
||||
<div>
|
||||
Testlink:{" "}
|
||||
<a href="blocklyconnect-app://sketch/123456">Öffne App</a>
|
||||
</div>
|
||||
</Dialog>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Home.propTypes = {
|
||||
clearStats: PropTypes.func.isRequired,
|
||||
workspaceName: PropTypes.func.isRequired,
|
||||
message: PropTypes.object.isRequired,
|
||||
statistics: PropTypes.bool.isRequired
|
||||
statistics: PropTypes.bool.isRequired,
|
||||
platform: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
const mapStateToProps = (state) => ({
|
||||
message: state.message,
|
||||
statistics: state.general.statistics
|
||||
statistics: state.general.statistics,
|
||||
platform: state.general.platform,
|
||||
});
|
||||
|
||||
|
||||
export default connect(mapStateToProps, { clearStats, workspaceName })(withStyles(styles, { withTheme: true })(Home));
|
||||
export default connect(mapStateToProps, { clearStats, workspaceName })(
|
||||
withStyles(styles, { withTheme: true })(Home)
|
||||
);
|
||||
|
||||
@ -21,6 +21,7 @@ import "prismjs/themes/prism.css";
|
||||
import "prismjs/plugins/line-numbers/prism-line-numbers";
|
||||
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
|
||||
import MuiDrawer from "@material-ui/core/Drawer";
|
||||
import Dialog from "../Dialog";
|
||||
|
||||
const styles = (theme) => ({
|
||||
backdrop: {
|
||||
@ -65,6 +66,8 @@ class Compile extends Component {
|
||||
content: "",
|
||||
name: props.name,
|
||||
error: "",
|
||||
appLink: "",
|
||||
appDialog: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -126,10 +129,16 @@ class Compile extends Component {
|
||||
};
|
||||
|
||||
toggleDialog = () => {
|
||||
this.setState({ open: !this.state, progress: false });
|
||||
this.setState({ open: !this.state, progress: false, appDialog: false });
|
||||
};
|
||||
|
||||
createFileName = () => {
|
||||
if (this.props.platform === "iOS") {
|
||||
this.setState({
|
||||
link: `blocklyconnect-app://${this.state.name}/${this.state.id}`,
|
||||
});
|
||||
this.setState({ appDialog: true });
|
||||
} else {
|
||||
if (this.state.name) {
|
||||
this.download();
|
||||
} else {
|
||||
@ -141,6 +150,19 @@ class Compile extends Component {
|
||||
"Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// if (this.state.name) {
|
||||
// this.download();
|
||||
// } else {
|
||||
// this.setState({
|
||||
// file: true,
|
||||
// open: true,
|
||||
// title: "Projekt kompilieren",
|
||||
// content:
|
||||
// "Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
setFileName = (e) => {
|
||||
@ -240,6 +262,24 @@ class Compile extends Component {
|
||||
{`${this.state.error}`}{" "}
|
||||
</p>
|
||||
</Drawer>
|
||||
<Dialog
|
||||
style={{ zIndex: 9999999 }}
|
||||
fullWidth
|
||||
maxWidth={"sm"}
|
||||
open={this.state.appDialog}
|
||||
title=""
|
||||
content={""}
|
||||
onClose={this.toggleDialog}
|
||||
onClick={this.toggleDialog}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
<div>Du verwendest: {this.props.platform}</div>
|
||||
<div>Lade die App hier herunter: </div>
|
||||
<div>
|
||||
Testlink: <a href={this.state.link}>Öffne App</a>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{/* <Dialog
|
||||
open={this.state.open}
|
||||
title={this.state.title}
|
||||
@ -272,11 +312,13 @@ Compile.propTypes = {
|
||||
arduino: PropTypes.string.isRequired,
|
||||
name: PropTypes.string,
|
||||
workspaceName: PropTypes.func.isRequired,
|
||||
platform: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
arduino: state.workspace.code.arduino,
|
||||
name: state.workspace.name,
|
||||
platform: state.general.platform,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { workspaceName })(
|
||||
|
||||
@ -1,35 +1,62 @@
|
||||
import { VISIT, LANGUAGE, RENDERER, STATISTICS } from '../actions/types';
|
||||
import {
|
||||
VISIT,
|
||||
LANGUAGE,
|
||||
RENDERER,
|
||||
STATISTICS,
|
||||
PLATFORM,
|
||||
} from "../actions/types";
|
||||
|
||||
const initialLanguage = () => {
|
||||
if (window.localStorage.getItem('locale')) {
|
||||
return window.localStorage.getItem('locale');
|
||||
if (window.localStorage.getItem("locale")) {
|
||||
return window.localStorage.getItem("locale");
|
||||
}
|
||||
if (navigator.language === 'de-DE'){
|
||||
return 'de_DE';
|
||||
if (navigator.language === "de-DE") {
|
||||
return "de_DE";
|
||||
}
|
||||
return 'en_US';
|
||||
return "en_US";
|
||||
};
|
||||
|
||||
const getPlatform = () => {
|
||||
var userAgent = window.navigator.userAgent,
|
||||
platform = window.navigator.platform,
|
||||
macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"],
|
||||
windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"],
|
||||
iosPlatforms = ["iPhone", "iPad", "iPod"],
|
||||
os = null;
|
||||
if (macosPlatforms.indexOf(platform) !== -1) {
|
||||
os = "Mac OS";
|
||||
} else if (iosPlatforms.indexOf(platform) !== -1) {
|
||||
os = "iOS";
|
||||
} else if (windowsPlatforms.indexOf(userAgent) !== -1) {
|
||||
os = "Windows";
|
||||
} else if (/Android/.test(userAgent)) {
|
||||
os = "Android";
|
||||
} else if (!os && /Linux/.test(platform)) {
|
||||
os = "Linux";
|
||||
}
|
||||
return os;
|
||||
};
|
||||
|
||||
const initialRenderer = () => {
|
||||
if (window.localStorage.getItem('renderer')) {
|
||||
return window.localStorage.getItem('renderer');
|
||||
if (window.localStorage.getItem("renderer")) {
|
||||
return window.localStorage.getItem("renderer");
|
||||
}
|
||||
return 'geras';
|
||||
return "geras";
|
||||
};
|
||||
|
||||
const initialStatistics = () => {
|
||||
if (window.localStorage.getItem('statistics')) {
|
||||
return JSON.parse(window.localStorage.getItem('statistics'));
|
||||
if (window.localStorage.getItem("statistics")) {
|
||||
return JSON.parse(window.localStorage.getItem("statistics"));
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
const initialState = {
|
||||
pageVisits: 0, // detect if previous URL was
|
||||
language: initialLanguage(),
|
||||
renderer: initialRenderer(),
|
||||
statistics: initialStatistics()
|
||||
statistics: initialStatistics(),
|
||||
platform: getPlatform(),
|
||||
};
|
||||
|
||||
export default function foo(state = initialState, action) {
|
||||
@ -37,24 +64,29 @@ export default function foo(state = initialState, action){
|
||||
case VISIT:
|
||||
return {
|
||||
...state,
|
||||
pageVisits: state.pageVisits += 1
|
||||
pageVisits: (state.pageVisits += 1),
|
||||
};
|
||||
case LANGUAGE:
|
||||
return {
|
||||
...state,
|
||||
language: action.payload
|
||||
language: action.payload,
|
||||
};
|
||||
case PLATFORM:
|
||||
return {
|
||||
...state,
|
||||
platform: action.payload,
|
||||
};
|
||||
case RENDERER:
|
||||
window.localStorage.setItem('renderer', action.payload);
|
||||
window.localStorage.setItem("renderer", action.payload);
|
||||
return {
|
||||
...state,
|
||||
renderer: action.payload
|
||||
renderer: action.payload,
|
||||
};
|
||||
case STATISTICS:
|
||||
window.localStorage.setItem('statistics', action.payload);
|
||||
window.localStorage.setItem("statistics", action.payload);
|
||||
return {
|
||||
...state,
|
||||
statistics: action.payload
|
||||
statistics: action.payload,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user