diff --git a/src/actions/generalActions.js b/src/actions/generalActions.js index 754f438..f4dd22f 100644 --- a/src/actions/generalActions.js +++ b/src/actions/generalActions.js @@ -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); + if (!getState().auth.progress && !getState().auth.isAuthenticated) { + 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, }); }; diff --git a/src/actions/types.js b/src/actions/types.js index 7b474d6..223154d 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -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"; diff --git a/src/components/Home.js b/src/components/Home.js index d169d24..8fd25d7 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -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 (
- {this.props.statistics ? -
- : null - } -
- + {this.props.statistics ? ( +
+ +
+ ) : null} +
+
- - + + this.onChange()} > -
- {this.props.project ? - < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project.xml} /> - : < BlocklyWindow blocklyCSS={{ height: '80vH' }} /> - } +
+ {this.props.project ? ( + + ) : ( + + )}
- {this.state.codeOn ? + {this.state.codeOn ? ( - : null} + ) : null} - + {this.props.platform ? ( + +
Du verwendest: {this.props.platform}
+
Lade die App hier herunter:
+
+ Testlink:{" "} + Öffne App +
+ + ) : null}
); - }; + } } 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) +); diff --git a/src/components/Workspace/Compile.js b/src/components/Workspace/Compile.js index cf8014b..07401f3 100644 --- a/src/components/Workspace/Compile.js +++ b/src/components/Workspace/Compile.js @@ -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,21 +129,40 @@ class Compile extends Component { }; toggleDialog = () => { - this.setState({ open: !this.state, progress: false }); + this.setState({ open: !this.state, progress: false, appDialog: false }); }; createFileName = () => { - if (this.state.name) { - this.download(); - } else { + if (this.props.platform === "iOS") { 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'.", + link: `blocklyconnect-app://${this.state.name}/${this.state.id}`, }); + this.setState({ appDialog: true }); + } else { + 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'.", + }); + } } + + // 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}`}{" "}

+ +
Du verwendest: {this.props.platform}
+
Lade die App hier herunter:
+
+ Testlink: Öffne App +
+ + {/* ({ arduino: state.workspace.code.arduino, name: state.workspace.name, + platform: state.general.platform, }); export default connect(mapStateToProps, { workspaceName })( diff --git a/src/reducers/generalReducer.js b/src/reducers/generalReducer.js index 1571d63..cb80536 100644 --- a/src/reducers/generalReducer.js +++ b/src/reducers/generalReducer.js @@ -1,60 +1,92 @@ -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){ - switch(action.type){ +export default function foo(state = initialState, action) { + switch (action.type) { 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;