Merge branch 'add-translations' into backend-connection
This commit is contained in:
Delucse
commit
4588e2a69b
12
src/App.js
12
src/App.js
@ -11,10 +11,7 @@ import './App.css';
|
||||
|
||||
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
|
||||
|
||||
import Navbar from './components/Navbar';
|
||||
import Footer from './components/Footer';
|
||||
import Routes from './components/Route/Routes';
|
||||
import Cookies from './components/Cookies';
|
||||
import Content from './components/Content';
|
||||
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
@ -43,12 +40,7 @@ class App extends Component {
|
||||
<ThemeProvider theme={theme}>
|
||||
<Provider store={store}>
|
||||
<Router history={customHistory}>
|
||||
<div className="wrapper">
|
||||
<Navbar />
|
||||
<Routes />
|
||||
<Cookies />
|
||||
<Footer />
|
||||
</div>
|
||||
<Content />
|
||||
</Router>
|
||||
</Provider>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, GET_STATUS, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types';
|
||||
|
||||
import axios from 'axios';
|
||||
import { returnErrors, returnSuccess } from './messageActions'
|
||||
|
||||
import { returnErrors, returnSuccess } from './messageActions';
|
||||
import { setLanguage } from './generalActions';
|
||||
|
||||
// Check token & load user
|
||||
export const loadUser = () => (dispatch) => {
|
||||
@ -20,6 +20,7 @@ export const loadUser = () => (dispatch) => {
|
||||
type: USER_LOADED,
|
||||
payload: res.data.user
|
||||
});
|
||||
dispatch(setLanguage(res.data.user.language));
|
||||
},
|
||||
error: err => {
|
||||
if(err.response){
|
||||
@ -77,6 +78,7 @@ export const login = ({ email, password }) => (dispatch) => {
|
||||
type: GET_STATUS,
|
||||
payload: res.data.user.status
|
||||
});
|
||||
dispatch(setLanguage(res.data.user.language));
|
||||
dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS'));
|
||||
})
|
||||
.catch(err => {
|
||||
@ -170,6 +172,11 @@ export const logout = () => (dispatch) => {
|
||||
type: GET_STATUS,
|
||||
payload: status
|
||||
});
|
||||
var locale = 'de_DE';
|
||||
if (window.localStorage.getItem('locale')) {
|
||||
locale = window.localStorage.getItem('locale');
|
||||
}
|
||||
dispatch(setLanguage(locale));
|
||||
dispatch(returnSuccess(res.data.message, res.status, 'LOGOUT_SUCCESS'));
|
||||
clearTimeout(logoutTimerId);
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { VISIT } from './types';
|
||||
import { VISIT, LANGUAGE, RENDERER, STATISTICS } from './types';
|
||||
|
||||
|
||||
export const visitPage = () => (dispatch) => {
|
||||
@ -6,3 +6,27 @@ export const visitPage = () => (dispatch) => {
|
||||
type: VISIT
|
||||
});
|
||||
};
|
||||
|
||||
export const setLanguage = (language) => (dispatch, getState) => {
|
||||
if(!getState().auth.isAuthenticated){
|
||||
window.localStorage.setItem('locale', language);
|
||||
}
|
||||
dispatch({
|
||||
type: LANGUAGE,
|
||||
payload: language
|
||||
});
|
||||
};
|
||||
|
||||
export const setRenderer = (renderer) => (dispatch) => {
|
||||
dispatch({
|
||||
type: RENDERER,
|
||||
payload: renderer
|
||||
});
|
||||
};
|
||||
|
||||
export const setStatistics = (showStatistics) => (dispatch) => {
|
||||
dispatch({
|
||||
type: STATISTICS,
|
||||
payload: showStatistics
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from './types';
|
||||
|
||||
import axios from 'axios';
|
||||
import { workspaceName } from './workspaceActions';
|
||||
import { returnErrors, returnSuccess } from './messageActions';
|
||||
|
||||
export const setType = (type) => (dispatch) => {
|
||||
@ -19,13 +18,13 @@ export const setDescription = (description) => (dispatch) => {
|
||||
};
|
||||
|
||||
export const getProject = (type, id) => (dispatch) => {
|
||||
dispatch({type: PROJECT_PROGRESS});
|
||||
dispatch({ type: PROJECT_PROGRESS });
|
||||
dispatch(setType(type));
|
||||
const config = {
|
||||
success: res => {
|
||||
var data = type === 'share' ? 'content' : type;
|
||||
var project = res.data[data];
|
||||
if(project){
|
||||
if (project) {
|
||||
dispatch({
|
||||
type: GET_PROJECT,
|
||||
payload: project
|
||||
@ -34,11 +33,11 @@ export const getProject = (type, id) => (dispatch) => {
|
||||
type: PROJECT_DESCRIPTION,
|
||||
payload: project.description
|
||||
});
|
||||
dispatch({type: PROJECT_PROGRESS});
|
||||
dispatch({ type: PROJECT_PROGRESS });
|
||||
dispatch(returnSuccess(res.data.message, res.status, 'GET_PROJECT_SUCCESS'));
|
||||
}
|
||||
else{
|
||||
dispatch({type: PROJECT_PROGRESS});
|
||||
else {
|
||||
dispatch({ type: PROJECT_PROGRESS });
|
||||
dispatch(returnErrors(res.data.message, res.status, 'PROJECT_EMPTY'));
|
||||
}
|
||||
},
|
||||
@ -68,7 +67,7 @@ export const getProjects = (type) => (dispatch) => {
|
||||
type: GET_PROJECTS,
|
||||
payload: projects
|
||||
});
|
||||
dispatch({type: PROJECT_PROGRESS});
|
||||
dispatch({ type: PROJECT_PROGRESS });
|
||||
dispatch(returnSuccess(res.data.message, res.status));
|
||||
},
|
||||
error: err => {
|
||||
@ -94,7 +93,7 @@ export const updateProject = (type, id) => (dispatch, getState) => {
|
||||
title: workspace.name
|
||||
};
|
||||
var project = getState().project;
|
||||
if(type==='gallery'){
|
||||
if (type === 'gallery') {
|
||||
body.description = project.description;
|
||||
}
|
||||
const config = {
|
||||
@ -107,7 +106,7 @@ export const updateProject = (type, id) => (dispatch, getState) => {
|
||||
type: GET_PROJECTS,
|
||||
payload: projects
|
||||
});
|
||||
if(type === 'project'){
|
||||
if (type === 'project') {
|
||||
dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS'));
|
||||
} else {
|
||||
dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS'));
|
||||
@ -143,7 +142,7 @@ export const deleteProject = (type, id) => (dispatch, getState) => {
|
||||
type: GET_PROJECTS,
|
||||
payload: projects
|
||||
});
|
||||
if(type === 'project'){
|
||||
if (type === 'project') {
|
||||
dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_DELETE_SUCCESS'));
|
||||
} else {
|
||||
dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_DELETE_SUCCESS'));
|
||||
@ -169,7 +168,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => {
|
||||
var body = {
|
||||
title: title
|
||||
};
|
||||
if(type === 'project'){
|
||||
if (type === 'project') {
|
||||
body.projectId = id;
|
||||
} else {
|
||||
body.xml = getState().workspace.code.xml;
|
||||
@ -177,7 +176,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => {
|
||||
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body)
|
||||
.then(res => {
|
||||
var shareContent = res.data.content;
|
||||
if(body.projectId){
|
||||
if (body.projectId) {
|
||||
var projects = getState().project.projects;
|
||||
var index = projects.findIndex(res => res._id === id);
|
||||
projects[index].shared = shareContent.expiresAt;
|
||||
@ -189,7 +188,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => {
|
||||
dispatch(returnSuccess(res.data.message, shareContent._id, 'SHARE_SUCCESS'));
|
||||
})
|
||||
.catch(err => {
|
||||
if(err.response){
|
||||
if (err.response) {
|
||||
dispatch(returnErrors(err.response.data.message, err.response.status, 'SHARE_FAIL'));
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types';
|
||||
import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_STEP } from './types';
|
||||
|
||||
import axios from 'axios';
|
||||
import { returnErrors, returnSuccess } from './messageActions';
|
||||
@ -12,15 +12,11 @@ export const getTutorial = (id) => (dispatch, getState) => {
|
||||
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
|
||||
.then(res => {
|
||||
var tutorial = res.data.tutorial;
|
||||
console.log('status', getState().tutorial.status);
|
||||
existingTutorial(tutorial, getState().tutorial.status).then(status => {
|
||||
console.log('progress',getState().auth.progress);
|
||||
console.log('status');
|
||||
dispatch({
|
||||
type: TUTORIAL_SUCCESS,
|
||||
payload: status
|
||||
});
|
||||
console.log('eins');
|
||||
dispatch(updateStatus(status));
|
||||
dispatch({
|
||||
type: GET_TUTORIAL,
|
||||
@ -31,10 +27,10 @@ export const getTutorial = (id) => (dispatch, getState) => {
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
if(err.response){
|
||||
if (err.response) {
|
||||
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL'));
|
||||
}
|
||||
dispatch({type: TUTORIAL_PROGRESS});
|
||||
dispatch({ type: TUTORIAL_PROGRESS });
|
||||
});
|
||||
};
|
||||
|
||||
@ -54,15 +50,15 @@ export const getTutorials = () => (dispatch, getState) => {
|
||||
type: GET_TUTORIALS,
|
||||
payload: tutorials
|
||||
});
|
||||
dispatch({type: TUTORIAL_PROGRESS});
|
||||
dispatch({ type: TUTORIAL_PROGRESS });
|
||||
dispatch(returnSuccess(res.data.message, res.status));
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
if(err.response){
|
||||
if (err.response) {
|
||||
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL'));
|
||||
}
|
||||
dispatch({type: TUTORIAL_PROGRESS});
|
||||
dispatch({ type: TUTORIAL_PROGRESS });
|
||||
});
|
||||
};
|
||||
|
||||
@ -174,7 +170,7 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => {
|
||||
console.log('drei');
|
||||
dispatch(updateStatus(tutorialsStatus));
|
||||
dispatch(tutorialChange());
|
||||
dispatch(returnSuccess('','','TUTORIAL_CHECK_SUCCESS'));
|
||||
dispatch(returnSuccess('', '', 'TUTORIAL_CHECK_SUCCESS'));
|
||||
};
|
||||
|
||||
export const storeTutorialXml = (code) => (dispatch, getState) => {
|
||||
@ -208,9 +204,9 @@ export const tutorialStep = (step) => (dispatch) => {
|
||||
};
|
||||
|
||||
|
||||
const existingTutorials = (tutorials, status) => new Promise(function(resolve, reject){
|
||||
const existingTutorials = (tutorials, status) => new Promise(function (resolve, reject) {
|
||||
var newstatus;
|
||||
new Promise(function(resolve, reject){
|
||||
new Promise(function (resolve, reject) {
|
||||
var existingTutorialIds = tutorials.map((tutorial, i) => {
|
||||
existingTutorial(tutorial, status).then(status => {
|
||||
newstatus = status;
|
||||
@ -228,7 +224,6 @@ const existingTutorials = (tutorials, status) => new Promise(function(resolve, r
|
||||
});
|
||||
|
||||
const existingTutorial = (tutorial, status) => new Promise(function(resolve, reject){
|
||||
console.log('st',status);
|
||||
var tutorialsId = tutorial._id;
|
||||
var statusIndex = status.findIndex(status => status._id === tutorialsId);
|
||||
if (statusIndex > -1) {
|
||||
|
||||
@ -47,6 +47,9 @@ export const PROGRESS = 'PROGRESS';
|
||||
|
||||
|
||||
export const VISIT = 'VISIT';
|
||||
export const LANGUAGE = 'LANGUAGE';
|
||||
export const RENDERER = 'RENDERER';
|
||||
export const STATISTICS = 'STATISTICS';
|
||||
|
||||
// messages
|
||||
export const GET_ERRORS = 'GET_ERRORS';
|
||||
|
||||
@ -18,26 +18,14 @@ class BlocklyWindow extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.simpleWorkspace = React.createRef();
|
||||
var locale = window.localStorage.getItem('locale');
|
||||
this.state = {
|
||||
renderer: window.localStorage.getItem('renderer'),
|
||||
};
|
||||
if (locale === null) {
|
||||
if (navigator.language === 'de-DE') {
|
||||
locale = 'de';
|
||||
} else {
|
||||
locale = 'en';
|
||||
}
|
||||
}
|
||||
if (locale === 'de') {
|
||||
if (this.props.language === 'de_DE') {
|
||||
Blockly.setLocale(De);
|
||||
} else if (locale === 'en') {
|
||||
} else if (this.props.language === 'en_US') {
|
||||
Blockly.setLocale(En);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
const workspace = Blockly.getMainWorkspace();
|
||||
this.props.onChangeWorkspace({});
|
||||
this.props.clearStats();
|
||||
@ -72,7 +60,7 @@ class BlocklyWindow extends Component {
|
||||
style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
|
||||
readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
|
||||
trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
|
||||
renderer={this.state.renderer}
|
||||
renderer={this.props.renderer}
|
||||
zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
|
||||
controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
|
||||
wheel: false,
|
||||
@ -106,8 +94,14 @@ class BlocklyWindow extends Component {
|
||||
|
||||
BlocklyWindow.propTypes = {
|
||||
onChangeWorkspace: PropTypes.func.isRequired,
|
||||
clearStats: PropTypes.func.isRequired
|
||||
clearStats: PropTypes.func.isRequired,
|
||||
renderer: PropTypes.string.isRequired,
|
||||
language: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
renderer: state.general.renderer,
|
||||
language: state.general.language
|
||||
});
|
||||
|
||||
export default connect(null, { onChangeWorkspace, clearStats })(BlocklyWindow);
|
||||
export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow);
|
||||
|
||||
@ -138,6 +138,12 @@ Blockly.Blocks['sensebox_send_to_osem'] = {
|
||||
}
|
||||
console.log(dropdown)
|
||||
}
|
||||
if (dropdown.length > 1) {
|
||||
var options = dropdown.slice(1)
|
||||
return options
|
||||
} else {
|
||||
return dropdown
|
||||
}
|
||||
}
|
||||
return dropdown
|
||||
},
|
||||
|
||||
@ -800,4 +800,199 @@ Blockly.Msg.senseBox_mqtt_password = "Passwort";
|
||||
Blockly.Msg.sensebox_mqtt_subscribe = "Subscribe to Feed"
|
||||
Blockly.Msg.senseBox_mqtt_publish = "Sende an Feed/Topic";
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Typed Variable Modal
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
Blockly.Msg.TYPED_VAR_MODAL_CONFIRM_BUTTON = "Ok";
|
||||
Blockly.Msg.TYPED_VAR_MODAL_VARIABLE_NAME_LABEL = "Variablen Name: ";
|
||||
Blockly.Msg.TYPED_VAR_MODAL_TYPES_LABEL = "Variable Typen";
|
||||
Blockly.Msg.TYPED_VAR_MODAL_CANCEL_BUTTON = "Abbrechen";
|
||||
Blockly.Msg.TYPED_VAR_MODAL_TITLE = "Erstelle Variable";
|
||||
Blockly.Msg.TYPED_VAR_MODAL_INVALID_NAME = "Der Name ist ungültig, bitte versuche einen anderen."
|
||||
|
||||
/**
|
||||
* Add Translation for Blocks above
|
||||
* ---------------------------------------------------------------
|
||||
* Add Translation for the UI below
|
||||
*/
|
||||
|
||||
/**
|
||||
* Toolbox
|
||||
*/
|
||||
Blockly.Msg.toolbox_sensors = "Sensoren";
|
||||
Blockly.Msg.toolbox_logic = "Logik";
|
||||
Blockly.Msg.toolbox_loops = "Schleifen";
|
||||
Blockly.Msg.toolbox_math = "Mathematik";
|
||||
Blockly.Msg.toolbox_io = "Eingang/Ausgang";
|
||||
Blockly.Msg.toolbox_time = "Zeit";
|
||||
Blockly.Msg.toolbox_functions = "Funktionen";
|
||||
Blockly.Msg.toolbox_variables = "Variablen";
|
||||
|
||||
/**
|
||||
* Tooltips
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.tooltip_compile_code = "Code kompilieren"
|
||||
Blockly.Msg.tooltip_save_blocks = "Blöcke speichern";
|
||||
Blockly.Msg.tooltip_open_blocks = "Blöcke öffnen";
|
||||
Blockly.Msg.tooltip_screenshot = "Screenshot erstellen";
|
||||
Blockly.Msg.tooltip_clear_workspace = "Workspace zurücksetzen";
|
||||
Blockly.Msg.tooltip_share_blocks = "Blöcke teilen";
|
||||
Blockly.Msg.tooltip_show_code = "Code anzeigen";
|
||||
Blockly.Msg.tooltip_hide_code = "Code ausblenden"
|
||||
Blockly.Msg.tooltip_delete_project = "Projekt löschen"
|
||||
Blockly.Msg.tooltip_project_name = "Name des Projektes"
|
||||
Blockly.Msg.tooltip_download_project = "Projekt herunterladen"
|
||||
Blockly.Msg.tooltip_open_project = "Projekt öffnen"
|
||||
Blockly.Msg.tooltip_update_project = "Projekt aktualisieren"
|
||||
Blockly.Msg.tooltip_save_project = "Projekt speichern"
|
||||
Blockly.Msg.tooltip_create_project = "Projekt erstellen"
|
||||
Blockly.Msg.tooltip_share_project = "Projekt teilen"
|
||||
Blockly.Msg.tooltip_reset_workspace = "Workspace zurücksetzen"
|
||||
Blockly.Msg.tooltip_copy_link = "Link kopieren"
|
||||
Blockly.Msg.tooltip_trashcan_hide = 'gelöschte Blöcke ausblenden'
|
||||
Blockly.Msg.tooltip_trashcan_delete = 'Blöcke endgültig löschen'
|
||||
Blockly.Msg.tooltip_project_title = "Titel des Projektes"
|
||||
Blockly.Msg.tooltip_check_solution = "Lösung kontrollieren"
|
||||
|
||||
/**
|
||||
* Messages
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.messages_delete_project_failed = "Fehler beim Löschen des Projektes. Versuche es noch einmal."
|
||||
Blockly.Msg.messages_reset_workspace_success = "Das Projekt wurde erfolgreich zurückgesetzt"
|
||||
Blockly.Msg.messages_PROJECT_UPDATE_SUCCESS = "Das Projekt wurde erfolgreich aktualisiert."
|
||||
Blockly.Msg.messages_GALLERY_UPDATE_SUCCESS = "Das Galerie-Projekt wurde erfolgreich aktualisiert."
|
||||
Blockly.Msg.messages_PROJECT_UPDATE_FAIL = "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal."
|
||||
Blockly.Msg.messages_GALLERY_UPDATE_FAIL = "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal."
|
||||
Blockly.Msg.messages_gallery_save_fail_1 = "Fehler beim Speichern des "
|
||||
Blockly.Msg.messages_gallery_save_fail_2 = "Projektes. Versuche es noch einmal."
|
||||
Blockly.Msg.messages_SHARE_SUCCESS = 'Programm teilen'
|
||||
Blockly.Msg.messages_SHARE_FAIL = "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal."
|
||||
Blockly.Msg.messages_copylink_success = 'Link erfolgreich in Zwischenablage gespeichert.'
|
||||
Blockly.Msg.messages_rename_success_01 = 'Das Projekt wurde erfolgreich in '
|
||||
Blockly.Msg.messages_rename_success_02 = 'umbenannt.'
|
||||
Blockly.Msg.messages_newblockly_head = "Willkommen zur neuen Version Blockly für die senseBox"
|
||||
Blockly.Msg.messages_newblockly_text = "Die neue Blockly Version befindet sich zurzeit in der Testphase. Alle Neuigkeiten findet ihr hier:"
|
||||
Blockly.Msg.messages_GET_TUTORIAL_FAIL = 'Zurück zur Tutorials-Übersicht'
|
||||
Blockly.Msg.messages_LOGIN_FAIL = 'Der Benutzername oder das Passwort ist nicht korrekt.'
|
||||
/**
|
||||
* Share Dialog
|
||||
*/
|
||||
|
||||
Blockly.Msg.sharedialog_headline = "Dein Link wurde erstellt.";
|
||||
Blockly.Msg.sharedialog_text = "Über den folgenden Link kannst du dein Programm teilen.";
|
||||
|
||||
/**
|
||||
* Project rename Dialog
|
||||
*/
|
||||
|
||||
Blockly.Msg.renamedialog_headline = "Projekt benennen";
|
||||
Blockly.Msg.renamedialog_text = "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'."
|
||||
|
||||
/**
|
||||
* Compile Dialog
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.compiledialog_headline = "Fehler"
|
||||
Blockly.Msg.compiledialog_text = "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut"
|
||||
|
||||
/**
|
||||
* Buttons
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.button_cancel = "Abbrechen";
|
||||
Blockly.Msg.button_close = "Schließen";
|
||||
Blockly.Msg.button_accept = "Bestätigen";
|
||||
Blockly.Msg.button_compile = "Kompilieren";
|
||||
Blockly.Msg.button_create_variableCreate = "Erstelle Variable";
|
||||
Blockly.Msg.button_back = "Zurück"
|
||||
Blockly.Msg.button_next = "nächster Schritt"
|
||||
Blockly.Msg.button_tutorial_overview = "Tutorial Übersicht"
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.filename = "Dateiname";
|
||||
Blockly.Msg.projectname = "Projektname";
|
||||
|
||||
/**
|
||||
* Settings
|
||||
*/
|
||||
Blockly.Msg.settings_head = "Einstellungen"
|
||||
Blockly.Msg.settings_language = "Sprache"
|
||||
Blockly.Msg.settings_language_text = "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden."
|
||||
Blockly.Msg.settings_language_de = "Deutsch"
|
||||
Blockly.Msg.settings_language_en = "Englisch"
|
||||
Blockly.Msg.settings_renderer = "Renderer"
|
||||
Blockly.Msg.settings_renderer_text = "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist."
|
||||
Blockly.Msg.settings_statistics = "Statistiken"
|
||||
Blockly.Msg.settings_statistics_text = "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden."
|
||||
Blockly.Msg.settings_statistics_on = "An"
|
||||
Blockly.Msg.settings_statistics_off = "Aus"
|
||||
|
||||
/**
|
||||
* 404
|
||||
*/
|
||||
|
||||
Blockly.Msg.notfound_head = "Die von Ihnen angeforderte Seite kann nicht gefunden werden."
|
||||
Blockly.Msg.notfound_text = "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar."
|
||||
|
||||
|
||||
/**
|
||||
* Labels
|
||||
*/
|
||||
|
||||
Blockly.Msg.labels_donotshowagain = 'Dialog nicht mehr anzeigen'
|
||||
Blockly.Msg.labels_here = "hier"
|
||||
Blockly.Msg.labels_username = 'E-Mail oder Nutzername'
|
||||
|
||||
/**
|
||||
* Badges
|
||||
*/
|
||||
|
||||
Blockly.Msg.badges_explaination = "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du "
|
||||
Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01 = "Herzlichen Glückwunsch! Du hast den Badge "
|
||||
Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02 = " erhalten."
|
||||
/**
|
||||
* Tutorials
|
||||
*/
|
||||
|
||||
Blockly.Msg.tutorials_assessment_task = "Aufgabe"
|
||||
Blockly.Msg.tutorials_hardware_head = "Für die Umsetzung benötigst du folgende Hardware:"
|
||||
Blockly.Msg.tutorials_hardware_moreInformation = "Weitere Informationen zur Hardware-Komponente findest du"
|
||||
Blockly.Msg.tutorials_hardware_here = "hier";
|
||||
Blockly.Msg.tutorials_requirements = "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:"
|
||||
|
||||
|
||||
/**
|
||||
* Tutorial Builder
|
||||
*/
|
||||
|
||||
Blockly.Msg.builder_solution = "Lösung"
|
||||
Blockly.Msg.builder_solution_submit = "Lösung einreichen"
|
||||
Blockly.Msg.builder_example_submit = "Beispiel einreichen"
|
||||
Blockly.Msg.builder_comment = "Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird."
|
||||
Blockly.Msg.builder_hardware_order = "Beachte, dass die Reihenfolge des Auswählens maßgebend ist."
|
||||
Blockly.Msg.builder_hardware_helper = "Wähle mindestens eine Hardware-Komponente aus."
|
||||
Blockly.Msg.builder_requirements_head = "Voraussetzungen"
|
||||
Blockly.Msg.builder_requirements_order = "Beachte, dass die Reihenfolge des Anhakens maßgebend ist."
|
||||
|
||||
/**
|
||||
* Login
|
||||
*/
|
||||
|
||||
|
||||
Blockly.Msg.login_head = "Anmelden"
|
||||
export const De = Blockly.Msg;
|
||||
|
||||
@ -782,4 +782,101 @@ Blockly.Msg.senseBox_mqtt_password = "Password";
|
||||
Blockly.Msg.sensebox_mqtt_subscribe = "Subscribe to Feed"
|
||||
Blockly.Msg.senseBox_mqtt_publish = "Publish to Feed/Topic";
|
||||
|
||||
|
||||
/**
|
||||
* Add Translation for Blocks above
|
||||
* ---------------------------------------------------------------
|
||||
* Add Translation for the UI below
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Toolbox
|
||||
*/
|
||||
Blockly.Msg.toolbox_sensors = "Sensors";
|
||||
Blockly.Msg.toolbox_logic = "Logic";
|
||||
Blockly.Msg.toolbox_loops = "Loops";
|
||||
Blockly.Msg.toolbox_math = "Math";
|
||||
Blockly.Msg.toolbox_io = "Input/Output";
|
||||
Blockly.Msg.toolbox_time = "Time";
|
||||
Blockly.Msg.toolbox_functions = "Functions";
|
||||
Blockly.Msg.toolbox_variables = "Variables";
|
||||
|
||||
|
||||
/**
|
||||
* Tooltips
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.tooltip_compile_code = "Compile Code"
|
||||
Blockly.Msg.tooltip_save_blocks = "Save Blocks";
|
||||
Blockly.Msg.tooltip_open_blocks = "Open Blocks";
|
||||
Blockly.Msg.tooltip_screenshot = "Download Screenshot";
|
||||
Blockly.Msg.tooltip_clear_workspace = "Reset Workspace";
|
||||
Blockly.Msg.tooltip_share_blocks = "Share Blocks";
|
||||
Blockly.Msg.tooltip_show_code = "Show Code";
|
||||
Blockly.Msg.tooltip_hide_code = "Hide Code"
|
||||
|
||||
Blockly.Msg.tooltip_project_name = "Projectname"
|
||||
/**
|
||||
* Share Dialog
|
||||
*/
|
||||
|
||||
Blockly.Msg.sharedialog_headline = "Your Share-Link was created";
|
||||
Blockly.Msg.sharedialog_text = "Share your project with the following link";
|
||||
|
||||
/**
|
||||
* Project rename Dialog
|
||||
*/
|
||||
|
||||
Blockly.Msg.renamedialog_headline = "Rename Project";
|
||||
Blockly.Msg.renamedialog_text = "Please enter a name for the project and confirm it by clicking on 'Confirm'."
|
||||
|
||||
/**
|
||||
* Compile Dialog
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.compiledialog_headline = "Error"
|
||||
Blockly.Msg.compiledialog_text = "While compiling an error occured. Please check your blocks and try again"
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Buttons
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.button_cancel = "Cancel";
|
||||
Blockly.Msg.button_close = "Close";
|
||||
Blockly.Msg.button_accept = "Confirm";
|
||||
Blockly.Msg.button_compile = "Compile";
|
||||
Blockly.Msg.button_create_variableCreate = "Create Variable";
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
Blockly.Msg.filename = "Filename";
|
||||
Blockly.Msg.projectname = "Projectname";
|
||||
|
||||
/**
|
||||
* Settings
|
||||
*/
|
||||
Blockly.Msg.settings_head = "Settings"
|
||||
Blockly.Msg.settings_language = "Language"
|
||||
Blockly.Msg.settings_language_text = "Selection of the language applies to the entire application. A distinction can be made between German and English."
|
||||
Blockly.Msg.settings_language_de = "German"
|
||||
Blockly.Msg.settings_language_en = "English"
|
||||
Blockly.Msg.settings_renderer = "Renderer"
|
||||
Blockly.Msg.settings_renderer_text = "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application."
|
||||
Blockly.Msg.settings_statistics = "Statistics"
|
||||
Blockly.Msg.settings_statistics_text = "The display of statistics on the usage of the blocks above the workspace can be shown or hidden."
|
||||
Blockly.Msg.settings_statistics_on = "On"
|
||||
Blockly.Msg.settings_statistics_off = "Off"
|
||||
|
||||
|
||||
|
||||
|
||||
export const En = Blockly.Msg;
|
||||
|
||||
@ -38,7 +38,7 @@ class Toolbox extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<xml xmlns="https://developers.google.com/blockly/xml" id="blockly" style={{ display: 'none' }} ref={this.props.toolbox}>
|
||||
<Category name="Sensoren" colour={getColour().sensebox}>
|
||||
<Category name={Blockly.Msg.toolbox_sensors} colour={getColour().sensebox}>
|
||||
<Block type="sensebox_sensor_temp_hum" />
|
||||
<Block type="sensebox_sensor_uv_light" />
|
||||
<Block type="sensebox_sensor_bmx055_accelerometer" />
|
||||
@ -301,7 +301,7 @@ class Toolbox extends React.Component {
|
||||
<Block type="sensebox_mqtt_publish" />
|
||||
{/* <Block type="sensebox_mqtt_subscribe" /> */}
|
||||
</Category>
|
||||
<Category name="Logik" colour={getColour().logic}>
|
||||
<Category name={Blockly.Msg.toolbox_logic} colour={getColour().logic}>
|
||||
<Block type="controls_if" />
|
||||
<Block type="controls_ifelse" />
|
||||
<Block type="logic_compare" />
|
||||
@ -310,7 +310,7 @@ class Toolbox extends React.Component {
|
||||
<Block type="logic_boolean" />
|
||||
<Block type="switch_case" />
|
||||
</Category>
|
||||
<Category id="loops" name="Schleifen" colour={getColour().loops}>
|
||||
<Category id="loops" name={Blockly.Msg.toolbox_loops} colour={getColour().loops}>
|
||||
<Block type="controls_repeat_ext">
|
||||
<Value name="TIMES">
|
||||
<Block type="math_number">
|
||||
@ -349,7 +349,7 @@ class Toolbox extends React.Component {
|
||||
<Block type="text_length" />
|
||||
<Block type="text_isEmpty" />
|
||||
</Category>
|
||||
<Category id="time" name="Zeit" colour={getColour().time}>
|
||||
<Category id="time" name={Blockly.Msg.toolbox_time} colour={getColour().time}>
|
||||
<Block type="time_delay">
|
||||
<Value name="DELAY_TIME_MILI">
|
||||
<Block type="math_number">
|
||||
@ -369,7 +369,7 @@ class Toolbox extends React.Component {
|
||||
<Block type="infinite_loop"></Block>
|
||||
<Block type="sensebox_interval_timer"></Block>
|
||||
</Category>
|
||||
<Category id="catMath" name="Mathematik" colour={getColour().math}>
|
||||
<Category id="math" name={Blockly.Msg.toolbox_math} colour={getColour().math}>
|
||||
<Block type="math_number"></Block>
|
||||
<Block type="math_arithmetic"></Block>
|
||||
<Block type="math_single"></Block>
|
||||
@ -422,15 +422,15 @@ class Toolbox extends React.Component {
|
||||
</Block>
|
||||
<Block type="io_notone"></Block>
|
||||
</Category>
|
||||
<Category name="Variablen" colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
|
||||
<Category name={Blockly.Msg.toolbox_variables} colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
|
||||
<Category name="Arrays" colour={getColour().arrays} >
|
||||
<Block type="lists_create_empty" />
|
||||
<Block type="array_getIndex" />
|
||||
<Block type="lists_length" />
|
||||
</Category>
|
||||
<Category name="Functions" colour={getColour().procedures} custom="PROCEDURE"></Category>
|
||||
<Category name={Blockly.Msg.toolbox_functions} colour={getColour().procedures} custom="PROCEDURE"></Category>
|
||||
<sep></sep>
|
||||
<Category name="Eingang/Ausgang" colour={getColour().io}>
|
||||
<Category name={Blockly.Msg.toolbox_io} colour={getColour().io}>
|
||||
<Block type="io_digitalwrite"></Block>
|
||||
<Block type="io_digitalread"></Block>
|
||||
<Block type="io_builtin_led"></Block>
|
||||
|
||||
54
src/components/Content.js
Normal file
54
src/components/Content.js
Normal file
@ -0,0 +1,54 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import * as Blockly from 'blockly/core';
|
||||
import { De } from './Blockly/msg/de';
|
||||
import { En } from './Blockly/msg/en';
|
||||
|
||||
import Navbar from './Navbar';
|
||||
import Footer from './Footer';
|
||||
import Routes from './Route/Routes';
|
||||
import Cookies from './Cookies';
|
||||
|
||||
class Content extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.language === 'de_DE') {
|
||||
Blockly.setLocale(De);
|
||||
} else if (this.props.language === 'en_US') {
|
||||
Blockly.setLocale(En);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(props){
|
||||
if(props.language !== this.props.language){
|
||||
if (this.props.language === 'de_DE') {
|
||||
Blockly.setLocale(De);
|
||||
} else if (this.props.language === 'en_US') {
|
||||
Blockly.setLocale(En);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="wrapper">
|
||||
<Navbar />
|
||||
<Routes />
|
||||
<Cookies />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Content.propTypes = {
|
||||
language: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
language: state.general.language
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, null)(Content);
|
||||
@ -48,7 +48,6 @@ class Home extends Component {
|
||||
|
||||
state = {
|
||||
codeOn: false,
|
||||
stats: window.localStorage.getItem('stats'),
|
||||
snackbar: false,
|
||||
type: '',
|
||||
key: '',
|
||||
@ -91,7 +90,7 @@ class Home extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.state.stats ?
|
||||
{this.props.statistics ?
|
||||
<div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
|
||||
: null
|
||||
}
|
||||
@ -136,11 +135,13 @@ class Home extends Component {
|
||||
Home.propTypes = {
|
||||
clearStats: PropTypes.func.isRequired,
|
||||
workspaceName: PropTypes.func.isRequired,
|
||||
message: PropTypes.object.isRequired
|
||||
message: PropTypes.object.isRequired,
|
||||
statistics: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
message: state.message
|
||||
message: state.message,
|
||||
statistics: state.general.statistics
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import LinearProgress from '@material-ui/core/LinearProgress';
|
||||
|
||||
import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faIdCard, faEnvelope, faCog, faChalkboardTeacher, faFolderPlus, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
const styles = (theme) => ({
|
||||
@ -101,46 +101,46 @@ class Navbar extends Component {
|
||||
</div>
|
||||
<List>
|
||||
{[{ text: 'Tutorials', icon: faChalkboardTeacher, link: "/tutorial" },
|
||||
{ text: 'Tutorial-Builder', icon: faTools, link: "/tutorial/builder", restriction: this.props.user && this.props.user.blocklyRole !== 'user' && this.props.isAuthenticated},
|
||||
{ text: 'Galerie', icon: faLightbulb, link: "/gallery" },
|
||||
{ text: 'Projekte', icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => {
|
||||
if(item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0){
|
||||
return(
|
||||
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<ListItem button onClick={this.toggleDrawer}>
|
||||
<ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
|
||||
<ListItemText primary={item.text} />
|
||||
</ListItem>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
{ text: 'Tutorial-Builder', icon: faTools, link: "/tutorial/builder", restriction: this.props.user && this.props.user.blocklyRole !== 'user' && this.props.isAuthenticated },
|
||||
{ text: 'Galerie', icon: faLightbulb, link: "/gallery" },
|
||||
{ text: 'Projekte', icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => {
|
||||
if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) {
|
||||
return (
|
||||
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<ListItem button onClick={this.toggleDrawer}>
|
||||
<ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
|
||||
<ListItemText primary={item.text} />
|
||||
</ListItem>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
}
|
||||
)}
|
||||
</List>
|
||||
<Divider classes={{ root: this.props.classes.appBarColor }} style={{ marginTop: 'auto' }} />
|
||||
<List>
|
||||
{[{ text: 'Anmelden', icon: faSignInAlt, link: '/user/login', restriction: !this.props.isAuthenticated },
|
||||
{ text: 'Konto', icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated },
|
||||
{ text: 'MyBadges', icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated },
|
||||
{ text: 'Abmelden', icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated },
|
||||
{ text: 'Einstellungen', icon: faCog, link: "/settings" }].map((item, index) => {
|
||||
if(item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0){
|
||||
return(
|
||||
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<ListItem button onClick={item.function ? () => {item.function(); this.toggleDrawer();} : this.toggleDrawer}>
|
||||
<ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
|
||||
<ListItemText primary={item.text} />
|
||||
</ListItem>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
{ text: 'Konto', icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated },
|
||||
{ text: 'MyBadges', icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated },
|
||||
{ text: 'Abmelden', icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated },
|
||||
{ text: 'Einstellungen', icon: faCog, link: "/settings" }].map((item, index) => {
|
||||
if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) {
|
||||
return (
|
||||
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<ListItem button onClick={item.function ? () => { item.function(); this.toggleDrawer(); } : this.toggleDrawer}>
|
||||
<ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
|
||||
<ListItemText primary={item.text} />
|
||||
</ListItem>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
}
|
||||
)}
|
||||
</List>
|
||||
</Drawer>
|
||||
{this.props.tutorialIsLoading || this.props.projectIsLoading ?
|
||||
<LinearProgress style={{marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)'}}/>
|
||||
: null}
|
||||
<LinearProgress style={{ marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)' }} />
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,31 +6,39 @@ import { withRouter } from 'react-router-dom';
|
||||
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import * as Blockly from 'blockly'
|
||||
|
||||
class NotFound extends Component {
|
||||
|
||||
componentDidMount(){
|
||||
// Ensure that Blockly.setLocale is adopted in the component.
|
||||
// Otherwise, the text will not be displayed until the next update of the component.
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs content={[{link: this.props.location.pathname, title: 'Error'}]}/>
|
||||
<Typography variant='h4' style={{marginBottom: '5px'}}>Die von Ihnen angeforderte Seite kann nicht gefunden werden.</Typography>
|
||||
<Typography variant='body1'>Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.</Typography>
|
||||
<Breadcrumbs content={[{ link: this.props.location.pathname, title: 'Error' }]} />
|
||||
<Typography variant='h4' style={{ marginBottom: '5px' }}>{Blockly.Msg.notfound_head}</Typography>
|
||||
<Typography variant='body1'>{Blockly.Msg.notfound_text}</Typography>
|
||||
{this.props.button ?
|
||||
<Button
|
||||
style={{marginTop: '20px'}}
|
||||
style={{ marginTop: '20px' }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => {this.props.history.push(this.props.button.link)}}
|
||||
onClick={() => { this.props.history.push(this.props.button.link) }}
|
||||
>
|
||||
{this.props.button.title}
|
||||
</Button>
|
||||
:
|
||||
:
|
||||
<Button
|
||||
style={{marginTop: '20px'}}
|
||||
style={{ marginTop: '20px' }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => {this.props.history.push('/')}}
|
||||
onClick={() => { this.props.history.push('/') }}
|
||||
>
|
||||
Zurück zur Startseite
|
||||
{Blockly.Msg.button_back}
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,6 @@ import { getProject, resetProject } from '../../actions/projectActions';
|
||||
import { clearMessages, returnErrors } from '../../actions/messageActions';
|
||||
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { createNameId } from 'mnemonic-id';
|
||||
|
||||
import Home from '../Home';
|
||||
import Breadcrumbs from '../Breadcrumbs';
|
||||
@ -23,16 +22,16 @@ class Project extends Component {
|
||||
}
|
||||
|
||||
componentDidUpdate(props) {
|
||||
if(props.location.pathname !== this.props.location.pathname ||
|
||||
props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]){
|
||||
if(this.props.message.msg){
|
||||
if (props.location.pathname !== this.props.location.pathname ||
|
||||
props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]) {
|
||||
if (this.props.message.msg) {
|
||||
this.props.clearMessages();
|
||||
}
|
||||
this.getProject();
|
||||
}
|
||||
if(this.props.message !== props.message){
|
||||
if(this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL'){
|
||||
if(this.props.type!=='share'){
|
||||
if (this.props.message !== props.message) {
|
||||
if (this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL') {
|
||||
if (this.props.type !== 'share') {
|
||||
this.props.returnErrors('', 404, 'GET_PROJECT_FAIL');
|
||||
this.props.history.push(`/${this.props.type}`);
|
||||
} else {
|
||||
@ -40,10 +39,10 @@ class Project extends Component {
|
||||
this.props.returnErrors('', 404, 'GET_SHARE_FAIL');
|
||||
}
|
||||
}
|
||||
else if(this.props.message.id === 'GET_PROJECT_SUCCESS'){
|
||||
else if (this.props.message.id === 'GET_PROJECT_SUCCESS') {
|
||||
this.props.workspaceName(this.props.project.title);
|
||||
}
|
||||
else if(this.props.message.id === 'PROJECT_DELETE_SUCCESS' || this.props.message.id === 'GALLERY_DELETE_SUCCESS'){
|
||||
else if (this.props.message.id === 'PROJECT_DELETE_SUCCESS' || this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
|
||||
this.props.history.push(`/${this.props.type}`);
|
||||
}
|
||||
}
|
||||
@ -55,8 +54,8 @@ class Project extends Component {
|
||||
}
|
||||
|
||||
getProject = () => {
|
||||
var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//,'');
|
||||
var param = this.props.location.pathname.replace(`/${id}`,'').replace('/','');
|
||||
var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//, '');
|
||||
var param = this.props.location.pathname.replace(`/${id}`, '').replace('/', '');
|
||||
console.log('param', param);
|
||||
console.log(id);
|
||||
this.props.getProject(param, id);
|
||||
@ -69,13 +68,13 @@ class Project extends Component {
|
||||
<Backdrop open invisible>
|
||||
<CircularProgress color="primary" />
|
||||
</Backdrop>
|
||||
: this.props.project ?
|
||||
<div>
|
||||
{this.props.type !== 'share' ?
|
||||
<Breadcrumbs content={[{ link: `/${this.props.type}`, title: data },{ link: this.props.location.pathname, title: this.props.project.title }]} />
|
||||
: null}
|
||||
<Home project={this.props.project} projectType={this.props.type}/>
|
||||
</div> : null
|
||||
: this.props.project ?
|
||||
<div>
|
||||
{this.props.type !== 'share' ?
|
||||
<Breadcrumbs content={[{ link: `/${this.props.type}`, title: data }, { link: this.props.location.pathname, title: this.props.project.title }]} />
|
||||
: null}
|
||||
<Home project={this.props.project} projectType={this.props.type} />
|
||||
</div> : null
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -41,31 +41,31 @@ class ProjectHome extends Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
var type = this.props.location.pathname.replace('/','');
|
||||
var type = this.props.location.pathname.replace('/', '');
|
||||
this.props.getProjects(type);
|
||||
if(this.props.message){
|
||||
if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
|
||||
if (this.props.message) {
|
||||
if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
|
||||
}
|
||||
else if(this.props.message.id === 'GALLERY_DELETE_SUCCESS'){
|
||||
else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
|
||||
}
|
||||
else if(this.props.message.id === 'GET_PROJECT_FAIL'){
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-':''}Projekt konnte nicht gefunden werden.`, type: 'error' });
|
||||
else if (this.props.message.id === 'GET_PROJECT_FAIL') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-' : ''}Projekt konnte nicht gefunden werden.`, type: 'error' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(props) {
|
||||
if(props.location.pathname !== this.props.location.pathname){
|
||||
this.setState({snackbar: false});
|
||||
this.props.getProjects(this.props.location.pathname.replace('/',''));
|
||||
if (props.location.pathname !== this.props.location.pathname) {
|
||||
this.setState({ snackbar: false });
|
||||
this.props.getProjects(this.props.location.pathname.replace('/', ''));
|
||||
}
|
||||
if(props.message !== this.props.message){
|
||||
if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
|
||||
if (props.message !== this.props.message) {
|
||||
if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
|
||||
}
|
||||
else if(this.props.message.id === 'GALLERY_DELETE_SUCCESS'){
|
||||
else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
|
||||
}
|
||||
}
|
||||
@ -87,7 +87,7 @@ class ProjectHome extends Component {
|
||||
<Backdrop open invisible>
|
||||
<CircularProgress color="primary" />
|
||||
</Backdrop>
|
||||
:
|
||||
:
|
||||
<div>
|
||||
{this.props.projects.length > 0 ?
|
||||
<Grid container spacing={2}>
|
||||
@ -96,37 +96,37 @@ class ProjectHome extends Component {
|
||||
<Grid item xs={12} sm={6} md={4} xl={3} key={i}>
|
||||
<Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
|
||||
<Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
<h3 style={{marginTop: 0}}>{project.title}</h3>
|
||||
<Divider style={{marginTop: '1rem', marginBottom: '10px'}}/>
|
||||
<h3 style={{ marginTop: 0 }}>{project.title}</h3>
|
||||
<Divider style={{ marginTop: '1rem', marginBottom: '10px' }} />
|
||||
<BlocklyWindow
|
||||
svg
|
||||
blockDisabled
|
||||
initialXml={project.xml}
|
||||
/>
|
||||
<Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-10px'}}>{project.description}</Typography>
|
||||
<Typography variant='body2' style={{ fontStyle: 'italic', margin: 0, marginTop: '-10px' }}>{project.description}</Typography>
|
||||
</Link>
|
||||
{this.props.user && this.props.user.email === project.creator ?
|
||||
<div>
|
||||
<Divider style={{marginTop: '10px', marginBottom: '10px'}}/>
|
||||
<div style={{float: 'right'}}>
|
||||
<Divider style={{ marginTop: '10px', marginBottom: '10px' }} />
|
||||
<div style={{ float: 'right' }}>
|
||||
<WorkspaceFunc
|
||||
multiple
|
||||
project={project}
|
||||
projectType={this.props.location.pathname.replace('/','')}
|
||||
projectType={this.props.location.pathname.replace('/', '')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
: null}
|
||||
: null}
|
||||
</Paper>
|
||||
</Grid>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
: <div>
|
||||
<Typography style={{marginBottom: '10px'}}>Es sind aktuell keine Projekte vorhanden.</Typography>
|
||||
{this.props.location.pathname.replace('/','') === 'project' ?
|
||||
: <div>
|
||||
<Typography style={{ marginBottom: '10px' }}>Es sind aktuell keine Projekte vorhanden.</Typography>
|
||||
{this.props.location.pathname.replace('/', '') === 'project' ?
|
||||
<Typography>Erstelle jetzt dein <Link to={'/'} className={this.props.classes.link}>eigenes Projekt</Link> oder lasse dich von Projektbeispielen in der <Link to={'/gallery'} className={this.props.classes.link}>Galerie</Link> inspirieren.</Typography>
|
||||
: null}
|
||||
: null}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -1,43 +1,58 @@
|
||||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { setLanguage } from '../../actions/generalActions';
|
||||
|
||||
import * as Blockly from 'blockly/core';
|
||||
|
||||
import InputLabel from '@material-ui/core/InputLabel';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
import Select from '@material-ui/core/Select';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
formControl: {
|
||||
margin: theme.spacing(1),
|
||||
minWidth: 120,
|
||||
},
|
||||
selectEmpty: {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
}));
|
||||
class LanguageSelector extends Component {
|
||||
|
||||
export default function LanguageSelector() {
|
||||
const classes = useStyles();
|
||||
const [lang, setLang] = React.useState(window.localStorage.getItem('locale'));
|
||||
componentDidMount(){
|
||||
// Ensure that Blockly.setLocale is adopted in the component.
|
||||
// Otherwise, the text will not be displayed until the next update of the component.
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
setLang(event.target.value);
|
||||
window.localStorage.setItem('locale', event.target.value);
|
||||
};
|
||||
handleChange = (event) => {
|
||||
this.props.setLanguage(event.target.value);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FormControl className={classes.formControl}>
|
||||
<InputLabel id="demo-simple-select-label">Sprache</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={lang}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value={'de'}>Deutsch</MenuItem>
|
||||
<MenuItem value={'en'}>English</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography>
|
||||
<FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_language_text}</FormHelperText>
|
||||
<FormControl>
|
||||
<InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={this.props.language}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
<MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem>
|
||||
<MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
LanguageSelector.propTypes = {
|
||||
setLanguage: PropTypes.func.isRequired,
|
||||
language: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
language: state.general.language
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { setLanguage })(LanguageSelector);
|
||||
|
||||
@ -1,45 +1,57 @@
|
||||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { setRenderer } from '../../actions/generalActions';
|
||||
|
||||
import * as Blockly from 'blockly/core'
|
||||
|
||||
import InputLabel from '@material-ui/core/InputLabel';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
import Select from '@material-ui/core/Select';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
formControl: {
|
||||
margin: theme.spacing(1),
|
||||
minWidth: 400,
|
||||
},
|
||||
selectEmpty: {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
}));
|
||||
|
||||
export default function RenderSelector() {
|
||||
const classes = useStyles();
|
||||
const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
|
||||
class RenderSelector extends Component {
|
||||
|
||||
const handleChange = (event) => {
|
||||
setRenderer(event.target.value);
|
||||
window.localStorage.setItem('renderer', event.target.value);
|
||||
};
|
||||
componentDidMount(){
|
||||
// Ensure that Blockly.setLocale is adopted in the component.
|
||||
// Otherwise, the text will not be displayed until the next update of the component.
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<FormControl className={classes.formControl}>
|
||||
<InputLabel id="demo-simple-select-label">Renderer</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={renderer}
|
||||
onChange={handleChange}
|
||||
|
||||
>
|
||||
<MenuItem value={'geras'}>Geras</MenuItem>
|
||||
<MenuItem value={'zelos'}>Zelos</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<p>Der Renderer bestimmt das aussehen der Blöcke</p>
|
||||
</div>
|
||||
<div>
|
||||
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_renderer}</Typography>
|
||||
<FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_renderer_text}</FormHelperText>
|
||||
<FormControl>
|
||||
<InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_renderer}</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={this.props.renderer}
|
||||
onChange={(e) => this.props.setRenderer(e.target.value)}
|
||||
>
|
||||
<MenuItem value={'geras'}>Geras</MenuItem>
|
||||
<MenuItem value={'zelos'}>Zelos</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
RenderSelector.propTypes = {
|
||||
setRenderer: PropTypes.func.isRequired,
|
||||
language: PropTypes.string.isRequired,
|
||||
renderer: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
renderer: state.general.renderer,
|
||||
language: state.general.language
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { setRenderer })(RenderSelector);
|
||||
|
||||
@ -1,32 +1,65 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import * as Blockly from 'blockly/core';
|
||||
|
||||
import Breadcrumbs from '../Breadcrumbs';
|
||||
import LanguageSelector from './LanguageSelector';
|
||||
import RenderSelector from './RenderSelector';
|
||||
import StatsSelector from './StatsSelector';
|
||||
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
|
||||
class Settings extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
|
||||
<LanguageSelector />
|
||||
<RenderSelector />
|
||||
<StatsSelector />
|
||||
<Button
|
||||
style={{ marginTop: '20px' }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => { this.props.history.push('/') }}
|
||||
>
|
||||
Zurück zur Startseite
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount(){
|
||||
// Ensure that Blockly.setLocale is adopted in the component.
|
||||
// Otherwise, the text will not be displayed until the next update of the component.
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs content={[{ link: this.props.location.pathname, title: Blockly.Msg.settings_head }]} />
|
||||
|
||||
<h1>{Blockly.Msg.settings_head}</h1>
|
||||
|
||||
<Paper style={{margin: '10px 0px', padding: '10px'}}>
|
||||
<LanguageSelector />
|
||||
</Paper>
|
||||
<Paper style={{margin: '10px 0px', padding: '10px'}}>
|
||||
<RenderSelector />
|
||||
</Paper>
|
||||
<Paper style={{margin: '10px 0px', padding: '10px'}}>
|
||||
<StatsSelector />
|
||||
</Paper>
|
||||
|
||||
<Button
|
||||
style={{ marginTop: '10px' }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={this.props.pageVisits > 0 ? () => this.props.history.goBack() : () => this.props.history.push('/')}
|
||||
>
|
||||
{Blockly.Msg.button_back}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default withRouter(Settings);
|
||||
Settings.propTypes = {
|
||||
language: PropTypes.string.isRequired,
|
||||
pageVisits: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
language: state.general.language,
|
||||
pageVisits: state.general.pageVisits
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, null)(withRouter(Settings));
|
||||
|
||||
@ -1,44 +1,56 @@
|
||||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { setStatistics } from '../../actions/generalActions';
|
||||
|
||||
import * as Blockly from 'blockly/core'
|
||||
|
||||
import InputLabel from '@material-ui/core/InputLabel';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
import Select from '@material-ui/core/Select';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
formControl: {
|
||||
margin: theme.spacing(1),
|
||||
minWidth: 400,
|
||||
},
|
||||
selectEmpty: {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
}));
|
||||
class StatsSelector extends Component {
|
||||
|
||||
export default function StatsSelector() {
|
||||
const classes = useStyles();
|
||||
const [stats, setStats] = React.useState(window.localStorage.getItem('stats'));
|
||||
|
||||
const handleChange = (event) => {
|
||||
setStats(event.target.value);
|
||||
window.localStorage.setItem('stats', event.target.value);
|
||||
};
|
||||
componentDidMount(){
|
||||
// Ensure that Blockly.setLocale is adopted in the component.
|
||||
// Otherwise, the text will not be displayed until the next update of the component.
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<FormControl className={classes.formControl}>
|
||||
<InputLabel id="demo-simple-select-label">Statistiken</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={stats}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value={true}>On</MenuItem>
|
||||
<MenuItem value={false}>Off</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<p>Schaltet die Statistiken Oberhalb der Arbeitsfläche ein bzw. aus</p>
|
||||
</div>
|
||||
<div>
|
||||
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_statistics}</Typography>
|
||||
<FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_statistics_text}</FormHelperText>
|
||||
<FormControl>
|
||||
<InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_statistics}</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={this.props.statistics}
|
||||
onChange={(e) => this.props.setStatistics(e.target.value)}
|
||||
>
|
||||
<MenuItem value={true}>{Blockly.Msg.settings_statistics_on}</MenuItem>
|
||||
<MenuItem value={false}>{Blockly.Msg.settings_statistics_off}</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
StatsSelector.propTypes = {
|
||||
setStatistics: PropTypes.func.isRequired,
|
||||
language: PropTypes.string.isRequired,
|
||||
statistics: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
statistics: state.general.statistics,
|
||||
language: state.general.language
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { setStatistics })(StatsSelector);
|
||||
|
||||
@ -11,6 +11,7 @@ import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import * as Blockly from 'blockly'
|
||||
|
||||
class Assessment extends Component {
|
||||
|
||||
@ -45,7 +46,7 @@ class Assessment extends Component {
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
|
||||
<Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
|
||||
<Typography variant='h5'>Arbeitsauftrag</Typography>
|
||||
<Typography variant='h5'>{Blockly.Msg.tutorials_assessment_task}</Typography>
|
||||
<Typography>{currentTask.text}</Typography>
|
||||
</Card>
|
||||
<div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
|
||||
|
||||
@ -11,6 +11,7 @@ import { withStyles } from '@material-ui/core/styles';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Avatar from '@material-ui/core/Avatar';
|
||||
import * as Blockly from 'blockly';
|
||||
|
||||
const styles = (theme) => ({
|
||||
link: {
|
||||
@ -32,22 +33,22 @@ class Badge extends Component {
|
||||
content: ''
|
||||
};
|
||||
|
||||
componentDidUpdate(props){
|
||||
if(this.props.message.id === 'TUTORIAL_CHECK_SUCCESS'){
|
||||
if(this.props.tutorial.badge){
|
||||
componentDidUpdate(props) {
|
||||
if (this.props.message.id === 'TUTORIAL_CHECK_SUCCESS') {
|
||||
if (this.props.tutorial.badge) {
|
||||
// is connected to MyBadges?
|
||||
if(this.props.isAuthenticated && this.props.user && this.props.user.badge){
|
||||
if(this.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)){
|
||||
if(this.isSuccess()){
|
||||
if (this.props.isAuthenticated && this.props.user && this.props.user.badge) {
|
||||
if (this.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)) {
|
||||
if (this.isSuccess()) {
|
||||
this.props.assigneBadge(this.props.tutorial.badge);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(props.message !== this.props.message){
|
||||
if(this.props.message.id === 'ASSIGNE_BADGE_SUCCESS'){
|
||||
this.setState({title: `Badge: ${this.props.message.msg.name}`, content: `Herzlichen Glückwunsch! Du hast den Badge ${this.props.message.msg.name} erhalten.`, open: true});
|
||||
if (props.message !== this.props.message) {
|
||||
if (this.props.message.id === 'ASSIGNE_BADGE_SUCCESS') {
|
||||
this.setState({ title: `Badge: ${this.props.message.msg.name}`, content: `${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01} ${this.props.message.msg.name} ${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02}`, open: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -57,7 +58,7 @@ class Badge extends Component {
|
||||
var status = this.props.status.filter(status => status._id === tutorialId)[0];
|
||||
var tasks = status.tasks;
|
||||
var success = tasks.filter(task => task.type === 'success').length / tasks.length;
|
||||
if(success===1){
|
||||
if (success === 1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@ -74,21 +75,21 @@ class Badge extends Component {
|
||||
open={this.state.open}
|
||||
title={this.state.title}
|
||||
content={this.state.content}
|
||||
onClose={() => {this.toggleDialog();}}
|
||||
onClick={() => {this.toggleDialog();}}
|
||||
button={'Schließen'}
|
||||
onClose={() => { this.toggleDialog(); }}
|
||||
onClick={() => { this.toggleDialog(); }}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<Paper style={{textAlign: 'center'}}>
|
||||
<Paper style={{ textAlign: 'center' }}>
|
||||
{this.props.message.msg.image && this.props.message.msg.image.path ?
|
||||
<Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${this.props.message.msg.image.path}`} style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}/>
|
||||
: <Avatar style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}></Avatar>}
|
||||
<Typography variant='h6' style={{display: 'flex', cursor: 'default', paddingBottom: '6px'}}>
|
||||
<div style={{flexGrow:1, marginLeft: '10px', marginRight: '10px'}}>{this.props.message.msg.name}</div>
|
||||
<Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${this.props.message.msg.image.path}`} style={{ width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto' }} />
|
||||
: <Avatar style={{ width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto' }}></Avatar>}
|
||||
<Typography variant='h6' style={{ display: 'flex', cursor: 'default', paddingBottom: '6px' }}>
|
||||
<div style={{ flexGrow: 1, marginLeft: '10px', marginRight: '10px' }}>{this.props.message.msg.name}</div>
|
||||
</Typography>
|
||||
</Paper>
|
||||
<Typography style={{marginTop: '10px'}}>
|
||||
Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du <Link to={'/user/badge'} className={this.props.classes.link}>hier</Link>.
|
||||
<Typography style={{ marginTop: '10px' }}>
|
||||
{Blockly.Msg.badges_explaination}<Link to={'/user/badge'} className={this.props.classes.link}>{Blockly.Msg.labels_here}</Link>.
|
||||
</Typography>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
@ -29,7 +29,7 @@ const styles = (theme) => ({
|
||||
marginTop: '5px',
|
||||
height: '40px',
|
||||
backgroundColor: theme.palette.error.dark,
|
||||
'&:hover':{
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.error.dark
|
||||
}
|
||||
}
|
||||
@ -37,16 +37,16 @@ const styles = (theme) => ({
|
||||
|
||||
class BlocklyExample extends Component {
|
||||
|
||||
constructor(props){
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
this.state = {
|
||||
checked: props.task ? props.task : props.value ? true : false,
|
||||
input: null,
|
||||
disabled: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
componentDidMount() {
|
||||
moment.updateLocale('de', localization);
|
||||
this.isError();
|
||||
// if(this.props.task){
|
||||
@ -54,42 +54,42 @@ class BlocklyExample extends Component {
|
||||
// }
|
||||
}
|
||||
|
||||
componentDidUpdate(props, state){
|
||||
if(props.task !== this.props.task || props.value !== this.props.value){
|
||||
this.setState({checked: this.props.task ? this.props.task : this.props.value ? true : false},
|
||||
componentDidUpdate(props, state) {
|
||||
if (props.task !== this.props.task || props.value !== this.props.value) {
|
||||
this.setState({ checked: this.props.task ? this.props.task : this.props.value ? true : false },
|
||||
() => this.isError()
|
||||
);
|
||||
}
|
||||
if(state.checked !== this.state.checked && this.state.checked){
|
||||
if (state.checked !== this.state.checked && this.state.checked) {
|
||||
this.isError();
|
||||
}
|
||||
if(props.xml !== this.props.xml){
|
||||
if (props.xml !== this.props.xml) {
|
||||
// check if there is at least one block, otherwise the workspace cannot be submitted
|
||||
var workspace = Blockly.getMainWorkspace();
|
||||
var areBlocks = workspace.getAllBlocks().length > 0;
|
||||
this.setState({disabled: !areBlocks});
|
||||
this.setState({ disabled: !areBlocks });
|
||||
}
|
||||
}
|
||||
|
||||
isError = () => {
|
||||
if(this.state.checked){
|
||||
if (this.state.checked) {
|
||||
var xml = this.props.value;
|
||||
// check if value is valid xml;
|
||||
try{
|
||||
try {
|
||||
Blockly.Xml.textToDom(xml);
|
||||
this.props.deleteError(this.props.index, 'xml');
|
||||
}
|
||||
catch(err){
|
||||
catch (err) {
|
||||
xml = initialXml;
|
||||
// not valid xml, throw error in redux store
|
||||
this.props.setError(this.props.index, 'xml');
|
||||
}
|
||||
if(!this.props.task){
|
||||
if (!this.props.task) {
|
||||
// instruction can also display only one block, which does not necessarily
|
||||
// have to be the initial block
|
||||
xml = xml.replace('deletable="false"', 'deletable="true"');
|
||||
}
|
||||
this.setState({xml: xml});
|
||||
this.setState({ xml: xml });
|
||||
}
|
||||
else {
|
||||
this.props.deleteError(this.props.index, 'xml');
|
||||
@ -98,8 +98,8 @@ class BlocklyExample extends Component {
|
||||
|
||||
onChange = (value) => {
|
||||
var oldValue = this.state.checked;
|
||||
this.setState({checked: value});
|
||||
if(oldValue !== value && !value){
|
||||
this.setState({ checked: value });
|
||||
if (oldValue !== value && !value) {
|
||||
this.props.deleteError(this.props.index, 'xml');
|
||||
this.props.deleteProperty(this.props.index, 'xml');
|
||||
}
|
||||
@ -108,12 +108,12 @@ class BlocklyExample extends Component {
|
||||
setXml = () => {
|
||||
var xml = this.props.xml;
|
||||
this.props.changeContent(xml, this.props.index, 'xml');
|
||||
this.setState({input: moment(Date.now()).format('LTS')});
|
||||
this.setState({ input: moment(Date.now()).format('LTS') });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
|
||||
<div style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
|
||||
{!this.props.task ?
|
||||
<FormControlLabel
|
||||
labelPlacement="end"
|
||||
@ -126,41 +126,42 @@ class BlocklyExample extends Component {
|
||||
/>
|
||||
}
|
||||
/>
|
||||
: <FormLabel style={{color: 'black'}}>Musterlösung</FormLabel>}
|
||||
: <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_solution}</FormLabel>}
|
||||
{this.state.checked ? !this.props.value || this.props.error ?
|
||||
<FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}'-Button klickst.`}</FormHelperText>
|
||||
: this.state.input ? <FormHelperText style={{lineHeight: 'initial'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
|
||||
: null}
|
||||
<FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}'-Button klickst.`}</FormHelperText>
|
||||
: this.state.input ? <FormHelperText style={{ lineHeight: 'initial' }}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
|
||||
: null}
|
||||
{this.state.checked && !this.props.task ?
|
||||
<FormHelperText style={{lineHeight: 'initial'}}>Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.</FormHelperText>
|
||||
: null}
|
||||
<FormHelperText style={{ lineHeight: 'initial' }}>{Blockly.Msg.builder_comment}</FormHelperText>
|
||||
: null}
|
||||
{/* ensure that the correct xml-file is displayed in the workspace */}
|
||||
{this.state.checked && this.state.xml? (() => {
|
||||
return(
|
||||
<div style={{marginTop: '10px'}}>
|
||||
{this.state.checked && this.state.xml ? (() => {
|
||||
return (
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
|
||||
<Grid item xs={12}>
|
||||
<BlocklyWindow
|
||||
blockDisabled={this.props.task}
|
||||
trashcan={false}
|
||||
initialXml={this.state.xml}
|
||||
blocklyCSS={{height: '500px'}}
|
||||
blocklyCSS={{ height: '500px' }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
className={!this.props.value || this.props.error ? this.props.classes.errorButton : null }
|
||||
style={{marginTop: '5px', height: '40px'}}
|
||||
className={!this.props.value || this.props.error ? this.props.classes.errorButton : null}
|
||||
style={{ marginTop: '5px', height: '40px' }}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
disabled={this.state.disabled}
|
||||
onClick={() => this.setXml()}
|
||||
>
|
||||
{this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}
|
||||
{this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}
|
||||
</Button>
|
||||
</div>
|
||||
)})()
|
||||
: null}
|
||||
)
|
||||
})()
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -179,4 +180,4 @@ const mapStateToProps = state => ({
|
||||
});
|
||||
|
||||
|
||||
export default connect(mapStateToProps, { changeContent, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(BlocklyExample));
|
||||
export default connect(mapStateToProps, { changeContent, deleteProperty, setError, deleteError })(withStyles(styles, { withTheme: true })(BlocklyExample));
|
||||
|
||||
@ -8,8 +8,6 @@ import { clearMessages } from '../../../actions/messageActions';
|
||||
import axios from 'axios';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import { saveAs } from 'file-saver';
|
||||
import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace';
|
||||
|
||||
import Breadcrumbs from '../../Breadcrumbs';
|
||||
import Badge from './Badge';
|
||||
@ -44,7 +42,7 @@ const styles = (theme) => ({
|
||||
marginTop: '5px',
|
||||
height: '40px',
|
||||
backgroundColor: theme.palette.error.dark,
|
||||
'&:hover':{
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.error.dark
|
||||
}
|
||||
}
|
||||
@ -87,11 +85,11 @@ class Builder extends Component {
|
||||
// alert(this.props.message.msg);
|
||||
this.props.clearMessages();
|
||||
}
|
||||
else if(this.props.message.id === 'TUTORIAL_DELETE_SUCCESS'){
|
||||
else if (this.props.message.id === 'TUTORIAL_DELETE_SUCCESS') {
|
||||
this.onChange('new');
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich gelöscht.`, type: 'success' });
|
||||
}
|
||||
else if(this.props.message.id === 'TUTORIAL_DELETE_FAIL'){
|
||||
else if (this.props.message.id === 'TUTORIAL_DELETE_FAIL') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`, type: 'error' });
|
||||
}
|
||||
}
|
||||
@ -100,7 +98,7 @@ class Builder extends Component {
|
||||
componentWillUnmount() {
|
||||
this.resetFull();
|
||||
this.props.resetTutorial();
|
||||
if(this.props.message.msg){
|
||||
if (this.props.message.msg) {
|
||||
this.props.clearMessages();
|
||||
}
|
||||
}
|
||||
@ -153,12 +151,12 @@ class Builder extends Component {
|
||||
onChange = (value) => {
|
||||
this.props.resetTutorialBuilder();
|
||||
this.props.tutorialId('');
|
||||
this.setState({tutorial: value});
|
||||
this.setState({ tutorial: value });
|
||||
}
|
||||
|
||||
onChangeId = (value) => {
|
||||
this.props.tutorialId(value);
|
||||
if(this.state.tutorial === 'change'){
|
||||
if (this.state.tutorial === 'change') {
|
||||
this.props.progress(true);
|
||||
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0];
|
||||
this.props.readJSON(tutorial);
|
||||
@ -201,8 +199,8 @@ class Builder extends Component {
|
||||
newTutorial.append(`steps[${i}][type]`, step.type);
|
||||
newTutorial.append(`steps[${i}][headline]`, step.headline);
|
||||
newTutorial.append(`steps[${i}][text]`, step.text);
|
||||
if(i === 0 && step.type === 'instruction'){
|
||||
if(step.requirements){ // optional
|
||||
if (i === 0 && step.type === 'instruction') {
|
||||
if (step.requirements) { // optional
|
||||
step.requirements.forEach((requirement, j) => {
|
||||
newTutorial.append(`steps[${i}][requirements][${j}]`, requirement);
|
||||
});
|
||||
@ -211,14 +209,14 @@ class Builder extends Component {
|
||||
newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
|
||||
});
|
||||
}
|
||||
if(step.xml){ // optional
|
||||
if (step.xml) { // optional
|
||||
newTutorial.append(`steps[${i}][xml]`, step.xml);
|
||||
}
|
||||
if(step.media){ // optional
|
||||
if(step.media.youtube){
|
||||
if (step.media) { // optional
|
||||
if (step.media.youtube) {
|
||||
newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube);
|
||||
}
|
||||
if(step.media.picture){
|
||||
if (step.media.picture) {
|
||||
newTutorial.append(`steps[${i}][media][picture]`, step.media.picture);
|
||||
}
|
||||
}
|
||||
@ -282,30 +280,30 @@ class Builder extends Component {
|
||||
<h1>Tutorial-Builder</h1>
|
||||
|
||||
<RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}>
|
||||
<FormControlLabel style={{color: 'black'}}
|
||||
<FormControlLabel style={{ color: 'black' }}
|
||||
value="new"
|
||||
control={<Radio color="primary" />}
|
||||
label="neues Tutorial erstellen"
|
||||
labelPlacement="end"
|
||||
/>
|
||||
{filteredTutorials.length > 0 ?
|
||||
<div>
|
||||
<FormControlLabel style={{color: 'black'}}
|
||||
disabled={this.props.index === 0}
|
||||
value="change"
|
||||
control={<Radio color="primary" />}
|
||||
label="bestehendes Tutorial ändern"
|
||||
labelPlacement="end"
|
||||
/>
|
||||
<FormControlLabel style={{color: 'black'}}
|
||||
disabled={this.props.index === 0}
|
||||
value="delete"
|
||||
control={<Radio color="primary" />}
|
||||
label="bestehendes Tutorial löschen"
|
||||
labelPlacement="end"
|
||||
/>
|
||||
</div>
|
||||
: null}
|
||||
<div>
|
||||
<FormControlLabel style={{ color: 'black' }}
|
||||
disabled={this.props.index === 0}
|
||||
value="change"
|
||||
control={<Radio color="primary" />}
|
||||
label="bestehendes Tutorial ändern"
|
||||
labelPlacement="end"
|
||||
/>
|
||||
<FormControlLabel style={{ color: 'black' }}
|
||||
disabled={this.props.index === 0}
|
||||
value="delete"
|
||||
control={<Radio color="primary" />}
|
||||
label="bestehendes Tutorial löschen"
|
||||
labelPlacement="end"
|
||||
/>
|
||||
</div>
|
||||
: null}
|
||||
</RadioGroup>
|
||||
|
||||
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />
|
||||
@ -325,7 +323,7 @@ class Builder extends Component {
|
||||
</label>
|
||||
<Button style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button>
|
||||
</div>
|
||||
: <FormControl variant="outlined" style={{width: '100%'}}>
|
||||
: <FormControl variant="outlined" style={{ width: '100%' }}>
|
||||
<InputLabel id="select-outlined-label">Tutorial</InputLabel>
|
||||
<Select
|
||||
color='primary'
|
||||
@ -357,24 +355,11 @@ class Builder extends Component {
|
||||
<Step step={step} index={i} key={i} />
|
||||
)}
|
||||
|
||||
{/*submit or reset*/}
|
||||
<Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} />
|
||||
{this.state.tutorial === 'new' ?
|
||||
<div>
|
||||
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button>
|
||||
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button>
|
||||
</div>
|
||||
: <div>
|
||||
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button>
|
||||
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button>
|
||||
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
|
||||
<CircularProgress color="inherit" />
|
||||
</Backdrop>
|
||||
</div>
|
||||
}
|
||||
|
||||
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
|
||||
<CircularProgress color="inherit" />
|
||||
</Backdrop>
|
||||
</div>
|
||||
: null}
|
||||
: null}
|
||||
|
||||
{this.state.tutorial === 'delete' && this.props.id !== '' ?
|
||||
<Button
|
||||
@ -382,7 +367,7 @@ class Builder extends Component {
|
||||
variant='contained'
|
||||
color='primary'
|
||||
onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button>
|
||||
: null}
|
||||
: null}
|
||||
|
||||
<Dialog
|
||||
open={this.state.open}
|
||||
|
||||
@ -12,6 +12,8 @@ import GridListTile from '@material-ui/core/GridListTile';
|
||||
import GridListTileBar from '@material-ui/core/GridListTileBar';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
import FormLabel from '@material-ui/core/FormLabel';
|
||||
import * as Blockly from 'blockly'
|
||||
|
||||
|
||||
const styles = theme => ({
|
||||
multiGridListTile: {
|
||||
@ -67,8 +69,8 @@ class Requirements extends Component {
|
||||
return (
|
||||
<div style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
|
||||
<FormLabel style={{ color: 'black' }}>Hardware</FormLabel>
|
||||
<FormHelperText style={this.props.error ? { lineHeight: 'initial', marginTop: '5px' } : { marginTop: '5px', lineHeight: 'initial', marginBottom: '10px' }}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
|
||||
{this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware-Komponente aus.</FormHelperText> : null}
|
||||
<FormHelperText style={this.props.error ? { lineHeight: 'initial', marginTop: '5px' } : { marginTop: '5px', lineHeight: 'initial', marginBottom: '10px' }}>{Blockly.Msg.builder_hardware_order}</FormHelperText>
|
||||
{this.props.error ? <FormHelperText className={this.props.classes.errorColor}>{Blockly.Msg.builder_hardware_helper}</FormHelperText> : null}
|
||||
<GridList cellHeight={100} cols={cols} spacing={10}>
|
||||
{hardware.map((picture, i) => (
|
||||
<GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{ tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border }}>
|
||||
|
||||
@ -2,8 +2,6 @@ import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { changeContent } from '../../../actions/tutorialBuilderActions';
|
||||
import { getTutorials, resetTutorial } from '../../../actions/tutorialActions';
|
||||
import { clearMessages } from '../../../actions/messageActions';
|
||||
|
||||
import FormGroup from '@material-ui/core/FormGroup';
|
||||
import Checkbox from '@material-ui/core/Checkbox';
|
||||
@ -11,7 +9,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
import FormLabel from '@material-ui/core/FormLabel';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
|
||||
import * as Blockly from 'blockly'
|
||||
class Requirements extends Component {
|
||||
|
||||
onChange = (e) => {
|
||||
@ -29,8 +27,8 @@ class Requirements extends Component {
|
||||
render() {
|
||||
return (
|
||||
<FormControl style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
|
||||
<FormLabel style={{ color: 'black' }}>Voraussetzungen</FormLabel>
|
||||
<FormHelperText style={{ marginTop: '5px' }}>Beachte, dass die Reihenfolge des Anhakens maßgebend ist.</FormHelperText>
|
||||
<FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_requirements_head}</FormLabel>
|
||||
<FormHelperText style={{ marginTop: '5px' }}>{Blockly.Msg.builder_requirements_order}</FormHelperText>
|
||||
<FormGroup>
|
||||
{this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id).map((tutorial, i) =>
|
||||
<FormControlLabel
|
||||
|
||||
@ -15,7 +15,7 @@ import GridListTileBar from '@material-ui/core/GridListTileBar';
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import * as Blockly from 'blockly'
|
||||
const styles = theme => ({
|
||||
expand: {
|
||||
'&:hover': {
|
||||
@ -56,7 +56,7 @@ class Hardware extends Component {
|
||||
var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
|
||||
return (
|
||||
<div style={{ marginTop: '10px', marginBottom: '5px' }}>
|
||||
<Typography>Für die Umsetzung benötigst du folgende Hardware:</Typography>
|
||||
<Typography>{Blockly.Msg.tutorials_hardware_head}</Typography>
|
||||
|
||||
<GridList cellHeight={100} cols={cols} spacing={10}>
|
||||
{this.props.picture.map((picture, i) => {
|
||||
@ -91,11 +91,11 @@ class Hardware extends Component {
|
||||
content={this.state.content}
|
||||
onClose={this.handleClose}
|
||||
onClick={this.handleClose}
|
||||
button={'Schließen'}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
<div>
|
||||
<img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name} />
|
||||
Weitere Informationen zur Hardware-Komponente findest du <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">hier</Link>.
|
||||
{Blockly.Msg.tutorials_hardware_moreInformation} <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">{Blockly.Msg.tutorials_hardware_here}</Link>.
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ import Dialog from '../Dialog';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Checkbox from '@material-ui/core/Checkbox';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
import * as Blockly from 'blockly'
|
||||
|
||||
const styles = (theme) => ({
|
||||
link: {
|
||||
@ -45,7 +46,7 @@ class HintTutorialExists extends Component {
|
||||
window.localStorage.setItem('news', e.target.checked);
|
||||
}
|
||||
else {
|
||||
window.localStorage.deleteItem('news');
|
||||
window.localStorage.removeItem('news');
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,30 +57,30 @@ class HintTutorialExists extends Component {
|
||||
fullWidth
|
||||
maxWidth={'sm'}
|
||||
open={this.state.open}
|
||||
title={'Neuigkeiten'}
|
||||
title={Blockly.Msg.messages_newblockly_head}
|
||||
content={''}
|
||||
onClose={this.toggleDialog}
|
||||
onClick={this.toggleDialog}
|
||||
button={'Schließen'}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
<div>
|
||||
Es gibt ab jetzt Tutorials zu verschiedenen Themen. Schau mal <Link to="/tutorial" className={this.props.classes.link}>hier</Link> vorbei.
|
||||
<FormControlLabel
|
||||
style={{ marginTop: '20px' }}
|
||||
classes={{ label: this.props.classes.label }}
|
||||
control={
|
||||
<Checkbox
|
||||
size={'small'}
|
||||
value={true}
|
||||
checked={this.state.checked}
|
||||
onChange={(e) => this.onChange(e)}
|
||||
name="dialog"
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
label={'Dialog nicht mehr anzeigen'}
|
||||
/>
|
||||
{Blockly.Msg.messages_newblockly_text}<Link to="/tutorial" className={this.props.classes.link}>test</Link>
|
||||
</div>
|
||||
<FormControlLabel
|
||||
style={{ marginTop: '20px' }}
|
||||
classes={{ label: this.props.classes.label }}
|
||||
control={
|
||||
<Checkbox
|
||||
size={'small'}
|
||||
value={true}
|
||||
checked={this.state.checked}
|
||||
onChange={(e) => this.onChange(e)}
|
||||
name="dialog"
|
||||
color="primary"
|
||||
/>
|
||||
}
|
||||
label={Blockly.Msg.labels_donotshowagain}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@ -13,6 +13,7 @@ import Tooltip from '@material-ui/core/Tooltip';
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
|
||||
import * as Blockly from 'blockly'
|
||||
|
||||
const styles = theme => ({
|
||||
outerDiv: {
|
||||
@ -63,7 +64,7 @@ class Requirement extends Component {
|
||||
var tutorialIds = requirements.map(requirement => requirement._id);
|
||||
return (
|
||||
<div style={{ marginTop: '20px', marginBottom: '5px' }}>
|
||||
<Typography>Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:</Typography>
|
||||
<Typography>{Blockly.Msg.tutorials_requirements}</Typography>
|
||||
<List component="div">
|
||||
{tutorialIds.map((tutorialId, i) => {
|
||||
var title = requirements[i].title
|
||||
|
||||
@ -18,6 +18,8 @@ import Button from '@material-ui/core/Button';
|
||||
import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import * as Blockly from 'blockly'
|
||||
|
||||
const styles = (theme) => ({
|
||||
compile: {
|
||||
backgroundColor: theme.palette.button.compile,
|
||||
@ -57,7 +59,7 @@ class SolutionCheck extends Component {
|
||||
const steps = this.props.tutorial.steps;
|
||||
return (
|
||||
<div>
|
||||
<Tooltip title='Lösung kontrollieren' arrow>
|
||||
<Tooltip title={Blockly.Msg.tooltip_check_solution} arrow>
|
||||
<IconButton
|
||||
className={this.props.classes.compile}
|
||||
style={{ width: '40px', height: '40px', marginRight: '5px' }}
|
||||
@ -76,7 +78,7 @@ class SolutionCheck extends Component {
|
||||
content={this.state.msg.text}
|
||||
onClose={this.toggleDialog}
|
||||
onClick={this.toggleDialog}
|
||||
button={'Schließen'}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
{this.state.msg.type === 'success' ?
|
||||
<div style={{ marginTop: '20px', display: 'flex' }}>
|
||||
@ -88,7 +90,7 @@ class SolutionCheck extends Component {
|
||||
color="primary"
|
||||
onClick={() => { this.toggleDialog(); this.props.history.push(`/tutorial/`) }}
|
||||
>
|
||||
Tutorials-Übersicht
|
||||
{Blockly.Msg.button_tutorial_overview}
|
||||
</Button>
|
||||
:
|
||||
<Button
|
||||
@ -97,7 +99,7 @@ class SolutionCheck extends Component {
|
||||
color="primary"
|
||||
onClick={() => { this.toggleDialog(); this.props.tutorialStep(this.props.activeStep + 1) }}
|
||||
>
|
||||
nächster Schritt
|
||||
{Blockly.Msg.button_next}
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -51,7 +51,6 @@ class StepperHorizontal extends Component {
|
||||
|
||||
render() {
|
||||
var tutorialId = this.props.tutorial._id;
|
||||
var tutorialIndex = this.props.currentTutorialIndex;
|
||||
var status = this.props.status.filter(status => status._id === tutorialId)[0];
|
||||
var tasks = status.tasks;
|
||||
var error = tasks.filter(task => task.type === 'error').length > 0;
|
||||
@ -71,7 +70,7 @@ class StepperHorizontal extends Component {
|
||||
<div className={this.props.classes.stepper}>
|
||||
<Button
|
||||
disabled//={tutorialIndex === 0}
|
||||
//onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
|
||||
//onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
|
||||
>
|
||||
{'<'}
|
||||
</Button>
|
||||
@ -83,7 +82,7 @@ class StepperHorizontal extends Component {
|
||||
</Tooltip>
|
||||
<Button
|
||||
disabled//={tutorialIndex + 1 === tutorials.length}
|
||||
//onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
|
||||
//onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
|
||||
>
|
||||
{'>'}
|
||||
</Button>
|
||||
|
||||
@ -12,7 +12,7 @@ import Instruction from './Instruction';
|
||||
import Assessment from './Assessment';
|
||||
import Badge from './Badge';
|
||||
import NotFound from '../NotFound';
|
||||
|
||||
import * as Blockly from 'blockly'
|
||||
import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ class Tutorial extends Component {
|
||||
else if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) {
|
||||
this.props.getTutorial(this.props.match.params.tutorialId);
|
||||
}
|
||||
if(this.props.message.id === 'GET_TUTORIAL_FAIL'){
|
||||
if (this.props.message.id === 'GET_TUTORIAL_FAIL') {
|
||||
alert(this.props.message.msg);
|
||||
}
|
||||
}
|
||||
@ -46,7 +46,7 @@ class Tutorial extends Component {
|
||||
componentWillUnmount() {
|
||||
this.props.resetTutorial();
|
||||
this.props.workspaceName(null);
|
||||
if(this.props.message.msg){
|
||||
if (this.props.message.msg) {
|
||||
this.props.clearMessages();
|
||||
}
|
||||
}
|
||||
@ -56,37 +56,38 @@ class Tutorial extends Component {
|
||||
<div>
|
||||
{this.props.isLoading ? null :
|
||||
!this.props.tutorial ?
|
||||
this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} /> : null
|
||||
this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: Blockly.Msg.messages_GET_TUTORIAL_FAIL, link: '/tutorial' }} /> : null
|
||||
: (() => {
|
||||
var tutorial = this.props.tutorial;
|
||||
var steps = this.props.tutorial.steps;
|
||||
var step = steps[this.props.activeStep];
|
||||
var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
|
||||
return(
|
||||
<div>
|
||||
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} />
|
||||
var tutorial = this.props.tutorial;
|
||||
var steps = this.props.tutorial.steps;
|
||||
var step = steps[this.props.activeStep];
|
||||
var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} />
|
||||
|
||||
<StepperHorizontal />
|
||||
<Badge />
|
||||
<StepperHorizontal />
|
||||
<Badge />
|
||||
|
||||
<div style={{ display: 'flex' }}>
|
||||
<StepperVertical steps={steps} />
|
||||
{/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
|
||||
<Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
|
||||
{step ?
|
||||
step.type === 'instruction' ?
|
||||
<Instruction step={step} />
|
||||
: <Assessment step={step} name={name} /> // if step.type === 'assessment'
|
||||
: null}
|
||||
<div style={{ display: 'flex' }}>
|
||||
<StepperVertical steps={steps} />
|
||||
{/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
|
||||
<Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
|
||||
{step ?
|
||||
step.type === 'instruction' ?
|
||||
<Instruction step={step} />
|
||||
: <Assessment step={step} name={name} /> // if step.type === 'assessment'
|
||||
: null}
|
||||
|
||||
<div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
|
||||
<Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
|
||||
<Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
|
||||
<Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
|
||||
<Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)})()
|
||||
</div>
|
||||
)
|
||||
})()
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -19,7 +19,7 @@ import Divider from '@material-ui/core/Divider';
|
||||
import InputAdornment from '@material-ui/core/InputAdornment';
|
||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import Link from '@material-ui/core/Link';
|
||||
|
||||
import * as Blockly from 'blockly'
|
||||
|
||||
export class Login extends Component {
|
||||
|
||||
@ -37,21 +37,21 @@ export class Login extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(props){
|
||||
componentDidUpdate(props) {
|
||||
console.log(this.state.redirect);
|
||||
const { message } = this.props;
|
||||
if (message !== props.message) {
|
||||
if(message.id === 'LOGIN_SUCCESS'){
|
||||
if(this.state.redirect){
|
||||
if (message.id === 'LOGIN_SUCCESS') {
|
||||
if (this.state.redirect) {
|
||||
this.props.history.push(this.state.redirect);
|
||||
}
|
||||
else{
|
||||
else {
|
||||
this.props.history.goBack();
|
||||
}
|
||||
}
|
||||
// Check for login error
|
||||
else if(message.id === 'LOGIN_FAIL'){
|
||||
this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: 'Der Benutzername oder das Passwort ist nicht korrekt.', type: 'error' });
|
||||
else if (message.id === 'LOGIN_FAIL') {
|
||||
this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -62,8 +62,8 @@ export class Login extends Component {
|
||||
|
||||
onSubmit = e => {
|
||||
e.preventDefault();
|
||||
const {email, password} = this.state;
|
||||
if(email !== '' && password !== ''){
|
||||
const { email, password } = this.state;
|
||||
if (email !== '' && password !== '') {
|
||||
// create user object
|
||||
const user = {
|
||||
email,
|
||||
@ -83,13 +83,13 @@ export class Login extends Component {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
render(){
|
||||
return(
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs content={[{ link: '/user/login', title: 'Anmelden' }]} />
|
||||
|
||||
<div style={{maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
<h1>Anmelden</h1>
|
||||
<div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
|
||||
<h1>{Blockly.Msg.login_head}</h1>
|
||||
<Alert>
|
||||
Zur Anmeldung ist ein Konto auf <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> Voraussetzung.
|
||||
</Alert>
|
||||
@ -100,10 +100,10 @@ export class Login extends Component {
|
||||
key={this.state.key}
|
||||
/>
|
||||
<TextField
|
||||
style={{marginBottom: '10px'}}
|
||||
style={{ marginBottom: '10px' }}
|
||||
// variant='outlined'
|
||||
type='text'
|
||||
label='E-Mail oder Nutzername'
|
||||
label={Blockly.Msg.labels_username}
|
||||
name='email'
|
||||
value={this.state.email}
|
||||
onChange={this.onChange}
|
||||
@ -133,17 +133,17 @@ export class Login extends Component {
|
||||
fullWidth={true}
|
||||
/>
|
||||
<p>
|
||||
<Button color="primary" variant='contained' onClick={this.onSubmit} style={{width: '100%'}}>
|
||||
<Button color="primary" variant='contained' onClick={this.onSubmit} style={{ width: '100%' }}>
|
||||
{this.props.progress ?
|
||||
<div style={{height: '24.5px'}}><CircularProgress color="inherit" size={20}/></div>
|
||||
: 'Anmelden'}
|
||||
<div style={{ height: '24.5px' }}><CircularProgress color="inherit" size={20} /></div>
|
||||
: 'Anmelden'}
|
||||
</Button>
|
||||
</p>
|
||||
<p style={{textAlign: 'center', fontSize: '0.8rem'}}>
|
||||
<p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
|
||||
<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">Passwort vergessen?</Link>
|
||||
</p>
|
||||
<Divider variant='fullWidth'/>
|
||||
<p style={{textAlign: 'center', paddingRight: "34px", paddingLeft: "34px"}}>
|
||||
<Divider variant='fullWidth' />
|
||||
<p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
|
||||
Du hast noch kein Konto? Registriere dich auf <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
|
||||
</p>
|
||||
</div>
|
||||
@ -156,7 +156,6 @@ Login.propTypes = {
|
||||
message: PropTypes.object.isRequired,
|
||||
login: PropTypes.func.isRequired,
|
||||
clearMessages: PropTypes.func.isRequired,
|
||||
message: PropTypes.object.isRequired,
|
||||
progress: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@ import TextField from '@material-ui/core/TextField';
|
||||
|
||||
import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as Blockly from 'blockly/core';
|
||||
|
||||
const styles = (theme) => ({
|
||||
backdrop: {
|
||||
@ -85,7 +86,7 @@ class Compile extends Component {
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.setState({ progress: false, file: false, open: true, title: 'Fehler', content: 'Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal.' });
|
||||
this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
|
||||
});
|
||||
}
|
||||
|
||||
@ -119,7 +120,7 @@ class Compile extends Component {
|
||||
return (
|
||||
<div style={{}}>
|
||||
{this.props.iconButton ?
|
||||
<Tooltip title='Projekt kompilieren' arrow style={{ marginRight: '5px' }}>
|
||||
<Tooltip title={Blockly.Msg.tooltip_compile_code} arrow style={{ marginRight: '5px' }}>
|
||||
<IconButton
|
||||
className={this.props.classes.iconButton}
|
||||
onClick={() => this.compile()}
|
||||
@ -141,7 +142,7 @@ class Compile extends Component {
|
||||
content={this.state.content}
|
||||
onClose={this.toggleDialog}
|
||||
onClick={this.state.file ? () => { this.toggleDialog(); this.setState({ name: this.props.name }) } : this.toggleDialog}
|
||||
button={this.state.file ? 'Abbrechen' : 'Schließen'}
|
||||
button={this.state.file ? Blockly.Msg.button_cancel : Blockly.Msg.button_close}
|
||||
>
|
||||
{this.state.file ?
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
|
||||
@ -13,6 +13,7 @@ import Tooltip from '@material-ui/core/Tooltip';
|
||||
|
||||
import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as Blockly from 'blockly/core';
|
||||
|
||||
const styles = (theme) => ({
|
||||
buttonTrash: {
|
||||
@ -43,12 +44,12 @@ class DeleteProject extends Component {
|
||||
}
|
||||
|
||||
componentDidUpdate(props) {
|
||||
if(this.props.message !== props.message){
|
||||
if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
|
||||
if (this.props.message !== props.message) {
|
||||
if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
|
||||
this.props.history.push(`/${this.props.projectType}`);
|
||||
}
|
||||
else if(this.props.message.id === 'PROJECT_DELETE_FAIL'){
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Projektes. Versuche es noch einmal.`, type: 'error' });
|
||||
else if (this.props.message.id === 'PROJECT_DELETE_FAIL') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_delete_project_failed, type: 'error' });
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -56,7 +57,7 @@ class DeleteProject extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Tooltip title='Projekt löschen' arrow>
|
||||
<Tooltip title={Blockly.Msg.tooltip_delete_project} arrow>
|
||||
<IconButton
|
||||
className={this.props.classes.buttonTrash}
|
||||
onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}
|
||||
|
||||
@ -12,6 +12,8 @@ import Tooltip from '@material-ui/core/Tooltip';
|
||||
|
||||
import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as Blockly from 'blockly/core';
|
||||
|
||||
|
||||
const styles = (theme) => ({
|
||||
button: {
|
||||
@ -40,7 +42,7 @@ class DownloadProject extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={this.props.style}>
|
||||
<Tooltip title='Projekt herunterladen' arrow>
|
||||
<Tooltip title={Blockly.Msg.tooltip_download_project} arrow>
|
||||
<IconButton
|
||||
className={this.props.classes.button}
|
||||
onClick={() => this.downloadXmlFile()}
|
||||
|
||||
@ -9,10 +9,7 @@ import Snackbar from '../Snackbar';
|
||||
import Dialog from '../Dialog';
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
|
||||
import { faUpload } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
@ -97,7 +94,7 @@ class OpenProject extends Component {
|
||||
type="file"
|
||||
/>
|
||||
<label htmlFor="open-blocks">
|
||||
<Tooltip title='Projekt öffnen' arrow style={this.props.style}>
|
||||
<Tooltip title={Blockly.Msg.tooltip_open_project} arrow style={this.props.style}>
|
||||
<div className={this.props.classes.button} style={{
|
||||
borderRadius: '50%', cursor: 'pointer', display: 'table-cell',
|
||||
verticalAlign: 'middle',
|
||||
@ -115,7 +112,7 @@ class OpenProject extends Component {
|
||||
content={this.state.content}
|
||||
onClose={this.toggleDialog}
|
||||
onClick={this.toggleDialog}
|
||||
button={'Schließen'}
|
||||
button={Blockly.Msg.button_close}
|
||||
/>
|
||||
<Snackbar
|
||||
open={this.state.snackbar}
|
||||
|
||||
@ -58,7 +58,7 @@ class ResetWorkspace extends Component {
|
||||
if (!this.props.assessment) {
|
||||
this.props.workspaceName(createNameId());
|
||||
}
|
||||
this.setState({ snackbar: true, type: 'success', key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
|
||||
this.setState({ snackbar: true, type: 'success', key: Date.now(), message: Blockly.Msg.messages_reset_workspace_success });
|
||||
}
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ class ResetWorkspace extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={this.props.style}>
|
||||
<Tooltip title='Workspace zurücksetzen' arrow>
|
||||
<Tooltip title={Blockly.Msg.tooltip_reset_workspace} arrow>
|
||||
<IconButton
|
||||
className={this.props.classes.button}
|
||||
onClick={() => this.resetWorkspace()}
|
||||
|
||||
@ -14,13 +14,14 @@ import Button from '@material-ui/core/Button';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Menu from '@material-ui/core/Menu';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
|
||||
import { faSave } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import * as Blockly from 'blockly/core'
|
||||
|
||||
const styles = (theme) => ({
|
||||
button: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
@ -63,18 +64,18 @@ class SaveProject extends Component {
|
||||
if (props.description !== this.props.description) {
|
||||
this.setState({ description: this.props.description });
|
||||
}
|
||||
if(this.props.message !== props.message){
|
||||
if(this.props.message.id === 'PROJECT_UPDATE_SUCCESS'){
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
|
||||
if (this.props.message !== props.message) {
|
||||
if (this.props.message.id === 'PROJECT_UPDATE_SUCCESS') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_PROJECT_UPDATE_SUCCESS, type: 'success' });
|
||||
}
|
||||
else if(this.props.message.id === 'GALLERY_UPDATE_SUCCESS'){
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Das Galerie-Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
|
||||
else if (this.props.message.id === 'GALLERY_UPDATE_SUCCESS') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_GALLERY_UPDATE_SUCCESS, type: 'success' });
|
||||
}
|
||||
else if(this.props.message.id === 'PROJECT_UPDATE_FAIL'){
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.`, type: 'error' });
|
||||
else if (this.props.message.id === 'PROJECT_UPDATE_FAIL') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_PROJECT_UPDATE_FAIL, type: 'error' });
|
||||
}
|
||||
else if(this.props.message.id === 'GALLERY_UPDATE_FAIL'){
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.`, type: 'error' });
|
||||
else if (this.props.message.id === 'GALLERY_UPDATE_FAIL') {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_GALLERY_UPDATE_FAIL, type: 'error' });
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -92,16 +93,16 @@ class SaveProject extends Component {
|
||||
xml: this.props.xml,
|
||||
title: this.props.name
|
||||
};
|
||||
if(this.state.projectType === 'gallery'){
|
||||
if (this.state.projectType === 'gallery') {
|
||||
body.description = this.state.description;
|
||||
}
|
||||
const config = {
|
||||
success: res => {
|
||||
var project = res.data[this.state.projectType];
|
||||
this.props.history.push(`/${this.state.projectType}/${project._id}`);
|
||||
},
|
||||
error: err => {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Speichern des ${this.state.projectType === 'gallery' ? 'Galerie-':''}Projektes. Versuche es noch einmal.`, type: 'error' });
|
||||
})
|
||||
.catch(err => {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `${Blockly.Msg.messages_gallery_save_fail_1} ${this.state.projectType === 'gallery' ? 'Galerie-' : ''} ${Blockly.Msg.messages_gallery_save_fail_2}`, type: 'error' });
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
};
|
||||
@ -120,7 +121,7 @@ class SaveProject extends Component {
|
||||
|
||||
workspaceDescription = () => {
|
||||
this.props.setDescription(this.state.description);
|
||||
this.setState({projectType: 'gallery'},
|
||||
this.setState({ projectType: 'gallery' },
|
||||
() => this.saveProject()
|
||||
);
|
||||
}
|
||||
@ -129,10 +130,10 @@ class SaveProject extends Component {
|
||||
console.log(1, this.props);
|
||||
return (
|
||||
<div style={this.props.style}>
|
||||
<Tooltip title={this.state.projectType === 'project'? 'Projekt aktualisieren':'Projekt speichern'} arrow>
|
||||
<Tooltip title={this.state.projectType === 'project' ? Blockly.Msg.tooltip_update_project : Blockly.Msg.tooltip_save_project} arrow>
|
||||
<IconButton
|
||||
className={this.props.classes.button}
|
||||
onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => {this.setState({projectType: 'project'}, () => this.saveProject())}}
|
||||
onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => { this.setState({ projectType: 'project' }, () => this.saveProject()) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faSave} size="xs" />
|
||||
</IconButton>
|
||||
@ -152,12 +153,12 @@ class SaveProject extends Component {
|
||||
onClose={this.toggleMenu}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={this.state.projectType === 'project' ? (e) => {this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id)} : (e) => {this.toggleMenu(e); this.setState({projectType: 'project'}, () => this.saveProject())}}
|
||||
onClick={this.state.projectType === 'project' ? (e) => { this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id) } : (e) => { this.toggleMenu(e); this.setState({ projectType: 'project' }, () => this.saveProject()) }}
|
||||
>
|
||||
{this.state.projectType === 'project' ? 'Projekt aktualisieren' : 'Projekt erstellen'}
|
||||
{this.state.projectType === 'project' ? Blockly.Msg.tooltip_update_project : Blockly.Msg.tooltip_create_project}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={this.state.projectType === 'gallery' ? (e) => {this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id)} : (e) => {this.toggleMenu(e); this.setState({ open: true, title: 'Projekbeschreibung ergänzen', content: 'Bitte gib eine Beschreibung für das Galerie-Projekt ein und bestätige deine Angabe mit einem Klick auf \'Eingabe\'.'});}}
|
||||
onClick={this.state.projectType === 'gallery' ? (e) => { this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id) } : (e) => { this.toggleMenu(e); this.setState({ open: true, title: 'Projekbeschreibung ergänzen', content: 'Bitte gib eine Beschreibung für das Galerie-Projekt ein und bestätige deine Angabe mit einem Klick auf \'Eingabe\'.' }); }}
|
||||
>
|
||||
{this.state.projectType === 'gallery' ? 'Galerie-Projekt aktualisieren' : 'Galerie-Projekt erstellen'}
|
||||
</MenuItem>
|
||||
@ -173,13 +174,13 @@ class SaveProject extends Component {
|
||||
open={this.state.open}
|
||||
title={this.state.title}
|
||||
content={this.state.content}
|
||||
onClose={() => {this.toggleDialog(); this.setState({ description: this.props.description });}}
|
||||
onClick={() => {this.toggleDialog(); this.setState({ description: this.props.description });}}
|
||||
onClose={() => { this.toggleDialog(); this.setState({ description: this.props.description }); }}
|
||||
onClick={() => { this.toggleDialog(); this.setState({ description: this.props.description }); }}
|
||||
button={'Abbrechen'}
|
||||
>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<TextField autoFocus fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
|
||||
<Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => {this.workspaceDescription(); this.toggleDialog();}}>Eingabe</Button>
|
||||
<Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => { this.workspaceDescription(); this.toggleDialog(); }}>Eingabe</Button>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
@ -73,7 +73,7 @@ class Screenshot extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={this.props.style}>
|
||||
<Tooltip title='Screenshot erstellen' arrow>
|
||||
<Tooltip title={Blockly.Msg.tooltip_screenshot} arrow>
|
||||
<IconButton
|
||||
className={this.props.classes.button}
|
||||
onClick={() => this.getSvg()}
|
||||
|
||||
@ -19,6 +19,8 @@ import Typography from '@material-ui/core/Typography';
|
||||
import { faShareAlt, faCopy } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import * as Blockly from 'blockly/core';
|
||||
|
||||
const styles = (theme) => ({
|
||||
button: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
@ -59,18 +61,18 @@ class WorkspaceFunc extends Component {
|
||||
}
|
||||
|
||||
componentDidUpdate(props) {
|
||||
if(this.props.message !== props.message){
|
||||
if(this.props.message.id === 'SHARE_SUCCESS' && (!this.props.multiple || this.props.message.status === this.props.project._id)){
|
||||
this.setState({ share: true, open: true, title: 'Programm teilen', id: this.props.message.status });
|
||||
if (this.props.message !== props.message) {
|
||||
if (this.props.message.id === 'SHARE_SUCCESS' && (!this.props.multiple || this.props.message.status === this.props.project._id)) {
|
||||
this.setState({ share: true, open: true, title: Blockly.Msg.messages_SHARE_SUCCESS, id: this.props.message.status });
|
||||
}
|
||||
else if(this.props.message.id === 'SHARE_FAIL' && (!this.props.multiple || this.props.message.status === this.props.project._id)){
|
||||
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.`, type: 'error' });
|
||||
else if (this.props.message.id === 'SHARE_FAIL' && (!this.props.multiple || this.props.message.status === this.props.project._id)) {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_SHARE_FAIL, type: 'error' });
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
componentWillUnmount() {
|
||||
this.props.clearMessages();
|
||||
}
|
||||
|
||||
@ -79,9 +81,9 @@ class WorkspaceFunc extends Component {
|
||||
}
|
||||
|
||||
shareBlocks = () => {
|
||||
if(this.props.projectType === 'project' && this.props.project.shared){
|
||||
if (this.props.projectType === 'project' && this.props.project.shared) {
|
||||
// project is already shared
|
||||
this.setState({ open: true, title: 'Programm teilen', id: this.props.project._id });
|
||||
this.setState({ open: true, title: Blockly.Msg.messages_SHARE_SUCCESS, id: this.props.project._id });
|
||||
}
|
||||
else {
|
||||
this.props.shareProject(this.props.name || this.props.project.title, this.props.projectType, this.props.project ? this.props.project._id : undefined);
|
||||
@ -91,7 +93,7 @@ class WorkspaceFunc extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={this.props.style}>
|
||||
<Tooltip title='Projekt teilen' arrow>
|
||||
<Tooltip title={Blockly.Msg.tooltip_share_project} arrow>
|
||||
<IconButton
|
||||
className={this.props.classes.button}
|
||||
onClick={() => this.shareBlocks()}
|
||||
@ -112,29 +114,28 @@ class WorkspaceFunc extends Component {
|
||||
content={this.state.content}
|
||||
onClose={this.toggleDialog}
|
||||
onClick={this.toggleDialog}
|
||||
button={'Schließen'}
|
||||
button={Blockly.Msg.button_close}
|
||||
>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<Typography>Über den folgenden Link kannst du dein Programm teilen:</Typography>
|
||||
<Link to={`/share/${this.state.id}`} onClick={() => this.toggleDialog()} className={this.props.classes.link}>{`${window.location.origin}/share/${this.state.id}`}</Link>
|
||||
<Tooltip title='Link kopieren' arrow style={{ marginRight: '5px' }}>
|
||||
<Tooltip title={Blockly.Msg.tooltip_copy_link} arrow style={{ marginRight: '5px' }}>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`${window.location.origin}/share/${this.state.id}`);
|
||||
this.setState({ snackbar: true, key: Date.now(), message: 'Link erfolgreich in Zwischenablage gespeichert.', type: 'success' });
|
||||
this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_copylink_success, type: 'success' });
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCopy} size="xs" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{this.props.project && this.props.project.shared && this.props.message.id !== 'SHARE_SUCCESS' ?
|
||||
<Typography variant='body2' style={{marginTop: '20px'}}>{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${
|
||||
moment(this.props.project.shared).diff(moment().utc(), 'days') === 0 ?
|
||||
moment(this.props.project.shared).diff(moment().utc(), 'hours') === 0 ?
|
||||
`${moment(this.props.project.shared).diff(moment().utc(), 'minutes')} Minuten`
|
||||
<Typography variant='body2' style={{ marginTop: '20px' }}>{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${moment(this.props.project.shared).diff(moment().utc(), 'days') === 0 ?
|
||||
moment(this.props.project.shared).diff(moment().utc(), 'hours') === 0 ?
|
||||
`${moment(this.props.project.shared).diff(moment().utc(), 'minutes')} Minuten`
|
||||
: `${moment(this.props.project.shared).diff(moment().utc(), 'hours')} Stunden`
|
||||
: `${moment(this.props.project.shared).diff(moment().utc(), 'days')} Tage`} gültig.`}</Typography>
|
||||
: <Typography variant='body2' style={{marginTop: '20px'}}>{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography>}
|
||||
: <Typography variant='body2' style={{ marginTop: '20px' }}>{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography>}
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
@ -36,8 +36,8 @@ class TrashcanButtons extends Component {
|
||||
componentDidUpdate(previousProps, previousState) {
|
||||
const workspace = Blockly.getMainWorkspace();
|
||||
const contentsIsOpen = workspace.trashcan.contentsIsOpen();
|
||||
if(previousState.closeTrashFlyout !== contentsIsOpen){
|
||||
this.setState({ closeTrashFlyout: contentsIsOpen });
|
||||
if (previousState.closeTrashFlyout !== contentsIsOpen) {
|
||||
this.setState({ closeTrashFlyout: contentsIsOpen });
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,26 +59,26 @@ class TrashcanButtons extends Component {
|
||||
return (
|
||||
this.state.closeTrashFlyout ?
|
||||
<div>
|
||||
<Tooltip title='gelöschte Blöcke ausblenden'>
|
||||
<Tooltip title={Blockly.Msg.tooltip_trashcan_hide}>
|
||||
<IconButton
|
||||
className={this.props.classes.closeTrash}
|
||||
style={{width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
|
||||
style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
|
||||
onClick={() => this.closeTrashcan()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTimes} size="xs"/>
|
||||
<FontAwesomeIcon icon={faTimes} size="xs" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title='Blöcke endgültig löschen'>
|
||||
<Tooltip title={Blockly.Msg.tooltip_trashcan_delete}>
|
||||
<IconButton
|
||||
className={this.props.classes.deleteTrash}
|
||||
style={{width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
|
||||
style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
|
||||
onClick={() => this.clearTrashcan()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} size="xs"/>
|
||||
<FontAwesomeIcon icon={faTrash} size="xs" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
: null
|
||||
: null
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ import Typography from '@material-ui/core/Typography';
|
||||
|
||||
import { faPen } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as Blockly from 'blockly/core'
|
||||
|
||||
const styles = (theme) => ({
|
||||
workspaceName: {
|
||||
@ -72,31 +73,31 @@ class WorkspaceName extends Component {
|
||||
renameWorkspace = () => {
|
||||
this.props.workspaceName(this.state.name);
|
||||
this.toggleDialog();
|
||||
if(this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery'){
|
||||
if(this.props.projectType === 'gallery' || this.state.projectType === 'gallery'){
|
||||
if (this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery') {
|
||||
if (this.props.projectType === 'gallery' || this.state.projectType === 'gallery') {
|
||||
this.props.setDescription(this.state.description);
|
||||
}
|
||||
if(this.state.projectType === 'gallery'){
|
||||
if (this.state.projectType === 'gallery') {
|
||||
this.saveGallery();
|
||||
} else {
|
||||
this.props.updateProject(this.props.projectType, this.props.project._id);
|
||||
}
|
||||
} else {
|
||||
this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
|
||||
this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `${Blockly.Msg.messages_rename_success_01} ${this.state.name} ${Blockly.Msg.messages_rename_success_02}` });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={this.props.style}>
|
||||
<Tooltip title={`Titel des Projektes${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{height: '100%'}}>
|
||||
<Tooltip title={`${Blockly.Msg.tooltip_project_title} ${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{ height: '100%' }}>
|
||||
<div
|
||||
className={this.props.classes.workspaceName}
|
||||
onClick={() => {if(this.props.multiple){this.props.workspaceName(this.props.project.title);if(this.props.projectType === 'gallery'){this.props.setDescription(this.props.project.description);}} this.setState({ open: true, title: this.props.projectType === 'gallery' ? 'Projektdaten ändern': this.props.projectType === 'project' ? 'Projekt umbenennen' : 'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.':'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}
|
||||
onClick={() => { if (this.props.multiple) { this.props.workspaceName(this.props.project.title); if (this.props.projectType === 'gallery') { this.props.setDescription(this.props.project.description); } } this.setState({ open: true, title: this.props.projectType === 'gallery' ? 'Projektdaten ändern' : this.props.projectType === 'project' ? 'Projekt umbenennen' : 'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.' : 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}
|
||||
>
|
||||
{this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl':'xs', this.props.width) ?
|
||||
{this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl' : 'xs', this.props.width) ?
|
||||
<Typography style={{ margin: 'auto -3px auto 12px' }}>{this.props.name}</Typography>
|
||||
: null}
|
||||
: null}
|
||||
<div style={{ width: '40px', display: 'flex' }}>
|
||||
<FontAwesomeIcon icon={faPen} style={{ height: '18px', width: '18px', margin: 'auto' }} />
|
||||
</div>
|
||||
@ -113,17 +114,17 @@ class WorkspaceName extends Component {
|
||||
open={this.state.open}
|
||||
title={this.state.title}
|
||||
content={this.state.content}
|
||||
onClose={() => {this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description });}}
|
||||
onClick={() => {this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description });}}
|
||||
onClose={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }}
|
||||
onClick={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }}
|
||||
button={'Abbrechen'}
|
||||
>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
{this.props.projectType === 'gallery' || this.state.projectType === 'gallery' ?
|
||||
<div>
|
||||
<TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{marginBottom: '10px'}}/>
|
||||
<TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginBottom: '10px' }} />
|
||||
<TextField fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
|
||||
</div>
|
||||
: <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />}
|
||||
: <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />}
|
||||
<Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => { this.renameWorkspace(); this.toggleDialog(); }}>Eingabe</Button>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
@ -1,8 +1,35 @@
|
||||
import { VISIT } from '../actions/types';
|
||||
import { VISIT, LANGUAGE, RENDERER, STATISTICS } from '../actions/types';
|
||||
|
||||
const initialLanguage = () => {
|
||||
if (window.localStorage.getItem('locale')) {
|
||||
return window.localStorage.getItem('locale');
|
||||
}
|
||||
if (navigator.language === 'de-DE'){
|
||||
return 'de_DE';
|
||||
}
|
||||
return 'en_US';
|
||||
};
|
||||
|
||||
const initialRenderer = () => {
|
||||
if (window.localStorage.getItem('renderer')) {
|
||||
return window.localStorage.getItem('renderer');
|
||||
}
|
||||
return 'geras';
|
||||
};
|
||||
|
||||
const initialStatistics = () => {
|
||||
if (window.localStorage.getItem('statistics')) {
|
||||
return JSON.parse(window.localStorage.getItem('statistics'));
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
const initialState = {
|
||||
pageVisits: 0 // detect if previous URL was
|
||||
pageVisits: 0, // detect if previous URL was
|
||||
language: initialLanguage(),
|
||||
renderer: initialRenderer(),
|
||||
statistics: initialStatistics()
|
||||
};
|
||||
|
||||
export default function(state = initialState, action){
|
||||
@ -12,6 +39,23 @@ export default function(state = initialState, action){
|
||||
...state,
|
||||
pageVisits: state.pageVisits += 1
|
||||
};
|
||||
case LANGUAGE:
|
||||
return {
|
||||
...state,
|
||||
language: action.payload
|
||||
};
|
||||
case RENDERER:
|
||||
window.localStorage.setItem('renderer', action.payload);
|
||||
return {
|
||||
...state,
|
||||
renderer: action.payload
|
||||
};
|
||||
case STATISTICS:
|
||||
window.localStorage.setItem('statistics', action.payload);
|
||||
return {
|
||||
...state,
|
||||
statistics: action.payload
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user