add multi interval feature

update blockly to latest release
2021-04-22 15:28:30 +02:00 · 2021-04-22 15:28:12 +02:00
78 changed files with 6460 additions and 9064 deletions
@@ -2,5 +2,8 @@ REACT_APP_COMPILER_URL=https://compiler.sensebox.de
 REACT_APP_BOARD=sensebox-mcu
 REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de

+REACT_APP_MYBADGES=https://mybadges.org
+REACT_APP_MYBADGES_API=https://mybadges.org/api/v1
+
 # in days
 REACT_APP_SHARE_LINK_EXPIRES=30
@@ -5,9 +5,7 @@
  "dependencies": {
    "@blockly/block-plus-minus": "^2.0.10",
    "@blockly/field-slider": "^2.1.1",
-    "@blockly/plugin-scroll-options": "^1.0.2",
-    "@blockly/plugin-typed-variable-modal": "^3.1.26",
-    "@blockly/zoom-to-fit": "^2.0.7",
+    "@blockly/plugin-typed-variable-modal": "^3.1.15",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
@@ -18,29 +16,27 @@
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.21.0",
-    "blockly": "^6.20210701.0",
+    "blockly": "^5.20210325.1",
    "file-saver": "^2.0.2",
    "mnemonic-id": "^3.2.7",
    "moment": "^2.28.0",
-    "prismjs": "^1.24.0",
-    "react": "^17.0.2",
+    "prismjs": "^1.23.0",
+    "react": "^16.13.1",
    "react-cookie-consent": "^5.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^16.13.1",
    "react-markdown": "^5.0.2",
-    "react-mde": "^11.5.0",
-    "react-redux": "^7.2.4",
+    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "reactour": "^1.18.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
-    "rich-markdown-editor": "^11.17.7",
-    "styled-components": "^5.0.0",
+    "styled-components": "^4.4.1",
    "uuid": "^8.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
-    "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && npm start",
+    "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && set \"REACT_APP_MYBADGES_API=http://localhost:3001/api/v1\"&& npm start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
@@ -24,13 +24,6 @@
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <!-- Matomo Image Tracker-->
-    <img
-      src="https://piwik.sensebox.kaufen/matomo.php?idsite=9&amp;rec=1"
-      style="border: 0; display: none"
-      alt=""
-    />
-    <!-- End Matomo -->
    <div id="root"></div>
    <!--
      This HTML file is a template.
@@ -1,211 +1,245 @@
-import {
-  GET_STATUS,
-  USER_LOADED,
-  USER_LOADING,
-  AUTH_ERROR,
-  LOGIN_SUCCESS,
-  LOGIN_FAIL,
-  LOGOUT_SUCCESS,
-  LOGOUT_FAIL,
-  REFRESH_TOKEN_SUCCESS,
-} from "../actions/types";
+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 { setLanguage } from "./generalActions";
+import axios from 'axios';
+import { returnErrors, returnSuccess } from './messageActions';
+import { setLanguage } from './generalActions';

 // Check token & load user
 export const loadUser = () => (dispatch) => {
  // user loading
  dispatch({
-    type: USER_LOADING,
+    type: USER_LOADING
  });
  const config = {
-    success: (res) => {
+    success: res => {
      dispatch({
        type: GET_STATUS,
-        payload: res.data.user.status,
+        payload: res.data.user.status
      });
      dispatch(setLanguage(res.data.user.language));
      dispatch({
        type: USER_LOADED,
-        payload: res.data.user,
+        payload: res.data.user
      });
    },
-    error: (err) => {
-      if (err.response) {
+    error: err => {
+      if(err.response){
        dispatch(returnErrors(err.response.data.message, err.response.status));
      }
      var status = [];
-      if (window.localStorage.getItem("status")) {
-        status = JSON.parse(window.localStorage.getItem("status"));
+      if (window.localStorage.getItem('status')) {
+        status = JSON.parse(window.localStorage.getItem('status'));
      }
      dispatch({
        type: GET_STATUS,
-        payload: status,
+        payload: status
      });
      dispatch({
-        type: AUTH_ERROR,
+        type: AUTH_ERROR
      });
-    },
+    }
  };
-  axios
-    .get(
-      `${process.env.REACT_APP_BLOCKLY_API}/user`,
-      config,
-      dispatch(authInterceptor())
-    )
-    .then((res) => {
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user`, config, dispatch(authInterceptor()))
+    .then(res => {
      res.config.success(res);
    })
-    .catch((err) => {
+    .catch(err => {
      err.config.error(err);
    });
 };

+
 var logoutTimerId;
-const timeToLogout = 14.9 * 60 * 1000; // nearly 15 minutes corresponding to the API
+const timeToLogout = 14.9*60*1000; // nearly 15 minutes corresponding to the API

 // Login user
-export const login =
-  ({ email, password }) =>
-  (dispatch) => {
+export const login = ({ email, password }) => (dispatch) => {
  dispatch({
-      type: USER_LOADING,
+    type: USER_LOADING
  });
  // Headers
  const config = {
    headers: {
-        "Content-Type": "application/json",
-      },
+      'Content-Type': 'application/json'
+    }
  };
  // Request Body
  const body = JSON.stringify({ email, password });
-    axios
-      .post(`${process.env.REACT_APP_BLOCKLY_API}/user`, body, config)
-      .then((res) => {
+  axios.post(`${process.env.REACT_APP_BLOCKLY_API}/user`, body, config)
+  .then(res => {
    // Logout automatically if refreshToken "expired"
-        const logoutTimer = () =>
-          setTimeout(() => dispatch(logout()), timeToLogout);
+    const logoutTimer = () => setTimeout(
+      () => dispatch(logout()),
+      timeToLogout
+    );
    logoutTimerId = logoutTimer();
    dispatch(setLanguage(res.data.user.language));
    dispatch({
      type: LOGIN_SUCCESS,
-          payload: res.data,
+      payload: res.data
    });
    dispatch({
      type: GET_STATUS,
-          payload: res.data.user.status,
+      payload: res.data.user.status
    });
-        dispatch(returnSuccess(res.data.message, res.status, "LOGIN_SUCCESS"));
+    dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS'));
  })
-      .catch((err) => {
-        dispatch(
-          returnErrors(
-            err.response.data.message,
-            err.response.status,
-            "LOGIN_FAIL"
-          )
-        );
+  .catch(err => {
+    dispatch(returnErrors(err.response.data.message, err.response.status, 'LOGIN_FAIL'));
    dispatch({
-          type: LOGIN_FAIL,
+      type: LOGIN_FAIL
    });
    var status = [];
-        if (window.localStorage.getItem("status")) {
-          status = JSON.parse(window.localStorage.getItem("status"));
+    if (window.localStorage.getItem('status')) {
+      status = JSON.parse(window.localStorage.getItem('status'));
    }
    dispatch({
      type: GET_STATUS,
-          payload: status,
+      payload: status
    });
  });
-  };
+};

-// Logout User
-export const logout = () => (dispatch) => {
+
+// Connect to MyBadges-Account
+export const connectMyBadges = ({ username, password }) => (dispatch, getState) => {
  const config = {
-    success: (res) => {
+    success: res => {
+      var user = getState().auth.user;
+      user.badge = res.data.account;
+      user.badges = res.data.badges;
      dispatch({
-        type: LOGOUT_SUCCESS,
+        type: MYBADGES_CONNECT,
+        payload: user
      });
-      var status = [];
-      if (window.localStorage.getItem("status")) {
-        status = JSON.parse(window.localStorage.getItem("status"));
-      }
-      dispatch({
-        type: GET_STATUS,
-        payload: status,
-      });
-      var locale = "en_US";
-      if (window.localStorage.getItem("locale")) {
-        locale = window.localStorage.getItem("locale");
-      } else if (navigator.language === "de-DE") {
-        locale = "de_DE";
-      }
-      dispatch(setLanguage(locale));
-      dispatch(returnSuccess(res.data.message, res.status, "LOGOUT_SUCCESS"));
-      clearTimeout(logoutTimerId);
+      dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_CONNECT_SUCCESS'));
    },
-    error: (err) => {
-      dispatch(
-        returnErrors(
-          err.response.data.message,
-          err.response.status,
-          "LOGOUT_FAIL"
-        )
-      );
-      dispatch({
-        type: LOGOUT_FAIL,
-      });
-      var status = [];
-      if (window.localStorage.getItem("status")) {
-        status = JSON.parse(window.localStorage.getItem("status"));
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_CONNECT_FAIL'));
    }
-      dispatch({
-        type: GET_STATUS,
-        payload: status,
-      });
-      clearTimeout(logoutTimerId);
-    },
  };
-  axios
-    .post("https://api.opensensemap.org/users/sign-out", {}, config)
-    .then((res) => {
+  // Request Body
+  const body = JSON.stringify({ username, password });
+  axios.post(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, body, config)
+  .then(res => {
    res.config.success(res);
  })
-    .catch((err) => {
-      if (err.response && err.response.status !== 401) {
+  .catch(err => {
+    if(err.response && err.response.status !== 401){
      err.config.error(err);
    }
  });
 };

+// Disconnect MyBadges-Account
+export const disconnectMyBadges = () => (dispatch, getState) => {
+  const config = {
+    success: res => {
+      var user = getState().auth.user;
+      user.badge = null;
+      user.badges = null;
+      dispatch({
+        type: MYBADGES_DISCONNECT,
+        payload: user
+      });
+      dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_DISCONNECT_SUCCESS'));
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_DISCONNECT_FAIL'));
+    }
+  };
+  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, {}, config)
+  .then(res => {
+    res.config.success(res);
+  })
+  .catch(err => {
+    if(err.response && err.response.status !== 401){
+      err.config.error(err);
+    }
+  });
+};
+
+
+// Logout User
+export const logout = () => (dispatch) => {
+  const config = {
+    success: res => {
+      dispatch({
+        type: LOGOUT_SUCCESS
+      });
+      var status = [];
+      if (window.localStorage.getItem('status')) {
+        status = JSON.parse(window.localStorage.getItem('status'));
+      }
+      dispatch({
+        type: GET_STATUS,
+        payload: status
+      });
+      var locale = 'en_US';
+      if (window.localStorage.getItem('locale')) {
+        locale = window.localStorage.getItem('locale');
+      }
+      else if (navigator.language === 'de-DE'){
+        locale = 'de_DE';
+      }
+      dispatch(setLanguage(locale));
+      dispatch(returnSuccess(res.data.message, res.status, 'LOGOUT_SUCCESS'));
+      clearTimeout(logoutTimerId);
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'LOGOUT_FAIL'));
+      dispatch({
+        type: LOGOUT_FAIL
+      });
+      var status = [];
+      if (window.localStorage.getItem('status')) {
+        status = JSON.parse(window.localStorage.getItem('status'));
+      }
+      dispatch({
+        type: GET_STATUS,
+        payload: status
+      });
+      clearTimeout(logoutTimerId);
+    }
+  };
+  axios.post('https://api.opensensemap.org/users/sign-out', {}, config)
+  .then(res => {
+    res.config.success(res);
+  })
+  .catch(err => {
+    if(err.response && err.response.status !== 401){
+      err.config.error(err);
+    }
+  });
+};
+
+
 export const authInterceptor = () => (dispatch, getState) => {
  // Add a request interceptor
  axios.interceptors.request.use(
-    (config) => {
-      config.headers["Content-Type"] = "application/json";
+    config => {
+      config.headers['Content-Type'] = 'application/json';
      const token = getState().auth.token;
      if (token) {
-        config.headers["Authorization"] = `Bearer ${token}`;
+       config.headers['Authorization'] = `Bearer ${token}`;
      }
      return config;
   },
-    (error) => {
+   error => {
     Promise.reject(error);
   }
  );

  // Add a response interceptor
  axios.interceptors.response.use(
-    (response) => {
+    response => {
      // request was successfull
      return response;
    },
-    (error) => {
+    error => {
      const originalRequest = error.config;
      const refreshToken = getState().auth.refreshToken;
-      if (refreshToken) {
+      if(refreshToken){
        // try to refresh the token failed
        if (error.response.status === 401 && originalRequest._retry) {
              // router.push('/login');
@@ -216,42 +250,38 @@ export const authInterceptor = () => (dispatch, getState) => {
          originalRequest._retry = true;
          const refreshToken = getState().auth.refreshToken;
          // request to refresh the token, in request-body is the refreshToken
-          axios
-            .post("https://api.opensensemap.org/users/refresh-auth", {
-              token: refreshToken,
-            })
-            .then((res) => {
+          axios.post('https://api.opensensemap.org/users/refresh-auth', {"token": refreshToken})
+               .then(res => {
                 if (res.status === 200) {
                   clearTimeout(logoutTimerId);
-                const logoutTimer = () =>
-                  setTimeout(() => dispatch(logout()), timeToLogout);
+                   const logoutTimer = () => setTimeout(
+                     () => dispatch(logout()),
+                     timeToLogout
+                   );
                   logoutTimerId = logoutTimer();
                   dispatch({
                     type: REFRESH_TOKEN_SUCCESS,
-                  payload: res.data,
+                     payload: res.data
                   });
-                axios.defaults.headers.common["Authorization"] =
-                  "Bearer " + getState().auth.token;
+                   axios.defaults.headers.common['Authorization'] = 'Bearer ' + getState().auth.token;
                   // request was successfull, new request with the old parameters and the refreshed token
                   return axios(originalRequest)
-                  .then((res) => {
+                          .then(res => {
                             originalRequest.success(res);
                           })
-                  .catch((err) => {
+                           .catch(err => {
                             originalRequest.error(err);
                           });
                 }
                 return Promise.reject(error);
               })
-            .catch((err) => {
+               .catch(err => {
                 // request failed, token could not be refreshed
-              if (err.response) {
-                dispatch(
-                  returnErrors(err.response.data.message, err.response.status)
-                );
+                 if(err.response){
+                   dispatch(returnErrors(err.response.data.message, err.response.status));
                 }
                 dispatch({
-                type: AUTH_ERROR,
+                   type: AUTH_ERROR
                 });
                 return Promise.reject(error);
               });
@@ -1,105 +1,109 @@
-import {
-  TUTORIAL_PROGRESS,
-  GET_TUTORIAL,
-  GET_TUTORIALS,
-  TUTORIAL_SUCCESS,
-  TUTORIAL_ERROR,
-  TUTORIAL_CHANGE,
-  TUTORIAL_XML,
-  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";
+import axios from 'axios';
+import { returnErrors, returnSuccess } from './messageActions';

 export const tutorialProgress = () => (dispatch) => {
-  dispatch({ type: TUTORIAL_PROGRESS });
+  dispatch({type: TUTORIAL_PROGRESS});
 };

+
 export const getTutorial = (id) => (dispatch, getState) => {
-  axios
-    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
-    .then((res) => {
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
+    .then(res => {
      var tutorial = res.data.tutorial;
-      existingTutorial(tutorial, getState().tutorial.status).then((status) => {
+      existingTutorial(tutorial, getState().tutorial.status).then(status => {
        dispatch({
          type: TUTORIAL_SUCCESS,
-          payload: status,
+          payload: status
        });
        dispatch(updateStatus(status));
        dispatch({
          type: GET_TUTORIAL,
-          payload: tutorial,
+          payload: tutorial
        });
-        dispatch({ type: TUTORIAL_PROGRESS });
+        dispatch({type: TUTORIAL_PROGRESS});
        dispatch(returnSuccess(res.data.message, res.status));
      });
    })
-    .catch((err) => {
+    .catch(err => {
      if (err.response) {
-        dispatch(
-          returnErrors(
-            err.response.data.message,
-            err.response.status,
-            "GET_TUTORIAL_FAIL"
-          )
-        );
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL'));
      }
      dispatch({ type: TUTORIAL_PROGRESS });
    });
 };

 export const getTutorials = () => (dispatch, getState) => {
-  axios
-    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
-    .then((res) => {
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
+    .then(res => {
      var tutorials = res.data.tutorials;
-      existingTutorials(tutorials, getState().tutorial.status).then(
-        (status) => {
+      console.log(tutorials);
+      existingTutorials(tutorials, getState().tutorial.status).then(status => {
        dispatch({
          type: TUTORIAL_SUCCESS,
-            payload: status,
+          payload: status
        });
+        console.log('zwei');
        dispatch(updateStatus(status));
        dispatch({
          type: GET_TUTORIALS,
-            payload: tutorials,
+          payload: tutorials
        });
        dispatch({ type: TUTORIAL_PROGRESS });
        dispatch(returnSuccess(res.data.message, res.status));
-        }
-      );
+      });
    })
-    .catch((err) => {
+    .catch(err => {
      if (err.response) {
-        dispatch(
-          returnErrors(
-            err.response.data.message,
-            err.response.status,
-            "GET_TUTORIALS_FAIL"
-          )
-        );
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL'));
      }
      dispatch({ type: TUTORIAL_PROGRESS });
    });
 };

-export const updateStatus = (status) => (dispatch, getState) => {
-  if (getState().auth.isAuthenticated) {
-    // update user account in database - sync with redux store
-    axios
-      .put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {
-        status: status,
+export const assigneBadge = (id) => (dispatch, getState) => {
+  const config = {
+    success: res => {
+      var badge = res.data.badge;
+      var user = getState().auth.user;
+      user.badges.push(badge._id);
+      dispatch({
+        type: MYBADGES_DISCONNECT,
+        payload: user
+      });
+      dispatch(returnSuccess(badge, res.status, 'ASSIGNE_BADGE_SUCCESS'));
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL'));
+    }
+  };
+  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge/${id}`, {}, config)
+    .then(res => {
+      res.config.success(res);
    })
-      .then((res) => {})
-      .catch((err) => {
-        if (err.response) {
+    .catch(err => {
+      if(err.response && err.response.status !== 401){
+        err.config.error(err);
+      }
+    });
+};
+
+export const updateStatus = (status) => (dispatch, getState) => {
+  if(getState().auth.isAuthenticated){
+    // update user account in database - sync with redux store
+    axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {status: status})
+      .then(res => {
+        // dispatch(returnSuccess(badge, res.status, 'UPDATE_STATUS_SUCCESS'));
+      })
+      .catch(err => {
+        if(err.response){
          // dispatch(returnErrors(err.response.data.message, err.response.status, 'UPDATE_STATUS_FAIL'));
        }
      });
  } else {
    // update locale storage - sync with redux store
-    window.localStorage.setItem("status", JSON.stringify(status));
+    window.localStorage.setItem('status', JSON.stringify(status));
  }
 };

@@ -107,77 +111,66 @@ export const deleteTutorial = (id) => (dispatch, getState) => {
  var tutorial = getState().tutorial;
  var id = getState().builder.id;
  const config = {
-    success: (res) => {
+    success: res => {
      var tutorials = tutorial.tutorials;
-      var index = tutorials.findIndex((res) => res._id === id);
-      tutorials.splice(index, 1);
+      var index = tutorials.findIndex(res => res._id === id);
+      tutorials.splice(index, 1)
      dispatch({
        type: GET_TUTORIALS,
-        payload: tutorials,
+        payload: tutorials
      });
-      dispatch(
-        returnSuccess(res.data.message, res.status, "TUTORIAL_DELETE_SUCCESS")
-      );
-    },
-    error: (err) => {
-      dispatch(
-        returnErrors(
-          err.response.data.message,
-          err.response.status,
-          "TUTORIAL_DELETE_FAIL"
-        )
-      );
+      dispatch(returnSuccess(res.data.message, res.status, 'TUTORIAL_DELETE_SUCCESS'));
    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'TUTORIAL_DELETE_FAIL'));
+    }
  };
-  axios
-    .delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config)
-    .then((res) => {
+  axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config)
+    .then(res => {
      res.config.success(res);
    })
-    .catch((err) => {
-      if (err.response && err.response.status !== 401) {
+    .catch(err => {
+      if(err.response && err.response.status !== 401){
        err.config.error(err);
      }
    });
 };

+
 export const resetTutorial = () => (dispatch) => {
  dispatch({
    type: GET_TUTORIALS,
-    payload: [],
+    payload: []
  });
  dispatch({
    type: TUTORIAL_STEP,
-    payload: 0,
+    payload: 0
  });
 };

 export const tutorialChange = () => (dispatch) => {
  dispatch({
-    type: TUTORIAL_CHANGE,
+    type: TUTORIAL_CHANGE
  });
 };

 export const tutorialCheck = (status, step) => (dispatch, getState) => {
  var tutorialsStatus = getState().tutorial.status;
  var id = getState().tutorial.tutorials[0]._id;
-  var tutorialsStatusIndex = tutorialsStatus.findIndex(
-    (tutorialStatus) => tutorialStatus._id === id
-  );
-  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(
-    (task) => task._id === step._id
-  );
+  var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus._id === id);
+  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task._id === step._id);
  tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
    ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
-    type: status,
+    type: status
  };
  dispatch({
-    type: status === "success" ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
-    payload: tutorialsStatus,
+    type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
+    payload: tutorialsStatus
  });
+  console.log('drei');
  dispatch(updateStatus(tutorialsStatus));
  dispatch(tutorialChange());
-  dispatch(returnSuccess("", "", "TUTORIAL_CHECK_SUCCESS"));
+  dispatch(returnSuccess('', '', 'TUTORIAL_CHECK_SUCCESS'));
 };

 export const storeTutorialXml = (code) => (dispatch, getState) => {
@@ -186,21 +179,17 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
    var id = tutorial._id;
    var activeStep = getState().tutorial.activeStep;
    var steps = tutorial.steps;
-    if (steps && steps[activeStep].type === "task") {
+    if (steps && steps[activeStep].type === 'task') {
      var tutorialsStatus = getState().tutorial.status;
-      var tutorialsStatusIndex = tutorialsStatus.findIndex(
-        (tutorialStatus) => tutorialStatus._id === id
-      );
-      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(
-        (task) => task._id === steps[activeStep]._id
-      );
+      var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus._id === id);
+      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task._id === steps[activeStep]._id);
      tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
        ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
-        xml: code,
+        xml: code
      };
      dispatch({
        type: TUTORIAL_XML,
-        payload: tutorialsStatus,
+        payload: tutorialsStatus
      });
      dispatch(updateStatus(tutorialsStatus));
    }
@@ -210,45 +199,38 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
 export const tutorialStep = (step) => (dispatch) => {
  dispatch({
    type: TUTORIAL_STEP,
-    payload: step,
+    payload: step
  });
 };

-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) {
    var existingTutorialIds = tutorials.map((tutorial, i) => {
-        existingTutorial(tutorial, status).then((status) => {
+      existingTutorial(tutorial, status).then(status => {
        newstatus = status;
      });
      return tutorial._id;
    });
-      resolve(existingTutorialIds);
-    }).then((existingTutorialIds) => {
+    resolve(existingTutorialIds)
+  }).then(existingTutorialIds => {
    // deleting old tutorials which do not longer exist
    if (existingTutorialIds.length > 0) {
-        status = newstatus.filter(
-          (status) => existingTutorialIds.indexOf(status._id) > -1
-        );
+      status = newstatus.filter(status => existingTutorialIds.indexOf(status._id) > -1);
    }
    resolve(status);
  });
-  });
+});

-const existingTutorial = (tutorial, status) =>
-  new Promise(function (resolve, reject) {
+const existingTutorial = (tutorial, status) => new Promise(function(resolve, reject){
  var tutorialsId = tutorial._id;
-    var statusIndex = status.findIndex((status) => status._id === tutorialsId);
+  var statusIndex = status.findIndex(status => status._id === tutorialsId);
  if (statusIndex > -1) {
-      var tasks = tutorial.steps.filter((step) => step.type === "task");
+    var tasks = tutorial.steps.filter(step => step.type === 'task');
    var existingTaskIds = tasks.map((task, j) => {
      var tasksId = task._id;
-        if (
-          status[statusIndex].tasks.findIndex(
-            (task) => task._id === tasksId
-          ) === -1
-        ) {
+      if (status[statusIndex].tasks.findIndex(task => task._id === tasksId) === -1) {
        // task does not exist
        status[statusIndex].tasks.push({ _id: tasksId });
      }
@@ -256,19 +238,11 @@ const existingTutorial = (tutorial, status) =>
    });
    // deleting old tasks which do not longer exist
    if (existingTaskIds.length > 0) {
-        status[statusIndex].tasks = status[statusIndex].tasks.filter(
-          (task) => existingTaskIds.indexOf(task._id) > -1
-        );
+      status[statusIndex].tasks = status[statusIndex].tasks.filter(task => existingTaskIds.indexOf(task._id) > -1);
    }
-    } else {
-      status.push({
-        _id: tutorialsId,
-        tasks: tutorial.steps
-          .filter((step) => step.type === "task")
-          .map((task) => {
-            return { _id: task._id };
-          }),
-      });
+  }
+  else {
+    status.push({ _id: tutorialsId, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { _id: task._id }; }) });
  }
  resolve(status);
-  });
+});
@@ -1,36 +1,24 @@
-import {
-  PROGRESS,
-  JSON_STRING,
-  BUILDER_CHANGE,
-  BUILDER_ERROR,
-  BUILDER_TITLE,
-  BUILDER_ID,
-  BUILDER_ADD_STEP,
-  BUILDER_DELETE_STEP,
-  BUILDER_CHANGE_STEP,
-  BUILDER_CHANGE_ORDER,
-  BUILDER_DELETE_PROPERTY,
-} from "./types";
+import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_ID, BUILDER_BADGE, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP, BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from './types';

-import data from "../data/hardware.json";
+import data from '../data/hardware.json';

 export const changeTutorialBuilder = () => (dispatch) => {
  dispatch({
-    type: BUILDER_CHANGE,
+    type: BUILDER_CHANGE
  });
 };

 export const jsonString = (json) => (dispatch) => {
  dispatch({
    type: JSON_STRING,
-    payload: json,
+    payload: json
  });
 };

 export const tutorialTitle = (title) => (dispatch) => {
  dispatch({
    type: BUILDER_TITLE,
-    payload: title,
+    payload: title
  });
  dispatch(changeTutorialBuilder());
 };
@@ -38,7 +26,7 @@ export const tutorialTitle = (title) => (dispatch) => {
 export const tutorialSteps = (steps) => (dispatch) => {
  dispatch({
    type: BUILDER_ADD_STEP,
-    payload: steps,
+    payload: steps
  });
  dispatch(changeTutorialBuilder());
 };
@@ -46,7 +34,15 @@ export const tutorialSteps = (steps) => (dispatch) => {
 export const tutorialId = (id) => (dispatch) => {
  dispatch({
    type: BUILDER_ID,
-    payload: id,
+    payload: id
+  });
+  dispatch(changeTutorialBuilder());
+};
+
+export const tutorialBadge = (badge) => (dispatch) => {
+  dispatch({
+    type: BUILDER_BADGE,
+    payload: badge
  });
  dispatch(changeTutorialBuilder());
 };
@@ -55,14 +51,14 @@ export const addStep = (index) => (dispatch, getState) => {
  var steps = getState().builder.steps;
  var step = {
    id: index + 1,
-    type: "instruction",
-    headline: "",
-    text: "",
+    type: 'instruction',
+    headline: '',
+    text: ''
  };
  steps.splice(index, 0, step);
  dispatch({
    type: BUILDER_ADD_STEP,
-    payload: steps,
+    payload: steps
  });
  dispatch(addErrorStep(index));
  dispatch(changeTutorialBuilder());
@@ -73,7 +69,7 @@ export const addErrorStep = (index) => (dispatch, getState) => {
  error.steps.splice(index, 0, {});
  dispatch({
    type: BUILDER_ERROR,
-    payload: error,
+    payload: error
  });
 };

@@ -82,7 +78,7 @@ export const removeStep = (index) => (dispatch, getState) => {
  steps.splice(index, 1);
  dispatch({
    type: BUILDER_DELETE_STEP,
-    payload: steps,
+    payload: steps
  });
  dispatch(removeErrorStep(index));
  dispatch(changeTutorialBuilder());
@@ -93,12 +89,11 @@ export const removeErrorStep = (index) => (dispatch, getState) => {
  error.steps.splice(index, 1);
  dispatch({
    type: BUILDER_ERROR,
-    payload: error,
+    payload: error
  });
 };

-export const changeContent =
-  (content, index, property1, property2) => (dispatch, getState) => {
+export const changeContent = (content, index, property1, property2) => (dispatch, getState) => {
  var steps = getState().builder.steps;
  var step = steps[index];
  if (property2) {
@@ -112,13 +107,12 @@ export const changeContent =
  }
  dispatch({
    type: BUILDER_CHANGE_STEP,
-      payload: steps,
+    payload: steps
  });
  dispatch(changeTutorialBuilder());
-  };
+};

-export const deleteProperty =
-  (index, property1, property2) => (dispatch, getState) => {
+export const deleteProperty = (index, property1, property2) => (dispatch, getState) => {
  var steps = getState().builder.steps;
  var step = steps[index];
  if (property2) {
@@ -130,10 +124,10 @@ export const deleteProperty =
  }
  dispatch({
    type: BUILDER_DELETE_PROPERTY,
-      payload: steps,
+    payload: steps
  });
  dispatch(changeTutorialBuilder());
-  };
+};

 export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
  var steps = getState().builder.steps;
@@ -142,34 +136,34 @@ export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
  steps.splice(toIndex, 0, step);
  dispatch({
    type: BUILDER_CHANGE_ORDER,
-    payload: steps,
+    payload: steps
  });
  dispatch(changeErrorStepIndex(fromIndex, toIndex));
  dispatch(changeTutorialBuilder());
 };

-export const changeErrorStepIndex =
-  (fromIndex, toIndex) => (dispatch, getState) => {
+export const changeErrorStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
  var error = getState().builder.error;
  var errorStep = error.steps[fromIndex];
  error.steps.splice(fromIndex, 1);
  error.steps.splice(toIndex, 0, errorStep);
  dispatch({
    type: BUILDER_ERROR,
-      payload: error,
+    payload: error
  });
-  };
+};

 export const setError = (index, property) => (dispatch, getState) => {
  var error = getState().builder.error;
  if (index !== undefined) {
    error.steps[index][property] = true;
-  } else {
+  }
+  else {
    error[property] = true;
  }
  dispatch({
    type: BUILDER_ERROR,
-    payload: error,
+    payload: error
  });
  dispatch(changeTutorialBuilder());
 };
@@ -178,12 +172,13 @@ export const deleteError = (index, property) => (dispatch, getState) => {
  var error = getState().builder.error;
  if (index !== undefined) {
    delete error.steps[index][property];
-  } else {
+  }
+  else {
    delete error[property];
  }
  dispatch({
    type: BUILDER_ERROR,
-    payload: error,
+    payload: error
  });
  dispatch(changeTutorialBuilder());
 };
@@ -193,11 +188,11 @@ export const setSubmitError = () => (dispatch, getState) => {
  // if(builder.id === undefined || builder.id === ''){
  //   dispatch(setError(undefined, 'id'));
  // }
-  if (builder.title === "") {
-    dispatch(setError(undefined, "title"));
+  if (builder.title === '') {
+    dispatch(setError(undefined, 'title'));
  }
  if (builder.title === null) {
-    dispatch(setError(undefined, "title"));
+    dispatch(setError(undefined, 'badge'));
  }
  var type = builder.steps.map((step, i) => {
    // media and xml are directly checked for errors in their components and
@@ -205,82 +200,76 @@ export const setSubmitError = () => (dispatch, getState) => {
    step.id = i + 1;
    if (i === 0) {
      if (step.requirements && step.requirements.length > 0) {
-        var requirements = step.requirements.filter((requirement) =>
-          /^[0-9a-fA-F]{24}$/.test(requirement)
-        );
+        var requirements = step.requirements.filter(requirement => /^[0-9a-fA-F]{24}$/.test(requirement));
        if (requirements.length < step.requirements.length) {
-          dispatch(changeContent(requirements, i, "requirements"));
+          dispatch(changeContent(requirements, i, 'requirements'));
        }
      }
      if (step.hardware === undefined || step.hardware.length < 1) {
-        dispatch(setError(i, "hardware"));
-      } else {
-        var hardwareIds = data.map((hardware) => hardware.id);
-        var hardware = step.hardware.filter((hardware) =>
-          hardwareIds.includes(hardware)
-        );
+        dispatch(setError(i, 'hardware'));
+      }
+      else {
+        var hardwareIds = data.map(hardware => hardware.id);
+        var hardware = step.hardware.filter(hardware => hardwareIds.includes(hardware));
        if (hardware.length < step.hardware.length) {
-          dispatch(changeContent(hardware, i, "hardware"));
+          dispatch(changeContent(hardware, i, 'hardware'));
        }
      }
    }
-    if (step.headline === undefined || step.headline === "") {
-      dispatch(setError(i, "headline"));
+    if (step.headline === undefined || step.headline === '') {
+      dispatch(setError(i, 'headline'));
    }
-    if (step.text === undefined || step.text === "") {
-      dispatch(setError(i, "text"));
+    if (step.text === undefined || step.text === '') {
+      dispatch(setError(i, 'text'));
    }
    return step.type;
  });
-  if (
-    !(
-      type.filter((item) => item === "task").length > 0 &&
-      type.filter((item) => item === "instruction").length > 0
-    )
-  ) {
-    dispatch(setError(undefined, "type"));
+  if (!(type.filter(item => item === 'task').length > 0 && type.filter(item => item === 'instruction').length > 0)) {
+    dispatch(setError(undefined, 'type'));
  }
 };

+
 export const checkError = () => (dispatch, getState) => {
  dispatch(setSubmitError());
  var error = getState().builder.error;
-  if (error.id || error.title || error.type) {
+  if (error.id || error.title || error.badge ||error.type) {
    return true;
  }
  for (var i = 0; i < error.steps.length; i++) {
    if (Object.keys(error.steps[i]).length > 0) {
-      return true;
+      return true
    }
  }
  return false;
-};
+}

 export const progress = (inProgress) => (dispatch) => {
  dispatch({
    type: PROGRESS,
-    payload: inProgress,
-  });
+    payload: inProgress
+  })
 };

 export const resetTutorial = () => (dispatch, getState) => {
-  dispatch(jsonString(""));
-  dispatch(tutorialTitle(""));
+  dispatch(jsonString(''));
+  dispatch(tutorialTitle(''));
+  dispatch(tutorialBadge(undefined));
  var steps = [
    {
-      type: "instruction",
-      headline: "",
-      text: "",
+      type: 'instruction',
+      headline: '',
+      text: '',
      hardware: [],
-      requirements: [],
-    },
+      requirements: []
+    }
  ];
  dispatch(tutorialSteps(steps));
  dispatch({
    type: BUILDER_ERROR,
    payload: {
-      steps: [{}],
-    },
+      steps: [{}]
+    }
  });
 };

@@ -289,10 +278,8 @@ export const readJSON = (json) => (dispatch, getState) => {
  dispatch({
    type: BUILDER_ERROR,
    payload: {
-      steps: json.steps.map(() => {
-        return {};
-      }),
-    },
+      steps: json.steps.map(() => { return {}; })
+    }
  });
  // accept only valid attributes
  var steps = json.steps.map((step, i) => {
@@ -300,7 +287,7 @@ export const readJSON = (json) => (dispatch, getState) => {
      _id: step._id,
      type: step.type,
      headline: step.headline,
-      text: step.text,
+      text: step.text
    };
    if (i === 0) {
      object.hardware = step.hardware;
@@ -309,17 +296,19 @@ export const readJSON = (json) => (dispatch, getState) => {
    if (step.xml) {
      object.xml = step.xml;
    }
-    if (step.media && step.type === "instruction") {
+    if (step.media && step.type === 'instruction') {
      object.media = {};
      if (step.media.picture) {
        object.media.picture = step.media.picture;
-      } else if (step.media.youtube) {
+      }
+      else if (step.media.youtube) {
        object.media.youtube = step.media.youtube;
      }
    }
    return object;
  });
  dispatch(tutorialTitle(json.title));
+  dispatch(tutorialBadge(json.badge));
  dispatch(tutorialSteps(steps));
  dispatch(setSubmitError());
  dispatch(progress(false));
@@ -1,59 +1,65 @@
 // authentication
-export const USER_LOADING = "USER_LOADING";
-export const USER_LOADED = "USER_LOADED";
-export const AUTH_ERROR = "AUTH_ERROR";
-export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
-export const LOGIN_FAIL = "LOGIN_FAIL";
-export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
-export const LOGOUT_FAIL = "LOGOUT_FAIL";
-export const REFRESH_TOKEN_FAIL = "REFRESH_TOKEN_FAIL";
-export const REFRESH_TOKEN_SUCCESS = "REFRESH_TOKEN_SUCCESS";
+export const USER_LOADING = 'USER_LOADING';
+export const USER_LOADED = 'USER_LOADED';
+export const AUTH_ERROR = 'AUTH_ERROR';
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
+export const LOGIN_FAIL = 'LOGIN_FAIL';
+export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
+export const LOGOUT_FAIL = 'LOGOUT_FAIL';
+export const REFRESH_TOKEN_FAIL = 'REFRESH_TOKEN_FAIL';
+export const REFRESH_TOKEN_SUCCESS = 'REFRESH_TOKEN_SUCCESS';
+export const MYBADGES_CONNECT = 'MYBADGES_CONNECT';
+export const MYBADGES_DISCONNECT = 'MYBADGES_DISCONNECT';

-export const NEW_CODE = "NEW_CODE";
-export const CHANGE_WORKSPACE = "CHANGE_WORKSPACE";
-export const CREATE_BLOCK = "CREATE_BLOCK";
-export const MOVE_BLOCK = "MOVE_BLOCK";
-export const CHANGE_BLOCK = "CHANGE_BLOCK";
-export const DELETE_BLOCK = "DELETE_BLOCK";
-export const CLEAR_STATS = "CLEAR_STATS";
-export const NAME = "NAME";
+export const NEW_CODE = 'NEW_CODE';
+export const CHANGE_WORKSPACE = 'CHANGE_WORKSPACE';
+export const CREATE_BLOCK = 'CREATE_BLOCK';
+export const MOVE_BLOCK = 'MOVE_BLOCK';
+export const CHANGE_BLOCK = 'CHANGE_BLOCK';
+export const DELETE_BLOCK = 'DELETE_BLOCK';
+export const CLEAR_STATS = 'CLEAR_STATS';
+export const NAME = 'NAME';

-export const TUTORIAL_PROGRESS = "TUTORIAL_PROGRESS";
-export const GET_TUTORIAL = "GET_TUTORIAL";
-export const GET_TUTORIALS = "GET_TUTORIALS";
-export const GET_STATUS = "GET_STATUS";
-export const TUTORIAL_SUCCESS = "TUTORIAL_SUCCESS";
-export const TUTORIAL_ERROR = "TUTORIAL_ERROR";
-export const TUTORIAL_CHANGE = "TUTORIAL_CHANGE";
-export const TUTORIAL_XML = "TUTORIAL_XML";
-export const TUTORIAL_ID = "TUTORIAL_ID";
-export const TUTORIAL_STEP = "TUTORIAL_STEP";
-export const JSON_STRING = "JSON_STRING";
+export const TUTORIAL_PROGRESS = 'TUTORIAL_PROGRESS';
+export const GET_TUTORIAL = 'GET_TUTORIAL';
+export const GET_TUTORIALS = 'GET_TUTORIALS';
+export const GET_STATUS = 'GET_STATUS';
+export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS';
+export const TUTORIAL_ERROR = 'TUTORIAL_ERROR';
+export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE';
+export const TUTORIAL_XML = 'TUTORIAL_XML';
+export const TUTORIAL_ID = 'TUTORIAL_ID';
+export const TUTORIAL_STEP = 'TUTORIAL_STEP';
+export const JSON_STRING = 'JSON_STRING';

-export const BUILDER_CHANGE = "BUILDER_CHANGE";
-export const BUILDER_TITLE = "BUILDER_TITLE";
-export const BUILDER_ID = "BUILDER_ID";
-export const BUILDER_ADD_STEP = "BUILDER_ADD_STEP";
-export const BUILDER_DELETE_STEP = "BUILDER_DELETE_STEP";
-export const BUILDER_CHANGE_STEP = "BUILDER_CHANGE_STEP";
-export const BUILDER_CHANGE_ORDER = "BUILDER_CHANGE_ORDER";
-export const BUILDER_DELETE_PROPERTY = "BUILDER_DELETE_PROPERTY";
-export const BUILDER_ERROR = "BUILDER_ERROR";
-export const PROGRESS = "PROGRESS";

-export const VISIT = "VISIT";
-export const LANGUAGE = "LANGUAGE";
-export const RENDERER = "RENDERER";
-export const STATISTICS = "STATISTICS";
+export const BUILDER_CHANGE = 'BUILDER_CHANGE';
+export const BUILDER_TITLE = 'BUILDER_TITLE';
+export const BUILDER_BADGE = 'BUILDER_BADGE';
+export const BUILDER_ID = 'BUILDER_ID';
+export const BUILDER_ADD_STEP = 'BUILDER_ADD_STEP';
+export const BUILDER_DELETE_STEP = 'BUILDER_DELETE_STEP';
+export const BUILDER_CHANGE_STEP = 'BUILDER_CHANGE_STEP';
+export const BUILDER_CHANGE_ORDER = 'BUILDER_CHANGE_ORDER';
+export const BUILDER_DELETE_PROPERTY = 'BUILDER_DELETE_PROPERTY';
+export const BUILDER_ERROR = 'BUILDER_ERROR';
+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";
-export const GET_SUCCESS = "GET_SUCCESS";
-export const CLEAR_MESSAGES = "CLEAR_MESSAGES";
+export const GET_ERRORS = 'GET_ERRORS';
+export const GET_SUCCESS = 'GET_SUCCESS';
+export const CLEAR_MESSAGES = 'CLEAR_MESSAGES';
+

 // projects: share, gallery, project
-export const PROJECT_PROGRESS = "PROJECT_PROGRESS";
-export const GET_PROJECT = "GET_PROJECT";
-export const GET_PROJECTS = "GET_PROJECTS";
-export const PROJECT_TYPE = "PROJECT_TYPE";
-export const PROJECT_DESCRIPTION = "PROJECT_DESCRIPTION";
+export const PROJECT_PROGRESS = 'PROJECT_PROGRESS';
+export const GET_PROJECT = 'GET_PROJECT';
+export const GET_PROJECTS = 'GET_PROJECTS';
+export const PROJECT_TYPE = 'PROJECT_TYPE';
+export const PROJECT_DESCRIPTION = 'PROJECT_DESCRIPTION';
@@ -17,6 +17,7 @@ export const onChangeCode = () => (dispatch, getState) => {
  var xmlDom = Blockly.Xml.workspaceToDom(workspace);
  code.xml = Blockly.Xml.domToPrettyText(xmlDom);
  var selectedBlock = Blockly.selected
+  console.log(selectedBlock)
  if (selectedBlock !== null) {
    code.helpurl = selectedBlock.helpUrl
    code.tooltip = selectedBlock.tooltip
@@ -21,20 +21,18 @@
 * @author samelh@google.com (Sam El-Husseini)
 */

-import React from "react";
+import React from 'react';
+
+import Blockly from 'blockly/core';
+import 'blockly/blocks';
+import Toolbox from './toolbox/Toolbox';
+
+import { Card } from '@material-ui/core';

-import Blockly from "blockly/core";
-import "blockly/blocks";
-import Toolbox from "./toolbox/Toolbox";

-import { Card } from "@material-ui/core";
-import {
-  ScrollOptions,
-  ScrollBlockDragger,
-  ScrollMetricsManager,
-} from "@blockly/plugin-scroll-options";

 class BlocklyComponent extends React.Component {
+
    constructor(props) {
        super(props);
        this.blocklyDiv = React.createRef();
@@ -44,25 +42,17 @@ class BlocklyComponent extends React.Component {

    componentDidMount() {
        const { initialXml, children, ...rest } = this.props;
-    this.primaryWorkspace = Blockly.inject(this.blocklyDiv.current, {
+        this.primaryWorkspace = Blockly.inject(
+            this.blocklyDiv.current,
+            {
                toolbox: this.toolbox.current,
-      plugins: {
-        // These are both required.
-        blockDragger: ScrollBlockDragger,
-        metricsManager: ScrollMetricsManager,
+                ...rest
            },
-      ...rest,
-    });
-    // Initialize plugin.
-
-    this.setState({ workspace: this.primaryWorkspace });
-    const plugin = new ScrollOptions(this.workspace);
-    plugin.init({ enableWheelScroll: true, enableEdgeScroll: false });
-    if (initialXml) {
-      Blockly.Xml.domToWorkspace(
-        Blockly.Xml.textToDom(initialXml),
-        this.primaryWorkspace
        );
+        this.setState({ workspace: this.primaryWorkspace })
+
+        if (initialXml) {
+            Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), this.primaryWorkspace);
        }
    }

@@ -71,23 +61,14 @@ class BlocklyComponent extends React.Component {
    }

    setXml(xml) {
-    Blockly.Xml.domToWorkspace(
-      Blockly.Xml.textToDom(xml),
-      this.primaryWorkspace
-    );
+        Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), this.primaryWorkspace);
    }

    render() {
-    return (
-      <React.Fragment>
-        <Card
-          ref={this.blocklyDiv}
-          id="blocklyDiv"
-          style={this.props.style ? this.props.style : {}}
-        />
+        return <React.Fragment>
+            <Card ref={this.blocklyDiv} id="blocklyDiv" style={this.props.style ? this.props.style : {}} />
            <Toolbox toolbox={this.toolbox} workspace={this.state.workspace} />
-      </React.Fragment>
-    );
+        </React.Fragment>;
    }
 }

@@ -1,18 +1,20 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { onChangeWorkspace, clearStats } from "../../actions/workspaceActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { onChangeWorkspace, clearStats } from '../../actions/workspaceActions';

-import BlocklyComponent from "./BlocklyComponent";
-import BlocklySvg from "./BlocklySvg";
+import BlocklyComponent from './BlocklyComponent';
+import BlocklySvg from './BlocklySvg';
+
+import * as Blockly from 'blockly/core';
+import './blocks/index';
+import './generator/index';
+
+import { initialXml } from './initialXml.js';

-import * as Blockly from "blockly/core";
-import "./blocks/index";
-import "./generator/index";
-import { ZoomToFitControl } from "@blockly/zoom-to-fit";
-import { initialXml } from "./initialXml.js";

 class BlocklyWindow extends Component {
+
  constructor(props) {
    super(props);
    this.simpleWorkspace = React.createRef();
@@ -31,8 +33,6 @@ class BlocklyWindow extends Component {
      }
    });
    Blockly.svgResize(workspace);
-    const zoomToFit = new ZoomToFitControl(workspace);
-    zoomToFit.init();
  }

  componentDidUpdate(props) {
@@ -51,82 +51,62 @@ class BlocklyWindow extends Component {
      var xmlDom = Blockly.Xml.textToDom(xml);
      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
      // var toolbox = workspace.getToolbox();
+      // console.log(toolbox);
      // workspace.updateToolbox(toolbox.toolboxDef_);
    }
    Blockly.svgResize(workspace);
+
  }

  render() {
    return (
      <div>
-        <BlocklyComponent
-          ref={this.simpleWorkspace}
+        <BlocklyComponent ref={this.simpleWorkspace}
          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
-          }
+          readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
+          trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
          renderer={this.props.renderer}
-          zoom={{
-            // https://developers.google.com/blockly/guides/configure/web/zoom
-            controls:
-              this.props.zoomControls !== undefined
-                ? this.props.zoomControls
-                : true,
+          zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
+            controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
            wheel: false,
            startScale: 1,
            maxScale: 3,
            minScale: 0.3,
-            scaleSpeed: 1.2,
+            scaleSpeed: 1.2
          }}
-          grid={
-            this.props.grid !== undefined && !this.props.grid
-              ? {}
-              : {
-                  // https://developers.google.com/blockly/guides/configure/web/grid
+          grid={this.props.grid !== undefined && !this.props.grid ? {} :
+            { // https://developers.google.com/blockly/guides/configure/web/grid
              spacing: 20,
              length: 1,
-                  colour: "#4EAF47", // senseBox-green
-                  snap: false,
-                }
-          }
-          media={"/media/blockly/"}
-          move={
-            this.props.move !== undefined && !this.props.move
-              ? {}
-              : {
-                  // https://developers.google.com/blockly/guides/configure/web/move
+              colour: '#4EAF47', // senseBox-green
+              snap: false
+            }}
+          media={'/media/blockly/'}
+          move={this.props.move !== undefined && !this.props.move ? {} :
+            { // https://developers.google.com/blockly/guides/configure/web/move
              scrollbars: true,
              drag: true,
-                  wheel: true,
-                }
-          }
-          initialXml={
-            this.props.initialXml ? this.props.initialXml : initialXml
-          }
-        ></BlocklyComponent>
-        {this.props.svg && this.props.initialXml ? (
-          <BlocklySvg initialXml={this.props.initialXml} />
-        ) : null}
+              wheel: false
+            }}
+          initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
+        >
+        </BlocklyComponent >
+        {this.props.svg && this.props.initialXml ? <BlocklySvg initialXml={this.props.initialXml} /> : null}
      </div>
    );
-  }
+  };
 }

 BlocklyWindow.propTypes = {
  onChangeWorkspace: PropTypes.func.isRequired,
  clearStats: PropTypes.func.isRequired,
  renderer: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired
 };

-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  renderer: state.general.renderer,
-  language: state.general.language,
+  language: state.general.language
 });

-export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(
-  BlocklyWindow
-);
+export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow);
@@ -1,26 +1,24 @@
-import "./loops";
-import "./sensebox";
-import "./logic";
-import "./sensebox-sensors";
-import "./sensebox-telegram";
-import "./sensebox-osem";
-import "./sensebox-web";
-import "./sensebox-display";
-import "./sensebox-lora";
-import "./sensebox-led";
-import "./sensebox-rtc";
-import "./sensebox-ble";
-import "./sensebox-sd";
-import "./mqtt";
-import "./text";
-import "./io";
-import "./audio";
-import "./math";
-import "./map";
-import "./procedures";
-import "./time";
-import "./variables";
-import "./lists";
-import "./webserver";
+import './loops';
+import './sensebox';
+import './logic';
+import './sensebox-sensors';
+import './sensebox-telegram';
+import './sensebox-osem';
+import './sensebox-web';
+import './sensebox-display';
+import './sensebox-lora';
+import './sensebox-led';
+import './sensebox-sd';
+import './mqtt';
+import './text';
+import './io';
+import './audio';
+import './math';
+import './map';
+import './procedures';
+import './time';
+import './variables';
+import './lists';
+import './webserver';

-import "../helpers/types";
+import '../helpers/types'
@@ -1,11 +1,9 @@
-import Blockly from 'blockly/core';
-import { getColour } from '../helpers/colour';
-import * as Types from '../helpers/types';
-import { getCompatibleTypes } from '../helpers/types';
+import Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
+import { getCompatibleTypes } from "../helpers/types";

-
-
-Blockly.Blocks['controls_if'] = {
+Blockly.Blocks["controls_if"] = {
  /**
   * Block for if/elseif/else condition.
   * @this Blockly.Block
@@ -13,15 +11,17 @@ Blockly.Blocks['controls_if'] = {
  init: function () {
    this.setHelpUrl(Blockly.Msg.CONTROLS_IF_HELPURL);
    this.setColour(getColour().logic);
-        this.appendValueInput('IF0')
-            .setCheck(Types.getCompatibleTypes('boolean'))
+    this.appendValueInput("IF0")
+      .setCheck(Types.getCompatibleTypes("boolean"))
      .appendField(Blockly.Msg.CONTROLS_IF_MSG_IF);
-        this.appendStatementInput('DO0')
-            .appendField(Blockly.Msg.CONTROLS_IF_MSG_THEN);
+    this.appendStatementInput("DO0").appendField(
+      Blockly.Msg.CONTROLS_IF_MSG_THEN
+    );
    this.setPreviousStatement(true);
    this.setNextStatement(true);
-        this.setMutator(new Blockly.Mutator(['controls_if_elseif',
-            'controls_if_else']));
+    this.setMutator(
+      new Blockly.Mutator(["controls_if_elseif", "controls_if_else"])
+    );
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function () {
@@ -34,7 +34,7 @@ Blockly.Blocks['controls_if'] = {
      } else if (thisBlock.elseifCount_ && thisBlock.elseCount_) {
        return Blockly.Msg.CONTROLS_IF_TOOLTIP_4;
      }
-            return '';
+      return "";
    });
    this.elseifCount_ = 0;
    this.elseCount_ = 0;
@@ -48,12 +48,12 @@ Blockly.Blocks['controls_if'] = {
    if (!this.elseifCount_ && !this.elseCount_) {
      return null;
    }
-        var container = document.createElement('mutation');
+    var container = document.createElement("mutation");
    if (this.elseifCount_) {
-            container.setAttribute('elseif', this.elseifCount_);
+      container.setAttribute("elseif", this.elseifCount_);
    }
    if (this.elseCount_) {
-            container.setAttribute('else', 1);
+      container.setAttribute("else", 1);
    }
    return container;
  },
@@ -63,8 +63,8 @@ Blockly.Blocks['controls_if'] = {
   * @this Blockly.Block
   */
  domToMutation: function (xmlElement) {
-        this.elseifCount_ = parseInt(xmlElement.getAttribute('elseif'), 10) || 0;
-        this.elseCount_ = parseInt(xmlElement.getAttribute('else'), 10) || 0;
+    this.elseifCount_ = parseInt(xmlElement.getAttribute("elseif"), 10) || 0;
+    this.elseCount_ = parseInt(xmlElement.getAttribute("else"), 10) || 0;
    this.updateShape_();
  },
  /**
@@ -74,17 +74,17 @@ Blockly.Blocks['controls_if'] = {
   * @this Blockly.Block
   */
  decompose: function (workspace) {
-        var containerBlock = workspace.newBlock('controls_if_if');
+    var containerBlock = workspace.newBlock("controls_if_if");
    containerBlock.initSvg();
    var connection = containerBlock.nextConnection;
    for (var i = 1; i <= this.elseifCount_; i++) {
-            var elseifBlock = workspace.newBlock('controls_if_elseif');
+      var elseifBlock = workspace.newBlock("controls_if_elseif");
      elseifBlock.initSvg();
      connection.connect(elseifBlock.previousConnection);
      connection = elseifBlock.nextConnection;
    }
    if (this.elseCount_) {
-            var elseBlock = workspace.newBlock('controls_if_else');
+      var elseBlock = workspace.newBlock("controls_if_else");
      elseBlock.initSvg();
      connection.connect(elseBlock.previousConnection);
    }
@@ -105,28 +105,28 @@ Blockly.Blocks['controls_if'] = {
    var elseStatementConnection = null;
    while (clauseBlock) {
      switch (clauseBlock.type) {
-                case 'controls_if_elseif':
+        case "controls_if_elseif":
          this.elseifCount_++;
          valueConnections.push(clauseBlock.valueConnection_);
          statementConnections.push(clauseBlock.statementConnection_);
          break;
-                case 'controls_if_else':
+        case "controls_if_else":
          this.elseCount_++;
          elseStatementConnection = clauseBlock.statementConnection_;
          break;
        default:
-                    throw new Error('Unknown block type.');
+          throw new Error("Unknown block type.");
      }
-            clauseBlock = clauseBlock.nextConnection &&
-                clauseBlock.nextConnection.targetBlock();
+      clauseBlock =
+        clauseBlock.nextConnection && clauseBlock.nextConnection.targetBlock();
    }
    this.updateShape_();
    // Reconnect any child blocks.
    for (var i = 1; i <= this.elseifCount_; i++) {
-            Blockly.Mutator.reconnect(valueConnections[i], this, 'IF' + i);
-            Blockly.Mutator.reconnect(statementConnections[i], this, 'DO' + i);
+      Blockly.Mutator.reconnect(valueConnections[i], this, "IF" + i);
+      Blockly.Mutator.reconnect(statementConnections[i], this, "DO" + i);
    }
-        Blockly.Mutator.reconnect(elseStatementConnection, this, 'ELSE');
+    Blockly.Mutator.reconnect(elseStatementConnection, this, "ELSE");
  },
  /**
   * Store pointers to any connected child blocks.
@@ -139,25 +139,25 @@ Blockly.Blocks['controls_if'] = {
    var inputDo;
    while (clauseBlock) {
      switch (clauseBlock.type) {
-                case 'controls_if_elseif':
-                    var inputIf = this.getInput('IF' + i);
-                    inputDo = this.getInput('DO' + i);
+        case "controls_if_elseif":
+          var inputIf = this.getInput("IF" + i);
+          inputDo = this.getInput("DO" + i);
          clauseBlock.valueConnection_ =
            inputIf && inputIf.connection.targetConnection;
          clauseBlock.statementConnection_ =
            inputDo && inputDo.connection.targetConnection;
          i++;
          break;
-                case 'controls_if_else':
-                    inputDo = this.getInput('ELSE');
+        case "controls_if_else":
+          inputDo = this.getInput("ELSE");
          clauseBlock.statementConnection_ =
            inputDo && inputDo.connection.targetConnection;
          break;
        default:
-                    throw new Error('Unknown block type.');
+          throw new Error("Unknown block type.");
      }
-            clauseBlock = clauseBlock.nextConnection &&
-                clauseBlock.nextConnection.targetBlock();
+      clauseBlock =
+        clauseBlock.nextConnection && clauseBlock.nextConnection.targetBlock();
    }
  },
  /**
@@ -167,290 +167,296 @@ Blockly.Blocks['controls_if'] = {
   */
  updateShape_: function () {
    // Delete everything.
-        if (this.getInput('ELSE')) {
-            this.removeInput('ELSE');
+    if (this.getInput("ELSE")) {
+      this.removeInput("ELSE");
    }
    var j = 1;
-        while (this.getInput('IF' + j)) {
-            this.removeInput('IF' + j);
-            this.removeInput('DO' + j);
+    while (this.getInput("IF" + j)) {
+      this.removeInput("IF" + j);
+      this.removeInput("DO" + j);
      j++;
    }
    // Rebuild block.
    for (var i = 1; i <= this.elseifCount_; i++) {
-            this.appendValueInput('IF' + i)
-                .setCheck(Types.getCompatibleTypes('boolean'))
+      this.appendValueInput("IF" + i)
+        .setCheck(Types.getCompatibleTypes("boolean"))
        .appendField(Blockly.Msg.CONTROLS_IF_MSG_ELSEIF);
-            this.appendStatementInput('DO' + i)
-                .appendField(Blockly.Msg.CONTROLS_IF_MSG_THEN);
+      this.appendStatementInput("DO" + i).appendField(
+        Blockly.Msg.CONTROLS_IF_MSG_THEN
+      );
    }
    if (this.elseCount_) {
-            this.appendStatementInput('ELSE')
-                .appendField(Blockly.Msg.CONTROLS_IF_MSG_ELSE);
-        }
+      this.appendStatementInput("ELSE").appendField(
+        Blockly.Msg.CONTROLS_IF_MSG_ELSE
+      );
    }
+  },
 };

-Blockly.Blocks['controls_if_if'] = {
+Blockly.Blocks["controls_if_if"] = {
  /**
   * Mutator block for if container.
   * @this Blockly.Block
   */
  init: function () {
    this.setColour(getColour().logic);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.CONTROLS_IF_IF_TITLE_IF);
+    this.appendDummyInput().appendField(Blockly.Msg.CONTROLS_IF_IF_TITLE_IF);
    this.setNextStatement(true);
    this.setTooltip(Blockly.Msg.CONTROLS_IF_IF_TOOLTIP);
    this.contextMenu = false;
-    }
+  },
 };

-Blockly.Blocks['controls_if_elseif'] = {
+Blockly.Blocks["controls_if_elseif"] = {
  /**
   * Mutator bolck for else-if condition.
   * @this Blockly.Block
   */
  init: function () {
    this.setColour(getColour().logic);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.CONTROLS_IF_ELSEIF_TITLE_ELSEIF);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.CONTROLS_IF_ELSEIF_TITLE_ELSEIF
+    );
    this.setPreviousStatement(true);
    this.setNextStatement(true);
    this.setTooltip(Blockly.Msg.CONTROLS_IF_ELSEIF_TOOLTIP);
    this.contextMenu = false;
-    }
+  },
 };

-Blockly.Blocks['controls_if_else'] = {
+Blockly.Blocks["controls_if_else"] = {
  /**
   * Mutator block for else condition.
   * @this Blockly.Block
   */
  init: function () {
    this.setColour(getColour().logic);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.CONTROLS_IF_ELSE_TITLE_ELSE);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.CONTROLS_IF_ELSE_TITLE_ELSE
+    );
    this.setPreviousStatement(true);
    this.setTooltip(Blockly.Msg.CONTROLS_IF_ELSE_TOOLTIP);
    this.contextMenu = false;
-    }
+  },
 };

-
-Blockly.defineBlocksWithJsonArray([  // BEGIN JSON EXTRACT
+Blockly.defineBlocksWithJsonArray([
+  // BEGIN JSON EXTRACT
  // Block for boolean data type: true and false.
  {
-        "type": "logic_boolean",
-        "message0": "%1",
-        "args0": [
+    type: "logic_boolean",
+    message0: "%1",
+    args0: [
      {
-                "type": "field_dropdown",
-                "name": "BOOL",
-                "options": [
+        type: "field_dropdown",
+        name: "BOOL",
+        options: [
          ["%{BKY_LOGIC_BOOLEAN_TRUE}", "TRUE"],
-                    ["%{BKY_LOGIC_BOOLEAN_FALSE}", "FALSE"]
-                ]
-            }
+          ["%{BKY_LOGIC_BOOLEAN_FALSE}", "FALSE"],
        ],
-        "output": Types.BOOLEAN.typeName,
-        "style": "logic_blocks",
-        "tooltip": "%{BKY_LOGIC_BOOLEAN_TOOLTIP}",
-        "helpUrl": "%{BKY_LOGIC_BOOLEAN_HELPURL}"
+      },
+    ],
+    output: Types.BOOLEAN.typeName,
+    style: "logic_blocks",
+    tooltip: "%{BKY_LOGIC_BOOLEAN_TOOLTIP}",
+    helpUrl: "%{BKY_LOGIC_BOOLEAN_HELPURL}",
  },
  {
-        "type": "controls_ifelse",
-        "message0": "%{BKY_CONTROLS_IF_MSG_IF} %1",
-        "args0": [
+    type: "controls_ifelse",
+    message0: "%{BKY_CONTROLS_IF_MSG_IF} %1",
+    args0: [
      {
-                "type": "input_value",
-                "name": "IF0",
-                "check": Types.getCompatibleTypes('boolean')
-            }
+        type: "input_value",
+        name: "IF0",
+        check: Types.getCompatibleTypes("boolean"),
+      },
    ],
-        "message1": "%{BKY_CONTROLS_IF_MSG_THEN} %1",
-        "args1": [
+    message1: "%{BKY_CONTROLS_IF_MSG_THEN} %1",
+    args1: [
      {
-                "type": "input_statement",
-                "name": "DO0"
-            }
+        type: "input_statement",
+        name: "DO0",
+      },
    ],
-        "message2": "%{BKY_CONTROLS_IF_MSG_ELSE} %1",
-        "args2": [
+    message2: "%{BKY_CONTROLS_IF_MSG_ELSE} %1",
+    args2: [
      {
-                "type": "input_statement",
-                "name": "ELSE"
-            }
+        type: "input_statement",
+        name: "ELSE",
+      },
    ],
-        "previousStatement": null,
-        "nextStatement": null,
-        "style": "logic_blocks",
-        "tooltip": "%{BKYCONTROLS_IF_TOOLTIP_2}",
-        "helpUrl": "%{BKY_CONTROLS_IF_HELPURL}",
-        "extensions": ["controls_if_tooltip"]
+    previousStatement: null,
+    nextStatement: null,
+    style: "logic_blocks",
+    tooltip: "%{BKYCONTROLS_IF_TOOLTIP_2}",
+    helpUrl: "%{BKY_CONTROLS_IF_HELPURL}",
+    extensions: ["controls_if_tooltip"],
  },
  // Block for comparison operator.
  {
-        "type": "logic_compare",
-        "message0": "%1 %2 %3",
-        "args0": [
+    type: "logic_compare",
+    message0: "%1 %2 %3",
+    args0: [
      {
-                "type": "input_value",
-                "name": "A"
+        type: "input_value",
+        name: "A",
      },
      {
-                "type": "field_dropdown",
-                "name": "OP",
-                "options": [
+        type: "field_dropdown",
+        name: "OP",
+        options: [
          ["=", "EQ"],
          ["\u2260", "NEQ"],
          ["\u200F<", "LT"],
          ["\u200F\u2264", "LTE"],
          ["\u200F>", "GT"],
-                    ["\u200F\u2265", "GTE"]
-                ]
+          ["\u200F\u2265", "GTE"],
+        ],
      },
      {
-                "type": "input_value",
-                "name": "B"
-            }
+        type: "input_value",
+        name: "B",
+      },
    ],
-        "inputsInline": true,
-        "output": Types.BOOLEAN.typeName,
-        "style": "logic_blocks",
-        "helpUrl": "%{BKY_LOGIC_COMPARE_HELPURL}",
-        "extensions": ["logic_compare", "logic_op_tooltip"]
+    inputsInline: true,
+    output: Types.BOOLEAN.typeName,
+    style: "logic_blocks",
+    helpUrl: "%{BKY_LOGIC_COMPARE_HELPURL}",
+    extensions: ["logic_compare", "logic_op_tooltip"],
  },
  // Block for logical operations: 'and', 'or'.
  {
-        "type": "logic_operation",
-        "message0": "%1 %2 %3",
-        "args0": [
+    type: "logic_operation",
+    message0: "%1 %2 %3",
+    args0: [
      {
-                "type": "input_value",
-                "name": "A",
-                "check": Types.getCompatibleTypes('boolean')
+        type: "input_value",
+        name: "A",
+        check: Types.getCompatibleTypes("boolean"),
      },
      {
-                "type": "field_dropdown",
-                "name": "OP",
-                "options": [
+        type: "field_dropdown",
+        name: "OP",
+        options: [
          ["%{BKY_LOGIC_OPERATION_AND}", "AND"],
-                    ["%{BKY_LOGIC_OPERATION_OR}", "OR"]
-                ]
+          ["%{BKY_LOGIC_OPERATION_OR}", "OR"],
+        ],
      },
      {
-                "type": "input_value",
-                "name": "B",
-                "check": Types.getCompatibleTypes('boolean')
-            }
+        type: "input_value",
+        name: "B",
+        check: Types.getCompatibleTypes("boolean"),
+      },
    ],
-        "inputsInline": true,
-        "output": Types.BOOLEAN.typeName,
-        "style": "logic_blocks",
-        "helpUrl": "%{BKY_LOGIC_OPERATION_HELPURL}",
-        "extensions": ["logic_op_tooltip"]
+    inputsInline: true,
+    output: Types.BOOLEAN.typeName,
+    style: "logic_blocks",
+    helpUrl: "%{BKY_LOGIC_OPERATION_HELPURL}",
+    extensions: ["logic_op_tooltip"],
  },
  // Block for negation.
  {
-        "type": "logic_negate",
-        "message0": "%{BKY_LOGIC_NEGATE_TITLE}",
-        "args0": [
+    type: "logic_negate",
+    message0: "%{BKY_LOGIC_NEGATE_TITLE}",
+    args0: [
      {
-                "type": "input_value",
-                "name": "BOOL",
-                "check": Types.getCompatibleTypes('boolean'),
-            }
+        type: "input_value",
+        name: "BOOL",
+        check: Types.getCompatibleTypes("boolean"),
+      },
    ],
-        "output": Types.BOOLEAN.typeName,
-        "style": "logic_blocks",
-        "tooltip": "%{BKY_LOGIC_NEGATE_TOOLTIP}",
-        "helpUrl": "%{BKY_LOGIC_NEGATE_HELPURL}"
+    output: Types.BOOLEAN.typeName,
+    style: "logic_blocks",
+    tooltip: "%{BKY_LOGIC_NEGATE_TOOLTIP}",
+    helpUrl: "%{BKY_LOGIC_NEGATE_HELPURL}",
  },
  // Block for null data type.
  {
-        "type": "logic_null",
-        "message0": "%{BKY_LOGIC_NULL}",
-        "output": null,
-        "style": "logic_blocks",
-        "tooltip": "%{BKY_LOGIC_NULL_TOOLTIP}",
-        "helpUrl": "%{BKY_LOGIC_NULL_HELPURL}"
+    type: "logic_null",
+    message0: "%{BKY_LOGIC_NULL}",
+    output: null,
+    style: "logic_blocks",
+    tooltip: "%{BKY_LOGIC_NULL_TOOLTIP}",
+    helpUrl: "%{BKY_LOGIC_NULL_HELPURL}",
  },
  // Block for ternary operator.
  {
-        "type": "logic_ternary",
-        "message0": "%{BKY_LOGIC_TERNARY_CONDITION} %1",
-        "args0": [
+    type: "logic_ternary",
+    message0: "%{BKY_LOGIC_TERNARY_CONDITION} %1",
+    args0: [
      {
-                "type": "input_value",
-                "name": "IF",
-                "check": Types.getCompatibleTypes('boolean'),
-            }
+        type: "input_value",
+        name: "IF",
+        check: Types.getCompatibleTypes("boolean"),
+      },
    ],
-        "message1": "%{BKY_LOGIC_TERNARY_IF_TRUE} %1",
-        "args1": [
+    message1: "%{BKY_LOGIC_TERNARY_IF_TRUE} %1",
+    args1: [
      {
-                "type": "input_value",
-                "name": "THEN",
-                "check": Types.getCompatibleTypes('boolean'),
-            }
+        type: "input_value",
+        name: "THEN",
+        check: Types.getCompatibleTypes("boolean"),
+      },
    ],
-        "message2": "%{BKY_LOGIC_TERNARY_IF_FALSE} %1",
-        "args2": [
+    message2: "%{BKY_LOGIC_TERNARY_IF_FALSE} %1",
+    args2: [
      {
-                "type": "input_value",
-                "name": "ELSE",
-                "check": Types.getCompatibleTypes('boolean'),
-            }
+        type: "input_value",
+        name: "ELSE",
+        check: Types.getCompatibleTypes("boolean"),
+      },
    ],
-        "output": null,
-        "style": "logic_blocks",
-        "tooltip": "%{BKY_LOGIC_TERNARY_TOOLTIP}",
-        "helpUrl": "%{BKY_LOGIC_TERNARY_HELPURL}",
-        "extensions": ["logic_ternary"]
-    }
+    output: null,
+    style: "logic_blocks",
+    tooltip: "%{BKY_LOGIC_TERNARY_TOOLTIP}",
+    helpUrl: "%{BKY_LOGIC_TERNARY_HELPURL}",
+    extensions: ["logic_ternary"],
+  },
 ]); // END JSON EXTRACT (Do not delete this comment.)

-
-Blockly.Blocks['logic_compare'] = {
+Blockly.Blocks["logic_compare"] = {
  /**
   * Block for comparison operator.
   * @this Blockly.Block
   */
  init: function () {
-        var OPERATORS = this.RTL ? [
-            ['=', 'EQ'],
-            ['\u2260', 'NEQ'],
-            ['>', 'LT'],
-            ['\u2265', 'LTE'],
-            ['<', 'GT'],
-            ['\u2264', 'GTE']
-        ] : [
-                ['=', 'EQ'],
-                ['\u2260', 'NEQ'],
-                ['<', 'LT'],
-                ['\u2264', 'LTE'],
-                ['>', 'GT'],
-                ['\u2265', 'GTE']
+    var OPERATORS = this.RTL
+      ? [
+          ["=", "EQ"],
+          ["\u2260", "NEQ"],
+          [">", "LT"],
+          ["\u2265", "LTE"],
+          ["<", "GT"],
+          ["\u2264", "GTE"],
+        ]
+      : [
+          ["=", "EQ"],
+          ["\u2260", "NEQ"],
+          ["<", "LT"],
+          ["\u2264", "LTE"],
+          [">", "GT"],
+          ["\u2265", "GTE"],
        ];
    this.setHelpUrl(Blockly.Msg.LOGIC_COMPARE_HELPURL);
    this.setColour(getColour().logic);
    this.setOutput(true, Types.BOOLEAN.typeName);
-        this.appendValueInput('A');
-        this.appendValueInput('B')
-            .appendField(new Blockly.FieldDropdown(OPERATORS), 'OP');
+    this.appendValueInput("A");
+    this.appendValueInput("B").appendField(
+      new Blockly.FieldDropdown(OPERATORS),
+      "OP"
+    );
    this.setInputsInline(true);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function () {
-            var op = thisBlock.getFieldValue('OP');
+      var op = thisBlock.getFieldValue("OP");
      var TOOLTIPS = {
-                'EQ': Blockly.Msg.LOGIC_COMPARE_TOOLTIP_EQ,
-                'NEQ': Blockly.Msg.LOGIC_COMPARE_TOOLTIP_NEQ,
-                'LT': Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LT,
-                'LTE': Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LTE,
-                'GT': Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GT,
-                'GTE': Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GTE
+        EQ: Blockly.Msg.LOGIC_COMPARE_TOOLTIP_EQ,
+        NEQ: Blockly.Msg.LOGIC_COMPARE_TOOLTIP_NEQ,
+        LT: Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LT,
+        LTE: Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LTE,
+        GT: Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GT,
+        GTE: Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GTE,
      };
      return TOOLTIPS[op];
    });
@@ -462,37 +468,44 @@ Blockly.Blocks['logic_compare'] = {
   * @this Blockly.Block
   */
  onchange: function (e) {
-        var blockA = this.getInputTargetBlock('A');
-        var blockB = this.getInputTargetBlock('B');
+    var blockA = this.getInputTargetBlock("A");
+    console.log(blockA);
+    var blockB = this.getInputTargetBlock("B");
    if (blockA === null && blockB === null) {
-            this.getInput('A').setCheck(null);
-            this.getInput('B').setCheck(null);
+      this.getInput("A").setCheck(null);
+      this.getInput("B").setCheck(null);
    }
    if (blockA !== null && blockB === null) {
-            this.getInput('A').setCheck(getCompatibleTypes(blockA.outputConnection.check_[0]));
-            this.getInput('B').setCheck(getCompatibleTypes(blockA.outputConnection.check_[0]));
+      this.getInput("A").setCheck(
+        getCompatibleTypes(blockA.outputConnection.check_[0])
+      );
+      this.getInput("B").setCheck(
+        getCompatibleTypes(blockA.outputConnection.check_[0])
+      );
    }
    if (blockB !== null && blockA === null) {
-            this.getInput('B').setCheck(getCompatibleTypes(blockB.outputConnection.check_[0]));
-            this.getInput('A').setCheck(getCompatibleTypes(blockB.outputConnection.check_[0]));
-        }
+      this.getInput("B").setCheck(
+        getCompatibleTypes(blockB.outputConnection.check_[0])
+      );
+      this.getInput("A").setCheck(
+        getCompatibleTypes(blockB.outputConnection.check_[0])
+      );
    }
+  },
 };

-
-Blockly.Blocks['switch_case'] = {
+Blockly.Blocks["switch_case"] = {
  init: function () {
    this.setColour(getColour().logic);
    this.setPreviousStatement(true);
    this.setTooltip(Blockly.Msg.cases_tooltip);
    this.setNextStatement(true);
-        this.appendValueInput('CONDITION')
-            .appendField(Blockly.Msg.cases_switch);
-        this.appendValueInput('CASECONDITION0')
-            .appendField(Blockly.Msg.cases_condition);
-        this.appendStatementInput('CASE0')
-            .appendField(Blockly.Msg.cases_do);
-        this.setMutator(new Blockly.Mutator(['case_incaseof', 'case_default']));
+    this.appendValueInput("CONDITION").appendField(Blockly.Msg.cases_switch);
+    this.appendValueInput("CASECONDITION0").appendField(
+      Blockly.Msg.cases_condition
+    );
+    this.appendStatementInput("CASE0").appendField(Blockly.Msg.cases_do);
+    this.setMutator(new Blockly.Mutator(["case_incaseof", "case_default"]));
    this.caseCount_ = 0;
    this.defaultCount_ = 0;
  },
@@ -501,43 +514,42 @@ Blockly.Blocks['switch_case'] = {
    if (!this.caseCount_ && !this.defaultCount_) {
      return null;
    }
-        var container = document.createElement('mutation');
+    var container = document.createElement("mutation");
    if (this.caseCount_) {
-            container.setAttribute('case', this.caseCount_);
+      container.setAttribute("case", this.caseCount_);
    }
    if (this.defaultCount_) {
-            container.setAttribute('default', 1);
+      container.setAttribute("default", 1);
    }
    return container;
  },

  domToMutation: function (xmlElement) {
-        this.caseCount_ = parseInt(xmlElement.getAttribute('case'), 10);
-        this.defaultCount_ = parseInt(xmlElement.getAttribute('default'), 10);
+    this.caseCount_ = parseInt(xmlElement.getAttribute("case"), 10);
+    this.defaultCount_ = parseInt(xmlElement.getAttribute("default"), 10);
    for (var x = 0; x <= this.caseCount_; x++) {
-            this.appendValueInput('CASECONDITION' + x)
-                .appendField(Blockly.Msg.cases_condition);
-            this.appendStatementInput('CASE' + x)
-                .appendField(Blockly.Msg.cases_do);
+      this.appendValueInput("CASECONDITION" + x).appendField(
+        Blockly.Msg.cases_condition
+      );
+      this.appendStatementInput("CASE" + x).appendField(Blockly.Msg.cases_do);
    }
    if (this.defaultCount_) {
-            this.appendStatementInput('ONDEFAULT')
-                .appendField('default');
+      this.appendStatementInput("ONDEFAULT").appendField("default");
    }
  },

  decompose: function (workspace) {
-        var containerBlock = workspace.newBlock('control_case');
+    var containerBlock = workspace.newBlock("control_case");
    containerBlock.initSvg();
-        var connection = containerBlock.getInput('STACK').connection;
+    var connection = containerBlock.getInput("STACK").connection;
    for (var x = 1; x <= this.caseCount_; x++) {
-            var caseBlock = workspace.newBlock('case_incaseof');
+      var caseBlock = workspace.newBlock("case_incaseof");
      caseBlock.initSvg();
      connection.connect(caseBlock.previousConnection);
      connection = caseBlock.nextConnection;
    }
    if (this.defaultCount_) {
-            var defaultBlock = Blockly.Block.obtain(workspace, 'case_default');
+      var defaultBlock = Blockly.Block.obtain(workspace, "case_default");
      defaultBlock.initSvg();
      connection.connect(defaultBlock.previousConnection);
    }
@@ -547,23 +559,25 @@ Blockly.Blocks['switch_case'] = {
  compose: function (containerBlock) {
    //Disconnect all input blocks and remove all inputs.
    if (this.defaultCount_) {
-            this.removeInput('ONDEFAULT');
+      this.removeInput("ONDEFAULT");
    }
    this.defaultCount_ = 0;
    for (var x = this.caseCount_; x > 0; x--) {
-            this.removeInput('CASECONDITION' + x);
-            this.removeInput('CASE' + x);
+      this.removeInput("CASECONDITION" + x);
+      this.removeInput("CASE" + x);
    }
    this.caseCount_ = 0;
-        var caseBlock = containerBlock.getInputTargetBlock('STACK');
+    var caseBlock = containerBlock.getInputTargetBlock("STACK");
    while (caseBlock) {
      switch (caseBlock.type) {
-                case 'case_incaseof':
+        case "case_incaseof":
          this.caseCount_++;
-                    var caseconditionInput = this.appendValueInput('CASECONDITION' + this.caseCount_)
-                        .appendField(Blockly.Msg.cases_condition);
-                    var caseInput = this.appendStatementInput('CASE' + this.caseCount_)
-                        .appendField(Blockly.Msg.cases_do);
+          var caseconditionInput = this.appendValueInput(
+            "CASECONDITION" + this.caseCount_
+          ).appendField(Blockly.Msg.cases_condition);
+          var caseInput = this.appendStatementInput(
+            "CASE" + this.caseCount_
+          ).appendField(Blockly.Msg.cases_do);
          if (caseBlock.valueConnection_) {
            caseconditionInput.connection.connect(caseBlock.valueConnection_);
          }
@@ -571,78 +585,82 @@ Blockly.Blocks['switch_case'] = {
            caseInput.connection.connect(caseBlock.statementConnection_);
          }
          break;
-                case 'case_default':
+        case "case_default":
          this.defaultCount_++;
-                    var defaultInput = this.appendStatementInput('ONDEFAULT')
-                        .appendField('default');
+          var defaultInput = this.appendStatementInput("ONDEFAULT").appendField(
+            "default"
+          );
          if (caseBlock.statementConnection_) {
            defaultInput.connection.connect(caseBlock.statementConnection_);
          }
          break;
        default:
-                    throw new Error('Unknown block type.');
+          throw new Error("Unknown block type.");
      }
-            caseBlock = caseBlock.nextConnection &&
-                caseBlock.nextConnection.targetBlock();
+      caseBlock =
+        caseBlock.nextConnection && caseBlock.nextConnection.targetBlock();
    }
  },

  saveConnections: function (containerBlock) {
-        var caseBlock = containerBlock.getInputTargetBlock('STACK');
+    var caseBlock = containerBlock.getInputTargetBlock("STACK");
    var x = 1;
    while (caseBlock) {
      switch (caseBlock.type) {
-                case 'case_incaseof':
-                    var caseconditionInput = this.getInput('CASECONDITION' + x);
-                    var caseInput = this.getInput('CASE' + x);
-                    caseBlock.valueConnection_ = caseconditionInput && caseconditionInput.connection.targetConnection;
-                    caseBlock.statementConnection_ = caseInput && caseInput.connection.targetConnection;
+        case "case_incaseof":
+          var caseconditionInput = this.getInput("CASECONDITION" + x);
+          var caseInput = this.getInput("CASE" + x);
+          caseBlock.valueConnection_ =
+            caseconditionInput &&
+            caseconditionInput.connection.targetConnection;
+          caseBlock.statementConnection_ =
+            caseInput && caseInput.connection.targetConnection;
          x++;
          break;
-                case 'case_default':
-                    var defaultInput = this.getInput('ONDEFAULT');
-                    caseBlock.satementConnection_ = defaultInput && defaultInput.connection.targetConnection;
+        case "case_default":
+          var defaultInput = this.getInput("ONDEFAULT");
+          caseBlock.satementConnection_ =
+            defaultInput && defaultInput.connection.targetConnection;
          break;
        default:
-                    throw new Error('Unknown block type');
-            }
-            caseBlock = caseBlock.nextConnection &&
-                caseBlock.nextConnection.targetBlock();
+          throw new Error("Unknown block type");
      }
+      caseBlock =
+        caseBlock.nextConnection && caseBlock.nextConnection.targetBlock();
    }
+  },
 };

-Blockly.Blocks['control_case'] = {
+Blockly.Blocks["control_case"] = {
  init: function () {
    this.setColour(getColour().logic);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.cases_switch);
-        this.appendStatementInput('STACK');
-        this.setTooltip('--Placeholder--');
+    this.appendDummyInput().appendField(Blockly.Msg.cases_switch);
+    this.appendStatementInput("STACK");
+    this.setTooltip("--Placeholder--");
    this.contextMenu = false;
-    }
+  },
 };

-Blockly.Blocks['case_incaseof'] = {
+Blockly.Blocks["case_incaseof"] = {
  init: function () {
    this.setColour(getColour().logic);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.cases_add);
+    this.appendDummyInput().appendField(Blockly.Msg.cases_add);
    this.setPreviousStatement(true);
    this.setNextStatement(true);
-        this.setTooltip('--Placeholder--');
+    this.setTooltip("--Placeholder--");
    this.contextMenu = false;
-    }
+  },
 };

-Blockly.Blocks['case_default'] = {
+Blockly.Blocks["case_default"] = {
  init: function () {
    this.setColour(getColour().logic);
-        this.appendValueInput('default')
-            .appendField('default');
+    this.appendValueInput("default").appendField("default");
    this.setPreviousStatement(true);
    this.setNextStatement(false);
-        this.setTooltip('This function will run if there aren\'t any matching cases.');
+    this.setTooltip(
+      "This function will run if there aren't any matching cases."
+    );
    this.contextMenu = false;
-    }
+  },
 };
@@ -16,7 +16,7 @@ Blockly.Blocks['controls_whileUntil'] = {
        this.setHelpUrl(Blockly.Msg.CONTROLS_WHILEUNTIL_HELPURL);
        this.setColour(getColour().loops);
        this.appendValueInput('BOOL')
-            .setCheck(getCompatibleTypes('boolean'))
+            .setCheck(getCompatibleTypes(Boolean))
            .appendField(new Blockly.FieldDropdown(OPERATORS), 'MODE');
        this.appendStatementInput('DO')
            .appendField(Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO);
@@ -53,19 +53,19 @@ Blockly.Blocks['controls_for'] = {
                {
                    "type": "input_value",
                    "name": "FROM",
-                    "check": getCompatibleTypes('int'),
+                    "check": getCompatibleTypes(Number),
                    "align": "RIGHT"
                },
                {
                    "type": "input_value",
                    "name": "TO",
-                    "check": getCompatibleTypes('int'),
+                    "check": getCompatibleTypes(Number),
                    "align": "RIGHT"
                },
                {
                    "type": "input_value",
                    "name": "BY",
-                    "check": getCompatibleTypes('int'),
+                    "check": getCompatibleTypes(Number),
                    "align": "RIGHT"
                }
            ],
@@ -104,7 +104,7 @@ Blockly.Blocks['controls_forEach'] = {
                {
                    "type": "input_value",
                    "name": "LIST",
-                    "check": getCompatibleTypes('Array')
+                    "check": getCompatibleTypes(Array)
                }
            ],
            "previousStatement": null,
@@ -197,7 +197,7 @@ Blockly.Blocks['controls_repeat_ext'] = {
                {
                    "type": "input_value",
                    "name": "TIMES",
-                    "check": getCompatibleTypes('int'),
+                    "check": getCompatibleTypes(Number),
                }
            ],
            "previousStatement": null,
@@ -1148,7 +1148,9 @@ Blockly.Blocks['procedures_callnoreturn'] = {
                    // This should only be possible programatically and may indicate a problem
                    // with event grouping. If you see this message please investigate. If the
                    // use ends up being valid we may need to reorder events in the undo stack.
-                   
+                    console.log(
+                        'Saw an existing group while responding to a definition change'
+                    );
                }
                Blockly.Events.setGroup(event.group);
                if (event.newValue) {
@@ -1,145 +0,0 @@
-import * as Blockly from "blockly";
-import { getColour } from "../helpers/colour";
-
-Blockly.Blocks["sensebox_phyphox_init"] = {
-  init: function () {
-    this.setColour(getColour().phyphox);
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_init)
-      .appendField(new Blockly.FieldTextInput("Geräte Name"), "devicename");
-
-    this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
-    this.setTooltip(Blockly.Msg.sensebox_phyphox_init_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_phyphox_experiment"] = {
-  init: function () {
-    this.setColour(getColour().phyphox);
-    this.appendDummyInput().appendField(
-      Blockly.Msg.sensebox_phyphox_createExperiment
-    );
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_experimentTitle)
-      .appendField(new Blockly.FieldTextInput("Experiment Title"), "title");
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_experimentDescription)
-      .appendField(
-        new Blockly.FieldTextInput(
-          Blockly.Msg.sensebox_phyphox_experiment_description
-        ),
-        "description"
-      );
-    this.appendStatementInput("view").appendField(
-      Blockly.Msg.sensebox_phyphox_createView
-    );
-    this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
-    this.setTooltip(Blockly.Msg.sensebox_phyphox_experiment_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_phyphox_graph"] = {
-  init: function () {
-    this.setColour(getColour().phyphox);
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_createGraph)
-      .appendField(Blockly.Msg.sensebox_phyphox_graphLabel)
-      .appendField(new Blockly.FieldTextInput("Label"), "label");
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_unitx)
-      .appendField(new Blockly.FieldTextInput("Unit X"), "unitx");
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_unity)
-      .appendField(new Blockly.FieldTextInput("Unit Y"), "unity");
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_labelx)
-      .appendField(new Blockly.FieldTextInput("Label X"), "labelx");
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_labely)
-      .appendField(new Blockly.FieldTextInput("Label Y"), "labely");
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_graphStyle)
-      .appendField(
-        new Blockly.FieldDropdown([
-          [Blockly.Msg.sensebox_phyphox_style_dots, "dots"],
-          [Blockly.Msg.sensebox_phyphox_style_line, "line"],
-        ]),
-        "style"
-      );
-    this.appendValueInput("channel0").appendField(
-      Blockly.Msg.sensebox_phyphox_channel0
-    );
-    this.appendValueInput("channel1").appendField(
-      Blockly.Msg.sensebox_phyphox_channel1
-    );
-    this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
-    this.setTooltip(Blockly.Msg.sensebox_phyphox_graph_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_phyphox_timestamp"] = {
-  init: function () {
-    this.setColour(getColour().phyphox);
-    this.appendDummyInput().appendField(Blockly.Msg.sensebox_phyphox_timestamp);
-    this.setOutput(true);
-    this.setTooltip(Blockly.Msg.sensebox_phyphox_timestamp_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_phyphox_channel"] = {
-  init: function () {
-    this.setColour(getColour().phyphox);
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_phyphox_channel)
-      .appendField(
-        new Blockly.FieldDropdown([
-          ["1", "1"],
-          ["2", "2"],
-          ["3", "3"],
-          ["4", "4"],
-          ["5", "5"],
-        ]),
-        "channel"
-      );
-
-    this.setOutput(true);
-    this.setTooltip(Blockly.Msg.sensebox_phyphox_channel_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_phyphox_sendchannel"] = {
-  init: function () {
-    this.setColour(getColour().phyphox);
-    this.appendValueInput("value")
-      .appendField(Blockly.Msg.sensebox_phyphox_sendchannel)
-      .appendField(
-        new Blockly.FieldDropdown([
-          ["1", "1"],
-          ["2", "2"],
-          ["3", "3"],
-          ["4", "4"],
-          ["5", "5"],
-        ]),
-        "channel"
-      );
-
-    this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
-    this.setTooltip(Blockly.Msg.sensebox_phyphox_sendchannel_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_phyphox_experiment_send"] = {
-  init: function () {
-    this.setColour(getColour().phyphox);
-    this.appendStatementInput("sendValues").appendField(
-      Blockly.Msg.sensebox_phyphox_writeValues
-    );
-    this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
-    this.setTooltip(Blockly.Msg.sensebox_phyphox_experiment_send_tooltip);
-  },
-};
@@ -1,34 +1,30 @@
-import * as Blockly from "blockly/core";
-import { getColour } from "../helpers/colour";
+import * as Blockly from 'blockly/core';
+import { getColour } from '../helpers/colour';
+

 /*
 ----------------------------------LoRa--------------------------------------------------
 */

-Blockly.Blocks["sensebox_lora_initialize_otaa"] = {
+Blockly.Blocks['sensebox_lora_initialize_otaa'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_init_otaa_tooltip);
        this.setHelpUrl(Blockly.Msg.senseBox_LoRa_init_helpurl);
        this.setColour(getColour().sensebox);
-    this.appendDummyInput().appendField("Initialize LoRa (OTAA)");
+        this.appendDummyInput()
+            .appendField("Initialize LoRa (OTAA)");
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_device_id)
-      .appendField("{")
-      .appendField(new Blockly.FieldTextInput("DEVICE ID"), "DEVICEID")
-      .appendField("}");
+            .appendField(new Blockly.FieldTextInput("DEVICE ID"), "DEVICEID");
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_app_id)
-      .appendField("{")
-      .appendField(new Blockly.FieldTextInput("APP ID"), "APPID")
-      .appendField("}");
+            .appendField(new Blockly.FieldTextInput("APP ID"), "APPID");
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_app_key)
-      .appendField("{")
-      .appendField(new Blockly.FieldTextInput("APP KEY"), "APPKEY")
-      .appendField("}");
+            .appendField(new Blockly.FieldTextInput("APP KEY"), "APPKEY");
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_interval)
@@ -38,24 +34,21 @@ Blockly.Blocks["sensebox_lora_initialize_otaa"] = {
    },
 };

-Blockly.Blocks["sensebox_lora_initialize_abp"] = {
+Blockly.Blocks['sensebox_lora_initialize_abp'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_init_abp_tooltip);
        this.setHelpUrl(Blockly.Msg.senseBox_LoRa_init_helpurl);
        this.setColour(getColour().sensebox);
-    this.appendDummyInput().appendField("Initialize LoRa (ABP)");
+        this.appendDummyInput()
+            .appendField("Initialize LoRa (ABP)");
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_nwskey_id)
-      .appendField("{")
-      .appendField(new Blockly.FieldTextInput("NWSKEY"), "NWSKEY")
-      .appendField("}");
+            .appendField(new Blockly.FieldTextInput("NWSKEY"), "NWSKEY");
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_appskey_id)
-      .appendField("{")
-      .appendField(new Blockly.FieldTextInput("APPSKEY"), "APPSKEY")
-      .appendField("}");
+            .appendField(new Blockly.FieldTextInput("APPSKEY"), "APPSKEY");
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_devaddr_id)
@@ -72,27 +65,26 @@ Blockly.Blocks["sensebox_lora_initialize_abp"] = {
    },
 };

-Blockly.Blocks["sensebox_lora_message_send"] = {
+Blockly.Blocks['sensebox_lora_message_send'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_message_tooltip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendStatementInput("DO")
+        this.appendStatementInput('DO')
            .appendField(Blockly.Msg.senseBox_LoRa_send_message)
            .setCheck(null);
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
-  },
+    }
 };

-Blockly.Blocks["sensebox_send_lora_sensor_value"] = {
+Blockly.Blocks['sensebox_send_lora_sensor_value'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_sensor_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
-      Blockly.Msg.senseBox_measurement
-    );
+        this.appendValueInput('Value')
+            .appendField(Blockly.Msg.senseBox_measurement)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField("Bytes")
@@ -123,65 +115,60 @@ Blockly.Blocks["sensebox_send_lora_sensor_value"] = {
            this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING);
        }
    },
-  LOOP_TYPES: ["sensebox_lora_message_send"],
+    LOOP_TYPES: ['sensebox_lora_message_send'],
 };

-Blockly.Blocks["sensebox_lora_ttn_mapper"] = {
+Blockly.Blocks['sensebox_lora_ttn_mapper'] = {
    init: function (block) {
        this.setColour(getColour().sensebox);
-    this.appendDummyInput().appendField("TTN Mapper");
+        this.appendDummyInput()
+            .appendField("TTN Mapper");
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_RIGHT)
            .appendField("Fix Type Limit")
-      .appendField(
-        new Blockly.FieldDropdown(
-          [
-            ["0", "0"],
-            ["1", "1"],
-            ["2", "2"],
-            ["3", "3"],
-          ].reverse()
-        ),
-        "dropdown"
-      );
+            .appendField(new Blockly.FieldDropdown([["0", "0"], ["1", "1"], ["2", "2"], ["3", "3"]].reverse()), "dropdown");
        // reverse() because i want 3 be be at first and i'm to lazy to write the array again
-    this.appendValueInput("Latitude")
+        this.appendValueInput('Latitude')
            .appendField(Blockly.Msg.senseBox_gps_lat)
            .setCheck(null);
-    this.appendValueInput("Longitude")
+        this.appendValueInput('Longitude')
            .appendField(Blockly.Msg.senseBox_gps_lng)
            .setCheck(null);
-    this.appendValueInput("Altitude")
+        this.appendValueInput('Altitude')
            .appendField(Blockly.Msg.senseBox_gps_alt)
            .setCheck(null);
-    this.appendValueInput("pDOP").appendField("pDOP").setCheck(null);
-    this.appendValueInput("Fix Type").appendField("Fix Type").setCheck(null);
+        this.appendValueInput('pDOP')
+            .appendField('pDOP')
+            .setCheck(null);
+        this.appendValueInput('Fix Type')
+            .appendField('Fix Type')
+            .setCheck(null);
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
        this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tip);
-  },
+
+    }
 };

-Blockly.Blocks["sensebox_lora_cayenne_send"] = {
+Blockly.Blocks['sensebox_lora_cayenne_send'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendStatementInput("DO")
+        this.appendStatementInput('DO')
            .appendField(Blockly.Msg.senseBox_LoRa_send_cayenne)
            .setCheck(null);
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
-  },
+    }
 };
-Blockly.Blocks["sensebox_lora_cayenne_temperature"] = {
+Blockly.Blocks['sensebox_lora_cayenne_temperature'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_temperature_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
-      Blockly.Msg.senseBox_LoRa_cayenne_temperature
-    );
+        this.appendValueInput('Value')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_temperature)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
@@ -189,16 +176,15 @@ Blockly.Blocks["sensebox_lora_cayenne_temperature"] = {
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    },
-  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
 };
-Blockly.Blocks["sensebox_lora_cayenne_humidity"] = {
+Blockly.Blocks['sensebox_lora_cayenne_humidity'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_humidity_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
-      Blockly.Msg.senseBox_LoRa_cayenne_humidity
-    );
+        this.appendValueInput('Value')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_humidity)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
@@ -206,16 +192,15 @@ Blockly.Blocks["sensebox_lora_cayenne_humidity"] = {
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    },
-  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
 };
-Blockly.Blocks["sensebox_lora_cayenne_pressure"] = {
+Blockly.Blocks['sensebox_lora_cayenne_pressure'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_pressure_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
-      Blockly.Msg.senseBox_LoRa_cayenne_pressure
-    );
+        this.appendValueInput('Value')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_pressure)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
@@ -223,16 +208,15 @@ Blockly.Blocks["sensebox_lora_cayenne_pressure"] = {
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    },
-  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
 };
-Blockly.Blocks["sensebox_lora_cayenne_luminosity"] = {
+Blockly.Blocks['sensebox_lora_cayenne_luminosity'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_luminosity_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
-      Blockly.Msg.senseBox_LoRa_cayenne_luminosity
-    );
+        this.appendValueInput('Value')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_luminosity)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
@@ -240,16 +224,15 @@ Blockly.Blocks["sensebox_lora_cayenne_luminosity"] = {
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    },
-  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
 };
-Blockly.Blocks["sensebox_lora_cayenne_sensor"] = {
+Blockly.Blocks['sensebox_lora_cayenne_sensor'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_analog_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
-      Blockly.Msg.senseBox_LoRa_cayenne_analog
-    );
+        this.appendValueInput('Value')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_analog)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
@@ -257,16 +240,19 @@ Blockly.Blocks["sensebox_lora_cayenne_sensor"] = {
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    },
-  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
 };
-Blockly.Blocks["sensebox_lora_cayenne_accelerometer"] = {
+Blockly.Blocks['sensebox_lora_cayenne_accelerometer'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gyros_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendValueInput("X").appendField(Blockly.Msg.senseBox_LoRa_cayenne_x);
-    this.appendValueInput("Y").appendField(Blockly.Msg.senseBox_LoRa_cayenne_y);
-    this.appendValueInput("Z").appendField(Blockly.Msg.senseBox_LoRa_cayenne_z);
+        this.appendValueInput('X')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_x)
+        this.appendValueInput('Y')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_y)
+        this.appendValueInput('Z')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_z)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
@@ -274,22 +260,19 @@ Blockly.Blocks["sensebox_lora_cayenne_accelerometer"] = {
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    },
-  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
 };
-Blockly.Blocks["sensebox_lora_cayenne_gps"] = {
+Blockly.Blocks['sensebox_lora_cayenne_gps'] = {
    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gps_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
-    this.appendValueInput("LAT").appendField(
-      Blockly.Msg.senseBox_LoRa_cayenne_lat
-    );
-    this.appendValueInput("LNG").appendField(
-      Blockly.Msg.senseBox_LoRa_cayenne_lng
-    );
-    this.appendValueInput("ALT").appendField(
-      Blockly.Msg.senseBox_LoRa_cayenne_alt
-    );
+        this.appendValueInput('LAT')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_lat)
+        this.appendValueInput('LNG')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_lng)
+        this.appendValueInput('ALT')
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_alt)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
@@ -297,5 +280,5 @@ Blockly.Blocks["sensebox_lora_cayenne_gps"] = {
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    },
-  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
 };
@@ -73,6 +73,7 @@ Blockly.Blocks['sensebox_osem_connection'] = {
        * Blockly.Blocks['controls_flow_statements'].LOOP_TYPES.push('custom_loop');
        */
        selectedBox = this.getFieldValue('BoxID');
+        console.log(selectedBox)
        if (selectedBox !== '' && boxes) {
            var accessToken = boxes.find(element => element._id === selectedBox).access_token
            if (accessToken !== undefined) {
@@ -159,6 +160,7 @@ Blockly.Blocks['sensebox_send_to_osem'] = {
                for (var i = 0; i < box.sensors.length; i++) {
                    dropdown.push([box.sensors[i].title, box.sensors[i]._id])
                }
+                console.log(dropdown)
            }
            if (dropdown.length > 1) {
                var options = dropdown.slice(1)
@@ -1,78 +0,0 @@
-import * as Blockly from "blockly";
-import { getColour } from "../helpers/colour";
-import * as Types from "../helpers/types";
-
-Blockly.Blocks["sensebox_rtc_init"] = {
-  init: function () {
-    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
-    this.setColour(getColour().time);
-    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_init);
-    this.setPreviousStatement(true);
-    this.setNextStatement(true);
-    this.setTooltip(Blockly.Msg.sensebox_rtc_init_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_rtc_set"] = {
-  init: function () {
-    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
-    this.setColour(getColour().time);
-    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_set);
-    this.appendValueInput("second").appendField(
-      Blockly.Msg.sensebox_rtc_second
-    );
-    this.appendValueInput("minutes").appendField(
-      Blockly.Msg.sensebox_rtc_minutes
-    );
-    this.appendValueInput("hour").appendField(Blockly.Msg.sensebox_rtc_hour);
-    this.appendValueInput("day").appendField(Blockly.Msg.sensebox_rtc_day);
-    this.appendValueInput("month").appendField(Blockly.Msg.sensebox_rtc_month);
-    this.appendValueInput("year").appendField(Blockly.Msg.sensebox_rtc_year);
-    this.setPreviousStatement(true);
-    this.setNextStatement(true);
-    this.setTooltip(Blockly.Msg.sensebox_rtc_set_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_rtc_set_ntp"] = {
-  init: function () {
-    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
-    this.setColour(getColour().time);
-    this.appendValueInput("time").appendField(Blockly.Msg.sensebox_rtc_set_ntp);
-    this.setPreviousStatement(true);
-    this.setNextStatement(true);
-    this.setTooltip(Blockly.Msg.sensebox_rtc_set_ntp_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_rtc_get"] = {
-  init: function () {
-    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
-    this.setColour(getColour().time);
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.sensebox_rtc_get)
-      .appendField(
-        new Blockly.FieldDropdown([
-          [Blockly.Msg.sensebox_rtc_hour, "hour"],
-          [Blockly.Msg.sensebox_rtc_minutes, "minutes"],
-          [Blockly.Msg.sensebox_rtc_second, "seconds"],
-          [Blockly.Msg.sensebox_rtc_day, "day"],
-          [Blockly.Msg.sensebox_rtc_month, "month"],
-          [Blockly.Msg.sensebox_rtc_year, "year"],
-        ]),
-        "dropdown"
-      );
-    this.setOutput(true, Types.LARGE_NUMBER.typeId);
-    this.setTooltip(Blockly.Msg.sensebox_rtc_get_tooltip);
-  },
-};
-
-Blockly.Blocks["sensebox_rtc_get_timestamp"] = {
-  init: function () {
-    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
-    this.setColour(getColour().time);
-    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_get_timestamp);
-    this.setOutput(true);
-    this.setTooltip(Blockly.Msg.sensebox_rtc_get_timestamp_tooltip);
-  },
-};
@@ -1,57 +1,80 @@
-import * as Blockly from 'blockly/core';
-import { getColour } from '../helpers/colour';
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";

+var checkFileName = function (filename) {
+  var length = filename.length;
+  if (length > 8) {
+    alert("dateiname sollte kleiner als 8 Zeichen sein");
+    return filename.slice(0, 8);
+  }
+  return filename;
+};

-Blockly.Blocks['sensebox_sd_open_file'] = {
+Blockly.Blocks["sensebox_sd_open_file"] = {
  init: function () {
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_sd_open_file)
      .setAlign(Blockly.ALIGN_LEFT)
      .appendField(
-                new Blockly.FieldTextInput('Data.txt'),
-                'Filename');
-        this.appendStatementInput('SD')
-            .setCheck(null);
+        new Blockly.FieldTextInput("Data", checkFileName),
+        "Filename"
+      )
+      .appendField(".")
+      .appendField(
+        new Blockly.FieldDropdown([
+          ["txt", "txt"],
+          ["csv", "csv"],
+        ]),
+        "extension"
+      );
+    this.appendStatementInput("SD").setCheck(null);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(getColour().sensebox);
    this.setTooltip(Blockly.Msg.senseBox_sd_open_file_tooltip);
-        this.setHelpUrl('https://docs.sensebox.de/hardware/bee-sd/');
-    }
+    this.setHelpUrl("https://docs.sensebox.de/hardware/bee-sd/");
+  },
 };

-Blockly.Blocks['sensebox_sd_create_file'] = {
+Blockly.Blocks["sensebox_sd_create_file"] = {
  init: function () {
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_sd_create_file)
      .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_output_filename)
      .appendField(
-                new Blockly.FieldTextInput('Data.txt'),
-                'Filename');
+        new Blockly.FieldTextInput("Data", checkFileName),
+        "Filename"
+      )
+      .appendField(".")
+      .appendField(
+        new Blockly.FieldDropdown([
+          ["txt", "txt"],
+          ["csv", "csv"],
+        ]),
+        "extension"
+      );
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(getColour().sensebox);
    this.setTooltip(Blockly.Msg.senseBox_sd_create_file_tooltip);
-        this.setHelpUrl('https://docs.sensebox.de/hardware/bee-sd/');
-    }
+    this.setHelpUrl("https://docs.sensebox.de/hardware/bee-sd/");
+  },
 };

-Blockly.Blocks['sensebox_sd_write_file'] = {
+Blockly.Blocks["sensebox_sd_write_file"] = {
  init: function () {
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_sd_write_file)
      .setAlign(Blockly.ALIGN_LEFT);
-        this.appendValueInput('DATA')
-            .setCheck(null);
-        this.appendDummyInput('CheckboxText')
+    this.appendValueInput("DATA").setCheck(null);
+    this.appendDummyInput("CheckboxText")
      .appendField(Blockly.Msg.senseBox_output_linebreak)
-            .appendField(new Blockly.FieldCheckbox('TRUE'), 'linebreak');
+      .appendField(new Blockly.FieldCheckbox("TRUE"), "linebreak");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(getColour().sensebox);
    this.setTooltip(Blockly.Msg.senseBox_sd_write_file_tooltip);
-        this.setHelpUrl('https://docs.sensebox.de/hardware/bee-sd/');
+    this.setHelpUrl("https://docs.sensebox.de/hardware/bee-sd/");
  },
  /**
   * Called whenever anything on the workspace changes.
@@ -76,5 +99,5 @@ Blockly.Blocks['sensebox_sd_write_file'] = {
      this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING);
    }
  },
-    LOOP_TYPES: ['sensebox_sd_open_file'],
+  LOOP_TYPES: ["sensebox_sd_open_file"],
 };
@@ -1,36 +1,4 @@
-import * as Blockly from "blockly/core";
-import { getColour } from "../helpers/colour";
-import * as Types from "../helpers/types";

-Blockly.Blocks["sensebox_multiplexer_init"] = {
-  init: function () {
-    this.appendDummyInput().appendField(Blockly.Msg.senseBox_multiplexer_init);
-    this.appendValueInput("nrChannels").setCheck(
-      Types.getCompatibleTypes("int")
-    );
-    this.appendDummyInput().appendField(
-      Blockly.Msg.senseBox_multplexer_nchannels
-    );
-    this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
-    this.setInputsInline("true");
-    this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.senseBox_multiplexer_init_tooltip);
-    this.setHelpUrl(Blockly.Msg.senseBox_multiplexer_init_helpurl);
-  },
-};

-Blockly.Blocks["sensebox_multiplexer_changeChannel"] = {
-  init: function () {
-    this.appendDummyInput().appendField(
-      Blockly.Msg.senseBox_multiplexer_changeChannel
-    );
-    this.appendValueInput("Channel").setCheck(Types.getCompatibleTypes("int"));
-    this.setInputsInline("true");
-    this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
-    this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.sensebox_multiplexer_changeChannel_tooltip);
-    this.setHelpUrl(Blockly.Msg.sensebox_multiplexer_changeChannel_helpurl);
-  },
-};
+
+
@@ -8,80 +8,75 @@
 *     The arduino built in functions syntax can be found in
 *     http://arduino.cc/en/Reference/HomePage
 */
-import Blockly from 'blockly';
-import { getColour } from '../helpers/colour'
-import * as Types from '../helpers/types'
+import Blockly from "blockly";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";

-
-Blockly.Blocks['time_delay'] = {
+Blockly.Blocks["time_delay"] = {
  /**
   * Delay block definition
   * @this Blockly.Block
   */
  init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Delay');
+    this.setHelpUrl("http://arduino.cc/en/Reference/Delay");
    this.setColour(getColour().time);
-        this.appendValueInput('DELAY_TIME_MILI')
+    this.appendValueInput("DELAY_TIME_MILI")
      .setCheck(Types.NUMBER.checkList)
      .appendField(Blockly.Msg.ARD_TIME_DELAY);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_MS);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MS);
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_TIP);
-    }
+  },
 };

-Blockly.Blocks['time_delaymicros'] = {
+Blockly.Blocks["time_delaymicros"] = {
  /**
   * delayMicroseconds block definition
   * @this Blockly.Block
   */
  init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/DelayMicroseconds');
+    this.setHelpUrl("http://arduino.cc/en/Reference/DelayMicroseconds");
    this.setColour(getColour().time);
-        this.appendValueInput('DELAY_TIME_MICRO')
+    this.appendValueInput("DELAY_TIME_MICRO")
      .setCheck(Types.NUMBER.checkList)
      .appendField(Blockly.Msg.ARD_TIME_DELAY);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_DELAY_MICROS);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_DELAY_MICROS);
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_MICRO_TIP);
-    }
+  },
 };

-Blockly.Blocks['time_millis'] = {
+Blockly.Blocks["time_millis"] = {
  /**
   * Elapsed time in milliseconds block definition
   * @this Blockly.Block
   */
  init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Millis');
+    this.setHelpUrl("http://arduino.cc/en/Reference/Millis");
    this.setColour(getColour().time);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_MILLIS);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MILLIS);
    this.setOutput(true, Types.LARGE_NUMBER.typeId);
    this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
  },
  /** @return {string} The type of return value for the block, an integer. */
  getBlockType: function () {
    return Blockly.Types.LARGE_NUMBER;
-    }
+  },
 };

-Blockly.Blocks['time_micros'] = {
+Blockly.Blocks["time_micros"] = {
  /**
   * Elapsed time in microseconds block definition
   * @this Blockly.Block
   */
  init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Micros');
+    this.setHelpUrl("http://arduino.cc/en/Reference/Micros");
    this.setColour(getColour().time);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_MICROS);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MICROS);
    this.setOutput(true, Types.LARGE_NUMBER.typeId);
    this.setTooltip(Blockly.Msg.ARD_TIME_MICROS_TIP);
  },
@@ -91,40 +86,40 @@ Blockly.Blocks['time_micros'] = {
   */
  getBlockType: function () {
    return Types.LARGE_NUMBER;
-    }
+  },
 };

-Blockly.Blocks['infinite_loop'] = {
+Blockly.Blocks["infinite_loop"] = {
  /**
   * Waits forever, end of program.
   * @this Blockly.Block
   */
  init: function () {
-        this.setHelpUrl('');
+    this.setHelpUrl("");
    this.setColour(getColour().time);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_INF);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_INF);
    this.setInputsInline(true);
    this.setPreviousStatement(true);
    this.setTooltip(Blockly.Msg.ARD_TIME_INF_TIP);
-    }
+  },
 };

-Blockly.Blocks['sensebox_interval_timer'] = {
+Blockly.Blocks["sensebox_interval_timer"] = {
  init: function () {
    this.setTooltip(Blockly.Msg.senseBox_interval_timer_tip);
    this.setInputsInline(true);
-        this.setHelpUrl('');
+    this.setHelpUrl("");
    this.setColour(getColour().time);
    this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_interval_timer);
+      .appendField(Blockly.Msg.senseBox_interval_timer)
+      .appendField(new Blockly.FieldTextInput("name"), "name");
    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_interval_time)
      .setAlign(Blockly.ALIGN_LEFT)
      .appendField(new Blockly.FieldTextInput("10000"), "interval")
      .appendField(Blockly.Msg.senseBox_interval);
-        this.appendStatementInput('DO')
-            .setCheck(null);
+    this.appendStatementInput("DO").setCheck(null);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
-    }
+  },
 };
@@ -19,10 +19,8 @@ Blockly.Blocks["variables_set_dynamic"] = {
    let variable = Blockly.getMainWorkspace()
      .getVariableMap()
      .getVariableById(variableID);
-    if (variable !== null) {
    this.getField("type").setValue(variable.type);
    this.getInput("VALUE").setCheck(getCompatibleTypes(variable.type));
-    }
  },
 };

@@ -39,8 +37,7 @@ Blockly.Blocks["variables_get_dynamic"] = {
    let variable = Blockly.getMainWorkspace()
      .getVariableMap()
      .getVariableById(variableID);
-    if (variable !== null) {
    this.getField("type").setValue(variable.type);
-    }
+    this.setOutput(true, variable.type);
  },
 };
@@ -24,13 +24,13 @@
 // More on generating code:
 // https://developers.google.com/blockly/guides/create-custom-blocks/generating-code

-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core';

 /**
 * Arduino code generator.
 * @type !Blockly.Generator
 */
-Blockly["Arduino"] = new Blockly.Generator("Arduino");
+Blockly['Arduino'] = new Blockly.Generator('Arduino');

 /**
 * List of illegal variable names.
@@ -39,46 +39,49 @@ Blockly["Arduino"] = new Blockly.Generator("Arduino");
 * accidentally clobbering a built-in object or function.
 * @private
 */
-Blockly["Arduino"].addReservedWords(
+Blockly['Arduino'].addReservedWords(
    // http://arduino.cc/en/Reference/HomePage
-  "setup,loop,if,else,for,switch,case,while," +
-    "do,break,continue,return,goto,define,include," +
-    "HIGH,LOW,INPUT,OUTPUT,INPUT_PULLUP,true,false," +
-    "interger, constants,floating,point,void,boolean,char," +
-    "unsigned,byte,int,word,long,float,double,string,String,array," +
-    "static, volatile,const,sizeof,pinMode,digitalWrite,digitalRead," +
-    "analogReference,analogRead,analogWrite,tone,noTone,shiftOut,shitIn," +
-    "pulseIn,millis,micros,delay,delayMicroseconds,min,max,abs,constrain," +
-    "map,pow,sqrt,sin,cos,tan,randomSeed,random,lowByte,highByte,bitRead," +
-    "bitWrite,bitSet,bitClear,ultraSonicDistance,parseDouble,setNeoPixelColor," +
-    "bit,attachInterrupt,detachInterrupt,interrupts,noInterrupts",
-  "short",
-  "isBtnPressed"
+    'setup,loop,if,else,for,switch,case,while,' +
+    'do,break,continue,return,goto,define,include,' +
+    'HIGH,LOW,INPUT,OUTPUT,INPUT_PULLUP,true,false,' +
+    'interger, constants,floating,point,void,boolean,char,' +
+    'unsigned,byte,int,word,long,float,double,string,String,array,' +
+    'static, volatile,const,sizeof,pinMode,digitalWrite,digitalRead,' +
+    'analogReference,analogRead,analogWrite,tone,noTone,shiftOut,shitIn,' +
+    'pulseIn,millis,micros,delay,delayMicroseconds,min,max,abs,constrain,' +
+    'map,pow,sqrt,sin,cos,tan,randomSeed,random,lowByte,highByte,bitRead,' +
+    'bitWrite,bitSet,bitClear,ultraSonicDistance,parseDouble,setNeoPixelColor,' +
+    'bit,attachInterrupt,detachInterrupt,interrupts,noInterrupts',
+    'short',
+    'isBtnPressed'
 );

 /**
 * Order of operation ENUMs.
 *
 */
-Blockly["Arduino"].ORDER_ATOMIC = 0; // 0 "" ...
-Blockly["Arduino"].ORDER_UNARY_POSTFIX = 1; // expr++ expr-- () [] .
-Blockly["Arduino"].ORDER_UNARY_PREFIX = 2; // -expr !expr ~expr ++expr --expr
-Blockly["Arduino"].ORDER_MULTIPLICATIVE = 3; // * / % ~/
-Blockly["Arduino"].ORDER_ADDITIVE = 4; // + -
-Blockly["Arduino"].ORDER_LOGICAL_NOT = 4.4; // !
-Blockly["Arduino"].ORDER_SHIFT = 5; // << >>
-Blockly["Arduino"].ORDER_MODULUS = 5.3; // %
-Blockly["Arduino"].ORDER_RELATIONAL = 6; // is is! >= > <= <
-Blockly["Arduino"].ORDER_EQUALITY = 7; // === !== === !==
-Blockly["Arduino"].ORDER_BITWISE_AND = 8; // &
-Blockly["Arduino"].ORDER_BITWISE_XOR = 9; // ^
-Blockly["Arduino"].ORDER_BITWISE_OR = 10; // |
-Blockly["Arduino"].ORDER_LOGICAL_AND = 11; // &&
-Blockly["Arduino"].ORDER_LOGICAL_OR = 12; // ||
-Blockly["Arduino"].ORDER_CONDITIONAL = 13; // expr ? expr : expr
-Blockly["Arduino"].ORDER_ASSIGNMENT = 14; // = *= /= ~/= %= += -= <<= >>= &= ^= |=
-Blockly["Arduino"].ORDER_COMMA = 18; // ,
-Blockly["Arduino"].ORDER_NONE = 99; // (...)
+Blockly['Arduino'].ORDER_ATOMIC = 0; // 0 "" ...
+Blockly['Arduino'].ORDER_UNARY_POSTFIX = 1; // expr++ expr-- () [] .
+Blockly['Arduino'].ORDER_UNARY_PREFIX = 2; // -expr !expr ~expr ++expr --expr
+Blockly['Arduino'].ORDER_MULTIPLICATIVE = 3; // * / % ~/
+Blockly['Arduino'].ORDER_ADDITIVE = 4; // + -
+Blockly['Arduino'].ORDER_LOGICAL_NOT = 4.4; // !
+Blockly['Arduino'].ORDER_SHIFT = 5; // << >>
+Blockly['Arduino'].ORDER_MODULUS = 5.3; // %
+Blockly['Arduino'].ORDER_RELATIONAL = 6; // is is! >= > <= <
+Blockly['Arduino'].ORDER_EQUALITY = 7; // === !== === !==
+Blockly['Arduino'].ORDER_BITWISE_AND = 8; // &
+Blockly['Arduino'].ORDER_BITWISE_XOR = 9; // ^
+Blockly['Arduino'].ORDER_BITWISE_OR = 10; // |
+Blockly['Arduino'].ORDER_LOGICAL_AND = 11; // &&
+Blockly['Arduino'].ORDER_LOGICAL_OR = 12; // ||
+Blockly['Arduino'].ORDER_CONDITIONAL = 13; // expr ? expr : expr
+Blockly['Arduino'].ORDER_ASSIGNMENT = 14; // = *= /= ~/= %= += -= <<= >>= &= ^= |=
+Blockly['Arduino'].ORDER_COMMA = 18; // ,
+Blockly['Arduino'].ORDER_NONE = 99; // (...)
+
+
+

 /**
 * 
@@ -87,49 +90,49 @@ Blockly["Arduino"].ORDER_NONE = 99; // (...)
 * Blockly Types
 */

+
+
+
 /**
 * Initialise the database of variable names.
 * @param {!Blockly.Workspace} workspace Workspace to generate code from.
 */
-Blockly["Arduino"].init = function (workspace) {
+Blockly['Arduino'].init = function (workspace) {
    // Create a dictionary of definitions to be printed before the code.
-  Blockly["Arduino"].libraries_ = Object.create(null);
+    Blockly['Arduino'].libraries_ = Object.create(null);

-  Blockly["Arduino"].definitions_ = Object.create(null);
+    Blockly['Arduino'].definitions_ = Object.create(null);

    // creates a list of code to be setup before the setup block
-  Blockly["Arduino"].setupCode_ = Object.create(null);
+    Blockly['Arduino'].setupCode_ = Object.create(null);

    // creates a list of code to be setup before the setup block
-  Blockly["Arduino"].phyphoxSetupCode_ = Object.create(null);
-
-  // creates a list of code to be setup before the setup block
-  Blockly["Arduino"].loraSetupCode_ = Object.create(null);
+    Blockly['Arduino'].loraSetupCode_ = Object.create(null);

    // creates a list of code for the loop to be runned once
-  Blockly["Arduino"].loopCodeOnce_ = Object.create(null);
+    Blockly['Arduino'].loopCodeOnce_ = Object.create(null)

    // creates a list of code for the loop to be runned once
-  Blockly["Arduino"].codeFunctions_ = Object.create(null);
+    Blockly['Arduino'].codeFunctions_ = Object.create(null)

    // creates a list of code variables  
-  Blockly["Arduino"].variables_ = Object.create(null);
+    Blockly['Arduino'].variables_ = Object.create(null)

    // Create a dictionary mapping desired function names in definitions_
    // to actual function names (to avoid collisions with user functions).
-  Blockly["Arduino"].functionNames_ = Object.create(null);
+    Blockly['Arduino'].functionNames_ = Object.create(null);

-  Blockly["Arduino"].variablesInitCode_ = "";
+    Blockly['Arduino'].variablesInitCode_ = '';

-  if (!Blockly["Arduino"].variableDB_) {
-    Blockly["Arduino"].variableDB_ = new Blockly.Names(
-      Blockly["Arduino"].RESERVED_WORDS_
+    if (!Blockly['Arduino'].variableDB_) {
+        Blockly['Arduino'].variableDB_ = new Blockly.Names(
+            Blockly['Arduino'].RESERVED_WORDS_
        );
    } else {
-    Blockly["Arduino"].variableDB_.reset();
+        Blockly['Arduino'].variableDB_.reset();
    }

-  Blockly["Arduino"].variableDB_.setVariableMap(workspace.getVariableMap());
+    Blockly['Arduino'].variableDB_.setVariableMap(workspace.getVariableMap());

    // We don't have developer variables for now
    // // Add developer variables (not created or named by the user).
@@ -139,53 +142,53 @@ Blockly["Arduino"].init = function (workspace) {
    //         Blockly.Names.DEVELOPER_VARIABLE_TYPE));
    // }

-  const doubleVariables = workspace.getVariablesOfType("Number");
+    const doubleVariables = workspace.getVariablesOfType('Number');
    let i = 0;
-  let variableCode = "";
+    let variableCode = '';
    for (i = 0; i < doubleVariables.length; i += 1) {
        variableCode +=
-      "double " +
-      Blockly["Arduino"].variableDB_.getName(
+            'double ' +
+            Blockly['Arduino'].variableDB_.getName(
                doubleVariables[i].getId(),
                Blockly.Variables.NAME_TYPE
            ) +
-      " = 0; \n\n";
+            ' = 0; \n\n';
    }

-  const stringVariables = workspace.getVariablesOfType("String");
+    const stringVariables = workspace.getVariablesOfType('String');
    for (i = 0; i < stringVariables.length; i += 1) {
        variableCode +=
-      "String " +
-      Blockly["Arduino"].variableDB_.getName(
+            'String ' +
+            Blockly['Arduino'].variableDB_.getName(
                stringVariables[i].getId(),
                Blockly.Variables.NAME_TYPE
            ) +
            ' = ""; \n\n';
    }

-  const booleanVariables = workspace.getVariablesOfType("Boolean");
+    const booleanVariables = workspace.getVariablesOfType('Boolean');
    for (i = 0; i < booleanVariables.length; i += 1) {
        variableCode +=
-      "boolean " +
-      Blockly["Arduino"].variableDB_.getDistinctName(
+            'boolean ' +
+            Blockly['Arduino'].variableDB_.getDistinctName(
                booleanVariables[i].getId(),
                Blockly.Variables.NAME_TYPE
            ) +
-      " = false; \n\n";
+            ' = false; \n\n';
    }

-  const colourVariables = workspace.getVariablesOfType("Colour");
+    const colourVariables = workspace.getVariablesOfType('Colour');
    for (i = 0; i < colourVariables.length; i += 1) {
        variableCode +=
-      "RGB " +
-      Blockly["Arduino"].variableDB_.getName(
+            'RGB ' +
+            Blockly['Arduino'].variableDB_.getName(
                colourVariables[i].getId(),
                Blockly.Variables.NAME_TYPE
            ) +
-      " = {0, 0, 0}; \n\n";
+            ' = {0, 0, 0}; \n\n';
    }

-  Blockly["Arduino"].variablesInitCode_ = variableCode;
+    Blockly['Arduino'].variablesInitCode_ = variableCode;
 };

 /**
@@ -193,95 +196,86 @@ Blockly["Arduino"].init = function (workspace) {
 * @param {string} code Generated code.
 * @return {string} Completed code.
 */
-Blockly["Arduino"].finish = function (code) {
-  let libraryCode = "";
-  let variablesCode = "";
-  let codeFunctions = "";
-  let functionsCode = "";
-  let definitionsCode = "";
-  let phyphoxSetupCode = "";
-  let loopCodeOnce = "";
-  let setupCode = "";
-  let preSetupCode = "";
-  let loraSetupCode = "";
-  let devVariables = "\n";
+Blockly['Arduino'].finish = function (code) {
+    let libraryCode = '';
+    let variablesCode = '';
+    let codeFunctions = '';
+    let functionsCode = '';
+    let definitionsCode = '';
+    let loopCodeOnce = '';
+    let setupCode = '';
+    let preSetupCode = '';
+    let loraSetupCode = '';
+    let devVariables = '\n';

-  for (const key in Blockly["Arduino"].libraries_) {
-    libraryCode += Blockly["Arduino"].libraries_[key] + "\n";
+    for (const key in Blockly['Arduino'].libraries_) {
+        libraryCode += Blockly['Arduino'].libraries_[key] + '\n';
    }

-  for (const key in Blockly["Arduino"].variables_) {
-    variablesCode += Blockly["Arduino"].variables_[key] + "\n";
+    for (const key in Blockly['Arduino'].variables_) {
+        variablesCode += Blockly['Arduino'].variables_[key] + '\n';
    }

-  for (const key in Blockly["Arduino"].definitions_) {
-    definitionsCode += Blockly["Arduino"].definitions_[key] + "\n";
+    for (const key in Blockly['Arduino'].definitions_) {
+        definitionsCode += Blockly['Arduino'].definitions_[key] + '\n';
    }

-  for (const key in Blockly["Arduino"].loopCodeOnce_) {
-    loopCodeOnce += Blockly["Arduino"].loopCodeOnce_[key] + "\n";
+    for (const key in Blockly['Arduino'].loopCodeOnce_) {
+        loopCodeOnce += Blockly['Arduino'].loopCodeOnce_[key] + '\n';
    }

-  for (const key in Blockly["Arduino"].codeFunctions_) {
-    codeFunctions += Blockly["Arduino"].codeFunctions_[key] + "\n";
+    for (const key in Blockly['Arduino'].codeFunctions_) {
+        codeFunctions += Blockly['Arduino'].codeFunctions_[key] + '\n';
    }

-  for (const key in Blockly["Arduino"].functionNames_) {
-    functionsCode += Blockly["Arduino"].functionNames_[key] + "\n";
+    for (const key in Blockly['Arduino'].functionNames_) {
+        functionsCode += Blockly['Arduino'].functionNames_[key] + '\n';
    }

-  for (const key in Blockly["Arduino"].setupCode_) {
-    preSetupCode += Blockly["Arduino"].setupCode_[key] + "\n" || "";
+
+
+    for (const key in Blockly['Arduino'].setupCode_) {
+        preSetupCode += Blockly['Arduino'].setupCode_[key] || '';
    }

-  for (const key in Blockly["Arduino"].loraSetupCode_) {
-    loraSetupCode += Blockly["Arduino"].loraSetupCode_[key] + "\n" || "";
+    for (const key in Blockly['Arduino'].loraSetupCode_) {
+        loraSetupCode += Blockly['Arduino'].loraSetupCode_[key] || '';
    }

-  setupCode =
-    "\nvoid setup() { \n" + preSetupCode + "\n" + loraSetupCode + "\n}\n";
-  for (const key in Blockly["Arduino"].phyphoxSetupCode_) {
-    phyphoxSetupCode += Blockly["Arduino"].phyphoxSetupCode_[key] + "\n" || "";
-  }

-  setupCode =
-    "\nvoid setup() { \n" +
-    preSetupCode +
-    "\n" +
-    phyphoxSetupCode +
-    "\n" +
-    loraSetupCode +
-    "\n}\n";
+    setupCode = '\nvoid setup() { \n' + preSetupCode + '\n' + loraSetupCode + '\n}\n';
+
+    let loopCode = '\nvoid loop() { \n' + loopCodeOnce + code + '\n}\n';

-  let loopCode = "\nvoid loop() { \n" + loopCodeOnce + code + "\n}\n";

    // Convert the definitions dictionary into a list.
    code =
        devVariables +
-    "\n" +
+        '\n' +
        libraryCode +
-    "\n" +
+        '\n' +
        variablesCode +
-    "\n" +
+        '\n' +
        definitionsCode +
-    "\n" +
+        '\n' +
        codeFunctions +
-    "\n" +
-    Blockly["Arduino"].variablesInitCode_ +
-    "\n" +
+        '\n' +
+        Blockly['Arduino'].variablesInitCode_ +
+        '\n' +
        functionsCode +
-    "\n" +
+        '\n' +
        setupCode +
-    "\n" +
-    loopCode;
+        '\n' +
+        loopCode
+        ;

    // Clean up temporary data.
-  delete Blockly["Arduino"].definitions_;
-  delete Blockly["Arduino"].functionNames_;
-  delete Blockly["Arduino"].loopCodeOnce_;
-  delete Blockly["Arduino"].variablesInitCode_;
-  delete Blockly["Arduino"].libraries_;
-  Blockly["Arduino"].variableDB_.reset();
+    delete Blockly['Arduino'].definitions_;
+    delete Blockly['Arduino'].functionNames_;
+    delete Blockly['Arduino'].loopCodeOnce_;
+    delete Blockly['Arduino'].variablesInitCode_;
+    delete Blockly['Arduino'].libraries_;
+    Blockly['Arduino'].variableDB_.reset();

    return code;
 };
@@ -292,8 +286,8 @@ Blockly["Arduino"].finish = function (code) {
 * @param {string} line Line of generated code.
 * @return {string} Legal line of code.
 */
-Blockly["Arduino"].scrubNakedValue = function (line) {
-  return line + ";\n";
+Blockly['Arduino'].scrubNakedValue = function (line) {
+    return line + ';\n';
 };

 /**
@@ -303,12 +297,12 @@ Blockly["Arduino"].scrubNakedValue = function (line) {
 * @return {string} Arduino string.
 * @private
 */
-Blockly["Arduino"].quote_ = function (string) {
+Blockly['Arduino'].quote_ = function (string) {
    // Can't use goog.string.quote since Google's style guide recommends
    // JS string literals use single quotes.
    string = string
-    .replace(/\\/g, "\\\\")
-    .replace(/\n/g, "\\\n")
+        .replace(/\\/g, '\\\\')
+        .replace(/\n/g, '\\\n')
        .replace(/'/g, "\\'");
    return '"' + string + '"';
 };
@@ -323,25 +317,26 @@ Blockly["Arduino"].quote_ = function (string) {
 * @return {string} Arduino code with comments and subsequent blocks added.
 * @private
 */
-Blockly["Arduino"].scrub_ = function (block, code) {
-  let commentCode = "";
+Blockly['Arduino'].scrub_ = function (block, code) {
+    let commentCode = '';
    // Only collect comments for blocks that aren't inline.
    if (!block.outputConnection || !block.outputConnection.targetConnection) {
        // Collect comment for this block.
        let comment = block.getCommentText();
        //@ts-ignore
-    comment = comment
-      ? Blockly.utils.string.wrap(comment, Blockly["Arduino"].COMMENT_WRAP - 3)
-      : null;
+        comment = comment ? Blockly.utils.string.wrap(
+            comment,
+            Blockly['Arduino'].COMMENT_WRAP - 3
+        ) : null;
        if (comment) {
            if (block.getProcedureDef) {
                // Use a comment block for function comments.
                commentCode +=
-          "/**\n" +
-          Blockly["Arduino"].prefixLines(comment + "\n", " * ") +
-          " */\n";
+                    '/**\n' +
+                    Blockly['Arduino'].prefixLines(comment + '\n', ' * ') +
+                    ' */\n';
            } else {
-        commentCode += Blockly["Arduino"].prefixLines(comment + "\n", "// ");
+                commentCode += Blockly['Arduino'].prefixLines(comment + '\n', '// ');
            }
        }
        // Collect comments for all value arguments.
@@ -350,15 +345,15 @@ Blockly["Arduino"].scrub_ = function (block, code) {
            if (block.inputList[i].type === Blockly.INPUT_VALUE) {
                const childBlock = block.inputList[i].connection.targetBlock();
                if (childBlock) {
-          const comment = Blockly["Arduino"].allNestedComments(childBlock);
+                    const comment = Blockly['Arduino'].allNestedComments(childBlock);
                    if (comment) {
-            commentCode += Blockly["Arduino"].prefixLines(comment, "// ");
+                        commentCode += Blockly['Arduino'].prefixLines(comment, '// ');
                    }
                }
            }
        }
    }
    const nextBlock = block.nextConnection && block.nextConnection.targetBlock();
-  const nextCode = Blockly["Arduino"].blockToCode(nextBlock);
+    const nextCode = Blockly['Arduino'].blockToCode(nextBlock);
    return commentCode + code + nextCode;
 };
@@ -1,25 +1,24 @@
-import "./generator";
-import "./loops";
-import "./sensebox-sensors";
-import "./sensebox-telegram";
-import "./sensebox-osem";
-import "./sensebox-web";
-import "./sensebox-display";
-import "./sensebox-lora";
-import "./sensebox-led";
-import "./sensebox";
-import "./sensebox-rtc";
-import "./sensebox-ble";
-import "./sensebox-sd";
-import "./mqtt";
-import "./logic";
-import "./text";
-import "./math";
-import "./map";
-import "./io";
-import "./audio";
-import "./procedures";
-import "./time";
-import "./variables";
-import "./lists";
-import "./webserver";
+import './generator';
+import './loops';
+import './sensebox-sensors';
+import './sensebox-telegram';
+import './sensebox-osem';
+import './sensebox-web';
+import './sensebox-display';
+import './sensebox-lora';
+import './sensebox-led';
+import './sensebox-sd';
+import './mqtt';
+import './logic';
+import './text';
+import './math';
+import './map';
+import './io';
+import './audio';
+import './procedures';
+import './time';
+import './variables';
+import './lists';
+import './webserver';
+
+
@@ -1,4 +1,5 @@
-import * as Blockly from "blockly/core";
+
+import * as Blockly from 'blockly/core';

 /**
 * @license Licensed under the Apache License, Version 2.0 (the "License"):
@@ -18,13 +19,13 @@ import * as Blockly from "blockly/core";
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_number"] = function (block) {
+Blockly.Arduino['math_number'] = function (block) {
    // Numeric value.
-  var code = parseFloat(block.getFieldValue("NUM"));
+    var code = parseFloat(block.getFieldValue('NUM'));
    if (code === Infinity) {
-    code = "INFINITY";
+        code = 'INFINITY';
    } else if (code === -Infinity) {
-    code = "-INFINITY";
+        code = '-INFINITY';
    }
    return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
@@ -36,23 +37,23 @@ Blockly.Arduino["math_number"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_arithmetic"] = function (block) {
+Blockly.Arduino['math_arithmetic'] = function (block) {
    var OPERATORS = {
-    ADD: [" + ", Blockly.Arduino.ORDER_ADDITIVE],
-    MINUS: [" - ", Blockly.Arduino.ORDER_ADDITIVE],
-    MULTIPLY: [" * ", Blockly.Arduino.ORDER_MULTIPLICATIVE],
-    DIVIDE: [" / ", Blockly.Arduino.ORDER_MULTIPLICATIVE],
-    POWER: [null, Blockly.Arduino.ORDER_NONE], // Handle power separately.
+        ADD: [' + ', Blockly.Arduino.ORDER_ADDITIVE],
+        MINUS: [' - ', Blockly.Arduino.ORDER_ADDITIVE],
+        MULTIPLY: [' * ', Blockly.Arduino.ORDER_MULTIPLICATIVE],
+        DIVIDE: [' / ', Blockly.Arduino.ORDER_MULTIPLICATIVE],
+        POWER: [null, Blockly.Arduino.ORDER_NONE]  // Handle power separately.
    };
-  var tuple = OPERATORS[block.getFieldValue("OP")];
+    var tuple = OPERATORS[block.getFieldValue('OP')];
    var operator = tuple[0];
    var order = tuple[1];
-  var argument0 = Blockly.Arduino.valueToCode(block, "A", order) || "0";
-  var argument1 = Blockly.Arduino.valueToCode(block, "B", order) || "0";
+    var argument0 = Blockly.Arduino.valueToCode(block, 'A', order) || '0';
+    var argument1 = Blockly.Arduino.valueToCode(block, 'B', order) || '0';
    var code;
    // Power in C++ requires a special case since it has no operator.
    if (!operator) {
-    code = "Math.pow(" + argument0 + ", " + argument1 + ")";
+        code = 'Math.pow(' + argument0 + ', ' + argument1 + ')';
        return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
    }
    code = argument0 + operator + argument1;
@@ -65,78 +66,65 @@ Blockly.Arduino["math_arithmetic"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_single"] = function (block) {
-  var operator = block.getFieldValue("OP");
+Blockly.Arduino['math_single'] = function (block) {
+    var operator = block.getFieldValue('OP');
    var code;
    var arg;
-  if (operator === "NEG") {
+    if (operator === 'NEG') {
        // Negation is a special case given its different operator precedents.
-    arg =
-      Blockly.Arduino.valueToCode(
-        block,
-        "NUM",
-        Blockly.Arduino.ORDER_UNARY_PREFIX
-      ) || "0";
-    if (arg[0] === "-") {
+        arg = Blockly.Arduino.valueToCode(block, 'NUM',
+            Blockly.Arduino.ORDER_UNARY_PREFIX) || '0';
+        if (arg[0] === '-') {
            // --3 is not legal in C++ in this context.
-      arg = " " + arg;
+            arg = ' ' + arg;
        }
-    code = "-" + arg;
+        code = '-' + arg;
        return [code, Blockly.Arduino.ORDER_UNARY_PREFIX];
    }
-  if (operator === "ABS" || operator.substring(0, 5) === "ROUND") {
-    arg =
-      Blockly.Arduino.valueToCode(
-        block,
-        "NUM",
-        Blockly.Arduino.ORDER_UNARY_POSTFIX
-      ) || "0";
-  } else if (operator === "SIN" || operator === "COS" || operator === "TAN") {
-    arg =
-      Blockly.Arduino.valueToCode(
-        block,
-        "NUM",
-        Blockly.Arduino.ORDER_MULTIPLICATIVE
-      ) || "0";
+    if (operator === 'ABS' || operator.substring(0, 5) === 'ROUND') {
+        arg = Blockly.Arduino.valueToCode(block, 'NUM',
+            Blockly.Arduino.ORDER_UNARY_POSTFIX) || '0';
+    } else if (operator === 'SIN' || operator === 'COS' || operator === 'TAN') {
+        arg = Blockly.Arduino.valueToCode(block, 'NUM',
+            Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
    } else {
-    arg =
-      Blockly.Arduino.valueToCode(block, "NUM", Blockly.Arduino.ORDER_NONE) ||
-      "0";
+        arg = Blockly.Arduino.valueToCode(block, 'NUM',
+            Blockly.Arduino.ORDER_NONE) || '0';
    }
    // First, handle cases which generate values that don't need parentheses.
    switch (operator) {
-    case "ABS":
-      code = "abs(" + arg + ")";
+        case 'ABS':
+            code = 'abs(' + arg + ')';
            break;
-    case "ROOT":
-      code = "sqrt(" + arg + ")";
+        case 'ROOT':
+            code = 'sqrt(' + arg + ')';
            break;
-    case "LN":
-      code = "log(" + arg + ")";
+        case 'LN':
+            code = 'log(' + arg + ')';
            break;
-    case "EXP":
-      code = "exp(" + arg + ")";
+        case 'EXP':
+            code = 'exp(' + arg + ')';
            break;
-    case "POW10":
-      code = "pow(10," + arg + ")";
+        case 'POW10':
+            code = 'pow(10,' + arg + ')';
            break;
-    case "ROUND":
-      code = "round(" + arg + ")";
+        case 'ROUND':
+            code = 'round(' + arg + ')';
            break;
-    case "ROUNDUP":
-      code = "ceil(" + arg + ")";
+        case 'ROUNDUP':
+            code = 'ceil(' + arg + ')';
            break;
-    case "ROUNDDOWN":
-      code = "floor(" + arg + ")";
+        case 'ROUNDDOWN':
+            code = 'floor(' + arg + ')';
            break;
-    case "SIN":
-      code = "sin(" + arg + " / 180 * Math.PI)";
+        case 'SIN':
+            code = 'sin(' + arg + ' / 180 * Math.PI)';
            break;
-    case "COS":
-      code = "cos(" + arg + " / 180 * Math.PI)";
+        case 'COS':
+            code = 'cos(' + arg + ' / 180 * Math.PI)';
            break;
-    case "TAN":
-      code = "tan(" + arg + " / 180 * Math.PI)";
+        case 'TAN':
+            code = 'tan(' + arg + ' / 180 * Math.PI)';
            break;
        default:
            break;
@@ -146,20 +134,20 @@ Blockly.Arduino["math_single"] = function (block) {
    }
    // Second, handle cases which generate values that may need parentheses.
    switch (operator) {
-    case "LOG10":
-      code = "log(" + arg + ") / log(10)";
+        case 'LOG10':
+            code = 'log(' + arg + ') / log(10)';
            break;
-    case "ASIN":
-      code = "asin(" + arg + ") / M_PI * 180";
+        case 'ASIN':
+            code = 'asin(' + arg + ') / M_PI * 180';
            break;
-    case "ACOS":
-      code = "acos(" + arg + ") / M_PI * 180";
+        case 'ACOS':
+            code = 'acos(' + arg + ') / M_PI * 180';
            break;
-    case "ATAN":
-      code = "atan(" + arg + ") / M_PI * 180";
+        case 'ATAN':
+            code = 'atan(' + arg + ') / M_PI * 180';
            break;
        default:
-      throw new Error("Unknown math operator: " + operator);
+            throw new Error('Unknown math operator: ' + operator);
    }
    return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
 };
@@ -173,16 +161,16 @@ Blockly.Arduino["math_single"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino["math_constant"] = function (block) {
+Blockly.Arduino['math_constant'] = function (block) {
    var CONSTANTS = {
-    PI: ["M_PI", Blockly.Arduino.ORDER_UNARY_POSTFIX],
-    E: ["M_E", Blockly.Arduino.ORDER_UNARY_POSTFIX],
-    GOLDEN_RATIO: ["(1 + sqrt(5)) / 2", Blockly.Arduino.ORDER_MULTIPLICATIVE],
-    SQRT2: ["M_SQRT2", Blockly.Arduino.ORDER_UNARY_POSTFIX],
-    SQRT1_2: ["M_SQRT1_2", Blockly.Arduino.ORDER_UNARY_POSTFIX],
-    INFINITY: ["INFINITY", Blockly.Arduino.ORDER_ATOMIC],
+        'PI': ['M_PI', Blockly.Arduino.ORDER_UNARY_POSTFIX],
+        'E': ['M_E', Blockly.Arduino.ORDER_UNARY_POSTFIX],
+        'GOLDEN_RATIO': ['(1 + sqrt(5)) / 2', Blockly.Arduino.ORDER_MULTIPLICATIVE],
+        'SQRT2': ['M_SQRT2', Blockly.Arduino.ORDER_UNARY_POSTFIX],
+        'SQRT1_2': ['M_SQRT1_2', Blockly.Arduino.ORDER_UNARY_POSTFIX],
+        'INFINITY': ['INFINITY', Blockly.Arduino.ORDER_ATOMIC]
    };
-  return CONSTANTS[block.getFieldValue("CONSTANT")];
+    return CONSTANTS[block.getFieldValue('CONSTANT')];
 };

 /**
@@ -192,67 +180,58 @@ Blockly.Arduino["math_constant"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_number_property"] = function (block) {
-  var number_to_check =
-    Blockly.Arduino.valueToCode(
-      block,
-      "NUMBER_TO_CHECK",
-      Blockly.Arduino.ORDER_MULTIPLICATIVE
-    ) || "0";
-  var dropdown_property = block.getFieldValue("PROPERTY");
+Blockly.Arduino['math_number_property'] = function (block) {
+    var number_to_check = Blockly.Arduino.valueToCode(block, 'NUMBER_TO_CHECK',
+        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
+    var dropdown_property = block.getFieldValue('PROPERTY');
    var code;
-  if (dropdown_property === "PRIME") {
+    if (dropdown_property === 'PRIME') {
        var func = [
-      "boolean " + Blockly.Arduino.DEF_FUNC_NAME + "(int n) {",
-      "  // https://en.wikipedia.org/wiki/Primality_test#Naive_methods",
-      "  if (n == 2 || n == 3) {",
-      "    return true;",
-      "  }",
-      "  // False if n is NaN, negative, is 1.",
-      "  // And false if n is divisible by 2 or 3.",
-      "  if (isnan(n) || (n <= 1) || (n == 1) || (n % 2 == 0) || " +
-        "(n % 3 == 0)) {",
-      "    return false;",
-      "  }",
-      "  // Check all the numbers of form 6k +/- 1, up to sqrt(n).",
-      "  for (int x = 6; x <= sqrt(n) + 1; x += 6) {",
-      "    if (n % (x - 1) == 0 || n % (x + 1) == 0) {",
-      "      return false;",
-      "    }",
-      "  }",
-      "  return true;",
-      "}",
-    ];
-    var funcName = Blockly.Arduino.addFunction("mathIsPrime", func.join("\n"));
-    Blockly.Arduino.addInclude("math", "#include <math.h>");
-    code = funcName + "(" + number_to_check + ")";
+            'boolean ' + Blockly.Arduino.DEF_FUNC_NAME + '(int n) {',
+            '  // https://en.wikipedia.org/wiki/Primality_test#Naive_methods',
+            '  if (n == 2 || n == 3) {',
+            '    return true;',
+            '  }',
+            '  // False if n is NaN, negative, is 1.',
+            '  // And false if n is divisible by 2 or 3.',
+            '  if (isnan(n) || (n <= 1) || (n == 1) || (n % 2 == 0) || ' +
+            '(n % 3 == 0)) {',
+            '    return false;',
+            '  }',
+            '  // Check all the numbers of form 6k +/- 1, up to sqrt(n).',
+            '  for (int x = 6; x <= sqrt(n) + 1; x += 6) {',
+            '    if (n % (x - 1) == 0 || n % (x + 1) == 0) {',
+            '      return false;',
+            '    }',
+            '  }',
+            '  return true;',
+            '}'];
+        var funcName = Blockly.Arduino.addFunction('mathIsPrime', func.join('\n'));
+        Blockly.Arduino.addInclude('math', '#include <math.h>');
+        code = funcName + '(' + number_to_check + ')';
        return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
    }
    switch (dropdown_property) {
-    case "EVEN":
-      code = number_to_check + " % 2 == 0";
+        case 'EVEN':
+            code = number_to_check + ' % 2 == 0';
            break;
-    case "ODD":
-      code = number_to_check + " % 2 == 1";
+        case 'ODD':
+            code = number_to_check + ' % 2 == 1';
            break;
-    case "WHOLE":
-      Blockly.Arduino.addInclude("math", "#include <math.h>");
-      code = "(floor(" + number_to_check + ") == " + number_to_check + ")";
+        case 'WHOLE':
+            Blockly.Arduino.addInclude('math', '#include <math.h>');
+            code = '(floor(' + number_to_check + ') == ' + number_to_check + ')';
            break;
-    case "POSITIVE":
-      code = number_to_check + " > 0";
+        case 'POSITIVE':
+            code = number_to_check + ' > 0';
            break;
-    case "NEGATIVE":
-      code = number_to_check + " < 0";
+        case 'NEGATIVE':
+            code = number_to_check + ' < 0';
            break;
-    case "DIVISIBLE_BY":
-      var divisor =
-        Blockly.Arduino.valueToCode(
-          block,
-          "DIVISOR",
-          Blockly.Arduino.ORDER_MULTIPLICATIVE
-        ) || "0";
-      code = number_to_check + " % " + divisor + " == 0";
+        case 'DIVISIBLE_BY':
+            var divisor = Blockly.Arduino.valueToCode(block, 'DIVISOR',
+                Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
+            code = number_to_check + ' % ' + divisor + ' == 0';
            break;
        default:
            break;
@@ -268,25 +247,19 @@ Blockly.Arduino["math_number_property"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_change"] = function (block) {
-  var argument0 =
-    Blockly.Arduino.valueToCode(
-      block,
-      "DELTA",
-      Blockly.Arduino.ORDER_ADDITIVE
-    ) || "0";
+Blockly.Arduino['math_change'] = function (block) {
+    var argument0 = Blockly.Arduino.valueToCode(block, 'DELTA',
+        Blockly.Arduino.ORDER_ADDITIVE) || '0';
    var varName = Blockly.Arduino.variableDB_.getName(
-    block.getFieldValue("VAR"),
-    Blockly.Variables.NAME_TYPE
-  );
-  return varName + " += " + argument0 + ";\n";
+        block.getFieldValue('VAR'), Blockly.Variables.NAME_TYPE);
+    return varName + ' += ' + argument0 + ';\n';
 };

 /** Rounding functions have a single operand. */
-Blockly.Arduino["math_round"] = Blockly.Arduino["math_single"];
+Blockly.Arduino['math_round'] = Blockly.Arduino['math_single'];

 /** Trigonometry functions have a single operand. */
-Blockly.Arduino["math_trig"] = Blockly.Arduino["math_single"];
+Blockly.Arduino['math_trig'] = Blockly.Arduino['math_single'];

 /**
 * Generator for the math function to a list.
@@ -295,7 +268,7 @@ Blockly.Arduino["math_trig"] = Blockly.Arduino["math_single"];
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_on_list"] = Blockly.Arduino.noGeneratorCodeInline;
+Blockly.Arduino['math_on_list'] = Blockly.Arduino.noGeneratorCodeInline;

 /**
 * Generator for the math modulo function (calculates remainder of X/Y).
@@ -303,20 +276,12 @@ Blockly.Arduino["math_on_list"] = Blockly.Arduino.noGeneratorCodeInline;
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_modulo"] = function (block) {
-  var argument0 =
-    Blockly.Arduino.valueToCode(
-      block,
-      "DIVIDEND",
-      Blockly.Arduino.ORDER_MULTIPLICATIVE
-    ) || "0";
-  var argument1 =
-    Blockly.Arduino.valueToCode(
-      block,
-      "DIVISOR",
-      Blockly.Arduino.ORDER_MULTIPLICATIVE
-    ) || "0";
-  var code = argument0 + " % " + argument1;
+Blockly.Arduino['math_modulo'] = function (block) {
+    var argument0 = Blockly.Arduino.valueToCode(block, 'DIVIDEND',
+        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
+    var argument1 = Blockly.Arduino.valueToCode(block, 'DIVISOR',
+        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
+    var code = argument0 + ' % ' + argument1;
    return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
 };

@@ -326,33 +291,17 @@ Blockly.Arduino["math_modulo"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_constrain"] = function (block) {
+Blockly.Arduino['math_constrain'] = function (block) {
    // Constrain a number between two limits.
-  var argument0 =
-    Blockly.Arduino.valueToCode(block, "VALUE", Blockly.Arduino.ORDER_NONE) ||
-    "0";
-  var argument1 =
-    Blockly.Arduino.valueToCode(block, "LOW", Blockly.Arduino.ORDER_NONE) ||
-    "0";
-  var argument2 =
-    Blockly.Arduino.valueToCode(block, "HIGH", Blockly.Arduino.ORDER_NONE) ||
-    "0";
-  var code =
-    "(" +
-    argument0 +
-    " < " +
-    argument1 +
-    " ? " +
-    argument1 +
-    " : ( " +
-    argument0 +
-    " > " +
-    argument2 +
-    " ? " +
-    argument2 +
-    " : " +
-    argument0 +
-    "))";
+    var argument0 = Blockly.Arduino.valueToCode(block, 'VALUE',
+        Blockly.Arduino.ORDER_NONE) || '0';
+    var argument1 = Blockly.Arduino.valueToCode(block, 'LOW',
+        Blockly.Arduino.ORDER_NONE) || '0';
+    var argument2 = Blockly.Arduino.valueToCode(block, 'HIGH',
+        Blockly.Arduino.ORDER_NONE) || '0';
+    var code = '(' + argument0 + ' < ' + argument1 + ' ? ' + argument1 +
+        ' : ( ' + argument0 + ' > ' + argument2 + ' ? ' + argument2 + ' : ' +
+        argument0 + '))';
    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
 };

@@ -363,26 +312,28 @@ Blockly.Arduino["math_constrain"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_random_int"] = function (block) {
-  var argument0 =
-    Blockly.Arduino.valueToCode(block, "FROM", Blockly.Arduino.ORDER_NONE) ||
-    "0";
-  var argument1 =
-    Blockly.Arduino.valueToCode(block, "TO", Blockly.Arduino.ORDER_NONE) || "0";
-  Blockly.Arduino.setupCode_["init_rand"] = "randomSeed(analogRead(0));";
-  Blockly.Arduino.functionNames_[
-    "math_random_int"
-  ] = `int mathRandomInt (int min, int max) {\n
-      if (min > max) {
-        int temp = min;
-        min = max;
-        max = temp;
-      }
-      return min + (rand() % (max - min + 1));
-    }
-    `;
-  var code = `mathRandomInt(${argument0},${argument1});`;
-  return [code, Blockly.Arduino.ORDER_ATOMIC];
+Blockly.Arduino['math_random_int'] = function (block) {
+    var argument0 = Blockly.Arduino.valueToCode(block, 'FROM',
+        Blockly.Arduino.ORDER_NONE) || '0';
+    var argument1 = Blockly.Arduino.valueToCode(block, 'TO',
+        Blockly.Arduino.ORDER_NONE) || '0';
+    var functionName = Blockly.Arduino.variableDB_.getDistinctName(
+        'math_random_int', Blockly.Generator.NAME_TYPE);
+    Blockly.Arduino.setups_['init_rand'] = 'randomSeed(analogRead(0));';
+    Blockly.Arduino.math_random_int.random_function = functionName;
+    var func = [
+        'int ' + Blockly.Arduino.DEF_FUNC_NAME + '(int min, int max) {',
+        '  if (min > max) {',
+        '    // Swap min and max to ensure min is smaller.',
+        '    int temp = min;',
+        '    min = max;',
+        '    max = temp;',
+        '  }',
+        '  return min + (rand() % (max - min + 1));',
+        '}'];
+    var funcName = Blockly.Arduino.addFunction('mathRandomInt', func.join('\n'));
+    var code = funcName + '(' + argument0 + ', ' + argument1 + ')';
+    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
 };

 /**
@@ -391,6 +342,6 @@ Blockly.Arduino["math_random_int"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino["math_random_float"] = function (block) {
-  return ["(rand() / RAND_MAX)", Blockly.Arduino.ORDER_UNARY_POSTFIX];
+Blockly.Arduino['math_random_float'] = function (block) {
+    return ['(rand() / RAND_MAX)', Blockly.Arduino.ORDER_UNARY_POSTFIX];
 };
@@ -68,6 +68,7 @@ Blockly.Arduino['procedures_defreturn'] = function (block) {
 };

 function translateType(type) {
+    console.log(type);
    switch (type) {

        case 'int':
@@ -1,127 +0,0 @@
-import * as Blockly from "blockly/core";
-
-Blockly.Arduino.sensebox_phyphox_init = function () {
-  var name = this.getFieldValue("devicename");
-  Blockly.Arduino.libraries_["phyphox_library"] = `#include <phyphoxBle.h>`;
-  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
-    '#include "SenseBoxMCU.h"';
-  Blockly.Arduino.phyphoxSetupCode_[
-    "phyphox_start"
-  ] = `PhyphoxBLE::start("${name}");`;
-  var code = ``;
-  return code;
-};
-
-Blockly.Arduino.sensebox_phyphox_experiment = function () {
-  var experimentname = "experiment";
-  var title = this.getFieldValue("title").replace(/[^a-zA-Z0-9]/g, "");
-  var description = this.getFieldValue("description");
-  var branch = Blockly.Arduino.statementToCode(this, "view");
-  Blockly.Arduino.phyphoxSetupCode_[
-    `PhyphoxBleExperiment_${experimentname}`
-  ] = `PhyphoxBleExperiment ${experimentname};`;
-  Blockly.Arduino.phyphoxSetupCode_[
-    `setTitle_${title}`
-  ] = `${experimentname}.setTitle("${title}");`;
-  Blockly.Arduino.phyphoxSetupCode_[
-    `setCategory_senseBoxExperiments}`
-  ] = `${experimentname}.setCategory("senseBox Experimente");`;
-  Blockly.Arduino.phyphoxSetupCode_[
-    `setDescription_${description}`
-  ] = `${experimentname}.setDescription("${description}");`;
-  Blockly.Arduino.phyphoxSetupCode_[
-    `addView_${experimentname}`
-  ] = `PhyphoxBleExperiment::View firstView;\nfirstView.setLabel("Messwerte"); //Create a "view"`;
-  Blockly.Arduino.phyphoxSetupCode_[`addGraph`] = `${branch}`;
-  Blockly.Arduino.phyphoxSetupCode_[
-    `addView_firstview`
-  ] = `${experimentname}.addView(firstView);`; //Attach view to experiment
-  Blockly.Arduino.phyphoxSetupCode_[
-    `addExperiment_${experimentname}`
-  ] = `PhyphoxBLE::addExperiment(${experimentname});`; //Attach experiment to server
-
-  var code = ``;
-  return code;
-};
-
-Blockly.Arduino["sensebox_phyphox_timestamp"] = function () {
-  var code = 0;
-  return [code, Blockly.Arduino.ORDER_ATOMIC];
-};
-
-Blockly.Arduino["sensebox_phyphox_channel"] = function () {
-  var channel = parseFloat(this.getFieldValue("channel"));
-  var code = channel;
-  return [code, Blockly.Arduino.ORDER_ATOMIC];
-};
-
-Blockly.Arduino.sensebox_phyphox_sendchannel = function (block) {
-  var channel = this.getFieldValue("channel");
-  var value =
-    Blockly.Arduino.valueToCode(this, "value", Blockly.Arduino.ORDER_ATOMIC) ||
-    "1";
-
-  var code = `float channel${channel} = ${value};\n`;
-  return code;
-};
-
-Blockly.Arduino.sensebox_phyphox_graph = function () {
-  var label = this.getFieldValue("label").replace(/[^a-zA-Z0-9]/g, "");
-  var unitx = this.getFieldValue("unitx");
-  var unity = this.getFieldValue("unity");
-  var labelx = this.getFieldValue("labelx");
-  var labely = this.getFieldValue("labely");
-  var style = this.getFieldValue("style");
-  var channelX =
-    Blockly.Arduino.valueToCode(
-      this,
-      "channel0",
-      Blockly.Arduino.ORDER_ATOMIC
-    ) || 0;
-  var channelY =
-    Blockly.Arduino.valueToCode(
-      this,
-      "channel1",
-      Blockly.Arduino.ORDER_ATOMIC
-    ) || 1;
-
-  var code = `PhyphoxBleExperiment::Graph ${label};\n`; //Create graph which will plot random numbers over time
-  code += `${label}.setLabel("${label}");\n`;
-  code += `${label}.setUnitX("${unitx}");\n`;
-  code += `${label}.setUnitY("${unity}");\n`;
-  code += `${label}.setLabelX("${labelx}");\n`;
-  code += `${label}.setLabelY("${labely}");\n`;
-  code += `${label}.setStyle("${style}");\n`;
-  code += `${label}.setChannel(${channelX}, ${channelY});\n`;
-  code += `firstView.addElement(${label});\n`;
-  return code;
-};
-
-Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
-  var branch = Blockly.Arduino.statementToCode(this, "sendValues");
-  var blocks = this.getDescendants();
-  console.log(blocks);
-  var count = 0;
-  if (blocks !== undefined) {
-    for (var i = 0; i < blocks.length; i++) {
-      if (blocks[i].type === "sensebox_phyphox_sendchannel") {
-        count++;
-      }
-    }
-  }
-  if (count === 5) {
-  }
-  var string = "";
-
-  for (var j = 1; j <= count; j++) {
-    console.log("append");
-    if (string === "") {
-      string += `channel${j}`;
-    } else if (string !== "") {
-      string += `, channel${j}`;
-    }
-  }
-  Blockly.Arduino.loopCodeOnce_["phyphox_poll"] = `PhyphoxBLE::poll();`;
-  var code = `${branch}\nPhyphoxBLE::write(${string});`;
-  return code;
-};
@@ -33,6 +33,7 @@ Blockly.Arduino.sensebox_ws2818_led = function () {
    var dropdown_pin = this.getFieldValue('Port');
    var position = Blockly.Arduino.valueToCode(this, 'POSITION', Blockly.Arduino.ORDER_ATOMIC) || '0';
    var color = Blockly.Arduino.valueToCode(this, 'COLOR', Blockly.Arduino.ORDER_ATOMIC) || '0'
+    console.log(color)
    var code = `rgb_led_${dropdown_pin}.setPixelColor(${position},rgb_led_${dropdown_pin}.Color(${color}));\nrgb_led_${dropdown_pin}.show();\n`;
    return code;
 };
@@ -1,27 +1,27 @@
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core';
+

 Blockly.Arduino.sensebox_lora_initialize_otaa = function (block) {
-  var deivceID = this.getFieldValue("DEVICEID");
-  var appID = this.getFieldValue("APPID");
-  var appKey = this.getFieldValue("APPKEY");
-  var interval = this.getFieldValue("INTERVAL");
-  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
-    '#include "SenseBoxMCU.h"';
-  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
-  Blockly.Arduino.libraries_["library_lmic"] = "#include <lmic.h>";
-  Blockly.Arduino.libraries_["library_hal"] = "#include <hal/hal.h>";
-  Blockly.Arduino.definitions_["define_LoRaVariablesOTAA"] = `
-    static const u1_t PROGMEM APPEUI[8]= {${appID}};
+    var deivceID = this.getFieldValue('DEVICEID');
+    var appID = this.getFieldValue('APPID');
+    var appKey = this.getFieldValue('APPKEY');
+    var interval = this.getFieldValue('INTERVAL');
+    Blockly.Arduino.libraries_['library_senseBoxMCU'] = '#include "SenseBoxMCU.h"';
+    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
+    Blockly.Arduino.libraries_['library_lmic'] = '#include <lmic.h>';
+    Blockly.Arduino.libraries_['library_hal'] = '#include <hal/hal.h>';
+    Blockly.Arduino.definitions_['define_LoRaVariablesOTAA'] = `
+    static const u1_t PROGMEM APPEUI[8]= `+ appID + ` ;
    void os_getArtEui (u1_t* buf) { memcpy_P(buf, APPEUI , 8);}
  
-    static const u1_t PROGMEM DEVEUI[8]= {${deivceID}};
+    static const u1_t PROGMEM DEVEUI[8]= `+ deivceID + `;
    void os_getDevEui (u1_t* buf) { memcpy_P(buf, DEVEUI , 8);}
  
    // This key should be in big endian format (or, since it is not really a
    // number but a block of memory, endianness does not really apply). In
    // practice, a key taken from ttnctl can be copied as-is.
    // The key shown here is the semtech default key.
-    static const u1_t PROGMEM APPKEY[16] = {${appKey}};
+    static const u1_t PROGMEM APPKEY[16] = `+ appKey + `;
    void os_getDevKey (u1_t* buf) {  memcpy_P(buf, APPKEY , 16);}
  
    static osjob_t sendjob;
@@ -38,7 +38,7 @@ Blockly.Arduino.sensebox_lora_initialize_otaa = function (block) {
        .dio = {PIN_XB1_INT, PIN_XB1_INT, LMIC_UNUSED_PIN},
    };`;

-  Blockly.Arduino.codeFunctions_["functions_initLora"] = `
+    Blockly.Arduino.codeFunctions_['functions_initLora'] = `
    void initLora() {
      delay(2000);
      // LMIC init
@@ -48,9 +48,9 @@ Blockly.Arduino.sensebox_lora_initialize_otaa = function (block) {
    
      // Start job (sending automatically starts OTAA too)
      do_send(&sendjob);
-    }`;
+    }`

-  Blockly.Arduino.codeFunctions_["functions_onEvent"] = `
+    Blockly.Arduino.codeFunctions_['functions_onEvent'] = `
    void onEvent (ev_t ev) {
      Serial.print(os_getTime());
      Serial.print(": ");
@@ -120,18 +120,16 @@ Blockly.Arduino.sensebox_lora_initialize_otaa = function (block) {
              break;
      }
  }`;
-  Blockly.Arduino.loraSetupCode_["initLora"] = "initLora();\n";
-  Blockly.Arduino.setupCode_["serial.begin"] =
-    "Serial.begin(9600);\ndelay(1000);\n";
-  var code = "";
+    Blockly.Arduino.loraSetupCode_['initLora'] = 'initLora();\n';
+    Blockly.Arduino.setupCode_['serial.begin'] = 'Serial.begin(9600);\ndelay(1000);\n';
+    var code = '';
    return code;
 };

 Blockly.Arduino.sensebox_lora_message_send = function (block) {
-  Blockly.Arduino.libraries_["library_lora_message"] =
-    "#include <LoraMessage.h>";
-  var lora_sensor_values = Blockly.Arduino.statementToCode(block, "DO");
-  Blockly.Arduino.functionNames_["functions_do_send"] = `
+    Blockly.Arduino.libraries_['library_lora_message'] = '#include <LoraMessage.h>';
+    var lora_sensor_values = Blockly.Arduino.statementToCode(block, 'DO');
+    Blockly.Arduino.functionNames_['functions_do_send'] = `
  void do_send(osjob_t* j){
      // Check if there is not a current TX/RX job running
      if (LMIC.opmode & OP_TXRXPEND) {
@@ -146,41 +144,39 @@ Blockly.Arduino.sensebox_lora_message_send = function (block) {
      }
      // Next TX is scheduled after TX_COMPLETE event.
  }`;
-  Blockly.Arduino.loopCodeOnce_["os_runloop"] = "os_runloop_once();";
-  return "";
-};
+    Blockly.Arduino.loopCodeOnce_['os_runloop'] = 'os_runloop_once();'
+    return ''
+}

 /**
 * Block send Data to TTN
 */
 Blockly.Arduino.sensebox_send_lora_sensor_value = function (block) {
-  const reading =
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
-    '"Keine Eingabe"';
-  var messageBytes = this.getFieldValue("MESSAGE_BYTES");
-  var code = "";
+    const reading = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || '"Keine Eingabe"';
+    var messageBytes = this.getFieldValue('MESSAGE_BYTES');
+    var code = ''
    switch (Number(messageBytes)) {
        case 1:
-      code = `message.addUint8(${reading});\n`;
+            code = `message.addUint8(${reading});\n`
            break;
        case 2:
-      code = `message.addUint16(${reading});\n`;
+            code = `message.addUint16(${reading});\n`
            break;
        case 3:
            code = `message.addUint8(${reading});
-        message.addUint16(${reading} >> 8);\n`;
+        message.addUint16(${reading} >> 8);\n`
            break;
        default:
-      code = `message.addUint16(${reading});\n`;
+            code = `message.addUint16(${reading});\n`
    }
    return code;
 };

 Blockly.Arduino.sensebox_lora_cayenne_send = function (block) {
-  Blockly.Arduino.libraries_["library_cayene"] = "#include <CayenneLPP.h>";
-  Blockly.Arduino.variables_["variable_cayenne"] = "CayenneLPP lpp(51);";
-  var lora_sensor_values = Blockly.Arduino.statementToCode(block, "DO");
-  Blockly.Arduino.functionNames_["functions_do_send"] = `
+    Blockly.Arduino.libraries_['library_cayene'] = '#include <CayenneLPP.h>';
+    Blockly.Arduino.variables_['variable_cayenne'] = 'CayenneLPP lpp(51);'
+    var lora_sensor_values = Blockly.Arduino.statementToCode(block, 'DO');
+    Blockly.Arduino.functionNames_['functions_do_send'] = `
  void do_send(osjob_t* j){
      // Check if there is not a current TX/RX job running
      if (LMIC.opmode & OP_TXRXPEND) {
@@ -195,38 +191,18 @@ Blockly.Arduino.sensebox_lora_cayenne_send = function (block) {
      }
      // Next TX is scheduled after TX_COMPLETE event.
  }`;
-  Blockly.Arduino.loopCodeOnce_["os_runloop"] = "os_runloop_once();";
-  return "";
-};
+    Blockly.Arduino.loopCodeOnce_['os_runloop'] = 'os_runloop_once();'
+    return '';
+}

 Blockly.Arduino.sensebox_lora_ttn_mapper = function (block) {
-  var latitude = Blockly.Arduino.valueToCode(
-    this,
-    "Latitude",
-    Blockly.Arduino.ORDER_ATOMIC
-  );
-  var longitude = Blockly.Arduino.valueToCode(
-    this,
-    "Longitude",
-    Blockly.Arduino.ORDER_ATOMIC
-  );
-  var altitude = Blockly.Arduino.valueToCode(
-    this,
-    "Altitude",
-    Blockly.Arduino.ORDER_ATOMIC
-  );
-  var pDOP = Blockly.Arduino.valueToCode(
-    this,
-    "pDOP",
-    Blockly.Arduino.ORDER_ATOMIC
-  );
-  var fixType = Blockly.Arduino.valueToCode(
-    this,
-    "Fix Type",
-    Blockly.Arduino.ORDER_ATOMIC
-  );
-  var fixTypeLimit = this.getFieldValue("dropdown");
-  Blockly.Arduino.functionNames_["functions_do_send"] = `
+    var latitude = Blockly.Arduino.valueToCode(this, 'Latitude', Blockly.Arduino.ORDER_ATOMIC)
+    var longitude = Blockly.Arduino.valueToCode(this, 'Longitude', Blockly.Arduino.ORDER_ATOMIC)
+    var altitude = Blockly.Arduino.valueToCode(this, 'Altitude', Blockly.Arduino.ORDER_ATOMIC)
+    var pDOP = Blockly.Arduino.valueToCode(this, 'pDOP', Blockly.Arduino.ORDER_ATOMIC)
+    var fixType = Blockly.Arduino.valueToCode(this, 'Fix Type', Blockly.Arduino.ORDER_ATOMIC)
+    var fixTypeLimit = this.getFieldValue('dropdown');
+    Blockly.Arduino.functionNames_['functions_do_send'] = `
  void do_send(osjob_t* j){
      // Check if there is not a current TX/RX job running
      if (LMIC.opmode & OP_TXRXPEND) {
@@ -269,30 +245,29 @@ Blockly.Arduino.sensebox_lora_ttn_mapper = function (block) {
      }
      // Next TX is scheduled after TX_COMPLETE event.
  }`;
-  Blockly.Arduino.loopCodeOnce_["os_runloop"] = "os_runloop_once();";
-  return "";
-};
+    Blockly.Arduino.loopCodeOnce_['os_runloop'] = 'os_runloop_once();'
+    return '';
+}

 Blockly.Arduino.sensebox_lora_initialize_abp = function (block) {
-  var nwskey = this.getFieldValue("NWSKEY");
-  var appskey = this.getFieldValue("APPSKEY");
-  var devaddr = this.getFieldValue("DEVADDR");
-  var interval = this.getFieldValue("INTERVAL");
-  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
-    '#include "SenseBoxMCU.h"';
-  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
-  Blockly.Arduino.libraries_["library_lmic"] = "#include <lmic.h>";
-  Blockly.Arduino.libraries_["library_hal"] = "#include <hal/hal.h>";
-  Blockly.Arduino.definitions_["define_LoRaVariablesABP"] = `
+    var nwskey = this.getFieldValue('NWSKEY');
+    var appskey = this.getFieldValue('APPSKEY');
+    var devaddr = this.getFieldValue('DEVADDR');
+    var interval = this.getFieldValue('INTERVAL');
+    Blockly.Arduino.libraries_['library_senseBoxMCU'] = '#include "SenseBoxMCU.h"';
+    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
+    Blockly.Arduino.libraries_['library_lmic'] = '#include <lmic.h>';
+    Blockly.Arduino.libraries_['library_hal'] = '#include <hal/hal.h>';
+    Blockly.Arduino.definitions_['define_LoRaVariablesABP'] = `
    // LoRaWAN NwkSKey, network session key
    // This is the default Semtech key, which is used by the early prototype TTN
    // network.
-    static const PROGMEM u1_t NWKSKEY[16] = { ${nwskey} };
+    static const PROGMEM u1_t NWKSKEY[16] = ${nwskey};
    
    // LoRaWAN AppSKey, application session key
    // This is the default Semtech key, which is used by the early prototype TTN
    // network.
-    static const u1_t PROGMEM APPSKEY[16] = { ${appskey} };
+    static const u1_t PROGMEM APPSKEY[16] = ${appskey};
    
    // LoRaWAN end-device address (DevAddr)
    static const u4_t DEVADDR = 0x${devaddr};
@@ -318,7 +293,7 @@ Blockly.Arduino.sensebox_lora_initialize_abp = function (block) {
        .dio = {PIN_XB1_INT, PIN_XB1_INT, LMIC_UNUSED_PIN},
    };`;

-  Blockly.Arduino.codeFunctions_["functions_initLora"] = `
+    Blockly.Arduino.codeFunctions_['functions_initLora'] = `
    void initLora() {
      delay(2000);
      // LMIC init
@@ -384,9 +359,9 @@ Blockly.Arduino.sensebox_lora_initialize_abp = function (block) {
  
      // Start job
      do_send(&sendjob);
-    }`;
+    }`

-  Blockly.Arduino.codeFunctions_["functions_onEvent"] = `
+    Blockly.Arduino.codeFunctions_['functions_onEvent'] = `
    void onEvent (ev_t ev) {
      Serial.print(os_getTime());
      Serial.print(": ");
@@ -451,77 +426,60 @@ Blockly.Arduino.sensebox_lora_initialize_abp = function (block) {
              break;
      }
  }`;
-  Blockly.Arduino.loraSetupCode_["initLora"] = "initLora();\n";
-  Blockly.Arduino.setupCode_["serial.begin"] =
-    "Serial.begin(9600);\ndelay(1000);\n";
-  return "";
-};
+    Blockly.Arduino.loraSetupCode_['initLora'] = 'initLora();\n';
+    Blockly.Arduino.setupCode_['serial.begin'] = 'Serial.begin(9600);\ndelay(1000);\n';
+    return '';
+}

 Blockly.Arduino.sensebox_lora_cayenne_temperature = function (block) {
-  var temperature =
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
-    0;
-  var channel = this.getFieldValue("CHANNEL");
+    var temperature = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var channel = this.getFieldValue('CHANNEL');
    var code = `lpp.addTemperature(${channel}, ${temperature});\n`;
    return code;
-};
+}

 Blockly.Arduino.sensebox_lora_cayenne_humidity = function (block) {
-  var humidity =
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
-    0;
-  var channel = this.getFieldValue("CHANNEL");
+    var humidity = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var channel = this.getFieldValue('CHANNEL');
    var code = `lpp.addRelativeHumidity(${channel}, ${humidity});\n`;
    return code;
-};
+}

 Blockly.Arduino.sensebox_lora_cayenne_pressure = function (block) {
-  var pressure =
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
-    0;
-  var channel = this.getFieldValue("CHANNEL");
+    var pressure = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var channel = this.getFieldValue('CHANNEL');
    var code = `lpp.addBarometricPressure(${channel}, ${pressure});\n`;
    return code;
-};
+}

 Blockly.Arduino.sensebox_lora_cayenne_luminosity = function (block) {
-  var luminosity =
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
-    0;
-  var channel = this.getFieldValue("CHANNEL");
+    var luminosity = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var channel = this.getFieldValue('CHANNEL');
    var code = `lpp.addLuminosity(${channel}, ${luminosity});\n`;
    return code;
-};
+}

 Blockly.Arduino.sensebox_lora_cayenne_sensor = function (block) {
-  var sensorValue =
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
-    0;
-  var channel = this.getFieldValue("CHANNEL");
+    var sensorValue = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var channel = this.getFieldValue('CHANNEL');
    var code = `lpp.addAnalogInput(${channel}, ${sensorValue});\n`;
    return code;
-};
+}

 Blockly.Arduino.sensebox_lora_cayenne_accelerometer = function (block) {
-  var x =
-    Blockly.Arduino.valueToCode(this, "X", Blockly.Arduino.ORDER_ATOMIC) || 0;
-  var y =
-    Blockly.Arduino.valueToCode(this, "Y", Blockly.Arduino.ORDER_ATOMIC) || 0;
-  var z =
-    Blockly.Arduino.valueToCode(this, "Z", Blockly.Arduino.ORDER_ATOMIC) || 0;
-  var channel = this.getFieldValue("CHANNEL");
+    var x = Blockly.Arduino.valueToCode(this, 'X', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var y = Blockly.Arduino.valueToCode(this, 'Y', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var z = Blockly.Arduino.valueToCode(this, 'Z', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var channel = this.getFieldValue('CHANNEL');
    var code = `lpp.addAccelerometer(${channel}, ${x}, ${y}, ${z});\n`;
    return code;
-};
+}

 Blockly.Arduino.sensebox_lora_cayenne_gps = function (block) {
-  var lat =
-    Blockly.Arduino.valueToCode(this, "LAT", Blockly.Arduino.ORDER_ATOMIC) || 0;
-  var lng =
-    Blockly.Arduino.valueToCode(this, "LNG", Blockly.Arduino.ORDER_ATOMIC) || 0;
-  var alt =
-    Blockly.Arduino.valueToCode(this, "ALT", Blockly.Arduino.ORDER_ATOMIC) || 0;
-  var channel = this.getFieldValue("CHANNEL");
-  var code = `lpp.addGPS(${channel}, ${lat}, ${lng}, ${alt});\n`;
+    var lat = Blockly.Arduino.valueToCode(this, 'LAT', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var lng = Blockly.Arduino.valueToCode(this, 'LNG', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var alt = Blockly.Arduino.valueToCode(this, 'ALT', Blockly.Arduino.ORDER_ATOMIC) || 0
+    var channel = this.getFieldValue('CHANNEL');
+    var code = `lpp.addGPS(${channel}, ${lat}, ${lng}, ${alt});\n`
    return code;
-};
+}
@@ -1,96 +0,0 @@
-import Blockly from "blockly";
-
-Blockly.Arduino.sensebox_rtc_init = function () {
-  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
-  Blockly.Arduino.definitions_["RTC"] = `RV8523 rtc;`;
-  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
-    '#include "SenseBoxMCU.h"';
-  Blockly.Arduino.setupCode_["rtc.begin"] = `rtc.begin();`;
-  var code = ``;
-  return code;
-};
-
-Blockly.Arduino.sensebox_rtc_set = function () {
-  var second =
-    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
-    "0";
-  var minutes =
-    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
-    "0";
-  var hour =
-    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
-    "0";
-  var day =
-    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
-    "0";
-  var month =
-    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
-    "0";
-  var year =
-    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
-    "0";
-  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
-  Blockly.Arduino.setupCode_["rtc.start"] = `rtc.start();`;
-  Blockly.Arduino.setupCode_[
-    "rtc.batterySwitchOver"
-  ] = `rtc.batterySwitchOver(1);`;
-  Blockly.Arduino.setupCode_[
-    "rtc.set"
-  ] = `rtc.set(${second}, ${minutes}, ${hour}, ${day}, ${month}, ${year});`;
-  var code = ``;
-  return code;
-};
-
-Blockly.Arduino.sensebox_rtc_ntp = function () {
-  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
-  Blockly.Arduino.setupCode_["rtc.start"] = `rtc.start();`;
-  Blockly.Arduino.setupCode_[
-    "rtc.batterySwitchOver"
-  ] = `rtc.batterySwitchOver(1);`;
-  Blockly.Arduino.setupCode_[
-    "rtc.set"
-  ] = `rtc.set(SECOND, MINUTE, HOUR, DAY, MONTH, YEAR);`;
-  var code = ``;
-  return code;
-};
-
-Blockly.Arduino.sensebox_rtc_get = function () {
-  var dropdown = this.getFieldValue("dropdown");
-  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
-  Blockly.Arduino.setupCode_["rtc.start"] = `rtc.start();`;
-  Blockly.Arduino.setupCode_[
-    "rtc.batterySwitchOver"
-  ] = `rtc.batterySwitchOver(1);`;
-  Blockly.Arduino.loopCodeOnce_[
-    "rtc_variables"
-  ] = `uint8_t sec, min, hour, day, month;\nuint16_t year;`;
-
-  Blockly.Arduino.loopCodeOnce_[
-    "rtc_get"
-  ] = `rtc.get(&sec, &min, &hour, &day, &month, &year);`;
-
-  var code = `${dropdown}`;
-  return [code, Blockly.Arduino.ORDER_ATOMIC];
-};
-
-Blockly.Arduino.sensebox_rtc_get_timestamp = function () {
-  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
-  Blockly.Arduino.setupCode_["rtc.start"] = `rtc.start();`;
-  Blockly.Arduino.setupCode_[
-    "rtc.batterySwitchOver"
-  ] = `rtc.batterySwitchOver(1);`;
-  Blockly.Arduino.loopCodeOnce_[
-    "rtc_variables"
-  ] = `uint8_t sec, min, hour, day, month;\nuint16_t year;`;
-  Blockly.Arduino.variables_["rtc_timestamp"] = `char timestamp[20];`;
-  Blockly.Arduino.loopCodeOnce_[
-    "rtc_get"
-  ] = `rtc.get(&sec, &min, &hour, &day, &month, &year);`;
-
-  Blockly.Arduino.loopCodeOnce_[
-    ""
-  ] = `sprintf(timestamp, "%02d-%02d-%02dT%02d:%02d:%02dZ", year, month, day, hour, min, sec);`;
-
-  var code = `timestamp`;
-  return [code, Blockly.Arduino.ORDER_ATOMIC];
-};
@@ -1,5 +1,4 @@
-import Blockly from 'blockly';
-
+import Blockly from "blockly";

 /* SD-Card Blocks using the Standard SD Library*/
 /**
@@ -10,45 +9,49 @@ import Blockly from 'blockly';
 */

 Blockly.Arduino.sensebox_sd_create_file = function (block) {
-    var filename = this.getFieldValue('Filename');
-    var res = filename.slice(0, 4);
-    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
-    Blockly.Arduino.libraries_['library_sd'] = '#include <SD.h>';
-    Blockly.Arduino.definitions_['define_' + res] = 'File dataFile' + res + ';';
-    Blockly.Arduino.setupCode_['sensebox_sd'] = 'SD.begin(28);';
-    Blockly.Arduino.setupCode_['sensebox_sd' + filename] = 'dataFile' + res + ' = SD.open("' + filename + '", FILE_WRITE);\ndataFile' + res + '.close();\n';
-    var code = '';
+  var filename = this.getFieldValue("Filename");
+  var extension = this.getFieldValue("extension");
+  var newFileName = filename.concat(".", extension);
+  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
+  Blockly.Arduino.libraries_["library_sd"] = "#include <SD.h>";
+  Blockly.Arduino.definitions_["define_" + filename] = `File ${filename};`;
+  Blockly.Arduino.setupCode_["sensebox_sd"] = "SD.begin(28);\n";
+  Blockly.Arduino.setupCode_[
+    "sensebox_sd" + filename
+  ] = `${filename} = SD.open("${newFileName}", FILE_WRITE);\n${filename}.close();\n`;
+  var code = "";
  return code;
 };

 Blockly.Arduino.sensebox_sd_open_file = function (block) {
-    var filename = this.getFieldValue('Filename');
-    var res = filename.slice(0, 4);
-    var branch = Blockly.Arduino.statementToCode(block, 'SD');
-    var code = 'dataFile' + res + ' = SD.open("' + filename + '", FILE_WRITE);\n'
+  var filename = this.getFieldValue("Filename");
+  var extension = this.getFieldValue("extension");
+  var newFileName = filename.concat(".", extension);
+  var branch = Blockly.Arduino.statementToCode(block, "SD");
+  var code = `${filename} = SD.open("${newFileName}", FILE_WRITE);\n`;
  code += branch;
-    code += 'dataFile' + res + '.close();\n'
+  code += `${filename}.close();\n`;
  return code;
 };

 Blockly.Arduino.sensebox_sd_write_file = function (block) {
  if (this.parentBlock_ != null) {
-        var filename = this.getSurroundParent().getFieldValue('Filename');
+    var filename = this.getSurroundParent().getFieldValue("Filename");
  }
-    var res = filename.slice(0, 4);
-    var text = Blockly.Arduino.valueToCode(this, 'DATA', Blockly.Arduino.ORDER_ATOMIC) || '"Keine Eingabe"';
-    var linebreak = this.getFieldValue('linebreak');
+  var branch =
+    Blockly.Arduino.valueToCode(this, "DATA", Blockly.Arduino.ORDER_ATOMIC) ||
+    '"Keine Eingabe"';
+  var linebreak = this.getFieldValue("linebreak");
  if (linebreak === "TRUE") {
    linebreak = "ln";
  } else {
    linebreak = "";
  }
-    var code = '';
-    if (text === "gps.getLongitude()" || text === "gps.getLatitude()") {
-        code = 'dataFile' + res + '.print' + linebreak + '(' + text + ',5);\n'
-    }
-    else {
-        code = 'dataFile' + res + '.print' + linebreak + '(' + text + ');\n'
+  var code = "";
+  if (branch === "gps.getLongitude()" || branch === "gps.getLatitude()") {
+    code = `${filename}.print${linebreak}(${branch},5);\n`;
+  } else {
+    code = `${filename}.print${linebreak}(${branch});\n`;
  }
  return code;
 };
@@ -1,38 +1,3 @@
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core';
+import { Block } from 'blockly';

-/*
- * Multiplexer
- */
-Blockly.Arduino.sensebox_multiplexer_init = function () {
-  // Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
-  var nrChannels =
-    Blockly.Arduino.valueToCode(
-      this,
-      "nrChannels",
-      Blockly.Arduino.ORDER_ATOMIC
-    ) | 0;
-  var array = [];
-  for (var i = 0; i < nrChannels; i++) {
-    array.push(i);
-  }
-  Blockly.Arduino.libraries_["library_wire"] = "#include <Wire.h>";
-  Blockly.Arduino.definitions_[
-    "define_multiplexer"
-  ] = `byte multiplexAddress = 0x77;
-    byte channels[] = {${array}};`;
-  // Blockly.Arduino.setupCode_['sensebox_display_begin'] = 'senseBoxIO.powerI2C(true);\ndelay(2000);\ndisplay.begin(SSD1306_SWITCHCAPVCC, 0x3D);\ndisplay.display();\ndelay(100);\ndisplay.clearDisplay();';
-  var code = "";
-  return code;
-};
-
-Blockly.Arduino.sensebox_multiplexer_changeChannel = function () {
-  var channel = Blockly.Arduino.valueToCode(
-    this,
-    "Channel",
-    Blockly.Arduino.ORDER_ATOMIC
-  );
-  var code = `Wire.beginTransmission(0x77);
-  Wire.write(1 << channels[${channel - 1}]);
-  Wire.endTransmission();`;
-  return code;
-};
@@ -1,4 +1,4 @@
-import Blockly from 'blockly';
+import Blockly from "blockly";

 /**
 * @license Licensed under the Apache License, Version 2.0 (the "License"):
@@ -16,10 +16,14 @@ import Blockly from 'blockly';
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino['time_delay'] = function (block) {
-    var delayTime = Blockly.Arduino.valueToCode(
-        block, 'DELAY_TIME_MILI', Blockly.Arduino.ORDER_ATOMIC) || '0';
-    var code = 'delay(' + delayTime + ');\n';
+Blockly.Arduino["time_delay"] = function (block) {
+  var delayTime =
+    Blockly.Arduino.valueToCode(
+      block,
+      "DELAY_TIME_MILI",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || "0";
+  var code = "delay(" + delayTime + ");\n";
  return code;
 };

@@ -29,10 +33,14 @@ Blockly.Arduino['time_delay'] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino['time_delaymicros'] = function (block) {
-    var delayTimeMs = Blockly.Arduino.valueToCode(
-        block, 'DELAY_TIME_MICRO', Blockly.Arduino.ORDER_ATOMIC) || '0';
-    var code = 'delayMicroseconds(' + delayTimeMs + ');\n';
+Blockly.Arduino["time_delaymicros"] = function (block) {
+  var delayTimeMs =
+    Blockly.Arduino.valueToCode(
+      block,
+      "DELAY_TIME_MICRO",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || "0";
+  var code = "delayMicroseconds(" + delayTimeMs + ");\n";
  return code;
 };

@@ -42,8 +50,8 @@ Blockly.Arduino['time_delaymicros'] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino['time_millis'] = function (block) {
-    var code = 'millis()';
+Blockly.Arduino["time_millis"] = function (block) {
+  var code = "millis()";
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };

@@ -53,8 +61,8 @@ Blockly.Arduino['time_millis'] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino['time_micros'] = function (block) {
-    var code = 'micros()';
+Blockly.Arduino["time_micros"] = function (block) {
+  var code = "micros()";
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };

@@ -64,17 +72,22 @@ Blockly.Arduino['time_micros'] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino['infinite_loop'] = function (block) {
-    return 'while(true);\n';
+Blockly.Arduino["infinite_loop"] = function (block) {
+  return "while(true);\n";
 };

 Blockly.Arduino.sensebox_interval_timer = function (block) {
-    var interval = this.getFieldValue('interval');
-    Blockly.Arduino.variables_['define_interval_variables'] = 'const long interval = ' + interval + ';\nlong time_start = 0;\nlong time_actual = 0;';
-    var branch = Blockly.Arduino.statementToCode(block, 'DO');
-    var code = 'time_start = millis();\n';
-    code += 'if (time_start > time_actual + interval) {\n  time_actual = millis();\n'
+  var intervalTime = this.getFieldValue("interval");
+  var intervalName = this.getFieldValue("name");
+  Blockly.Arduino.variables_[`define_interval_variables${intervalName}`] = `
+const long interval${intervalName} = ${intervalTime};
+long time_start${intervalName} = 0;
+long time_actual${intervalName} = 0;`;
+  var branch = Blockly.Arduino.statementToCode(block, "DO");
+  var code = `time_start${intervalName} = millis();\n`;
+  code += `
+if (time_start${intervalName} > time_actual${intervalName} + interval${intervalName}) {\n  time_actual${intervalName} = millis();\n`;
  code += branch;
-    code += '}\n'
+  code += "}\n";
  return code;
 };
@@ -1,44 +1,36 @@
-import Blockly from "blockly";
+import Blockly from 'blockly';

 const setVariableFunction = function (defaultValue) {
    return function (block) {
-    const variableName = Blockly["Arduino"].variableDB_.getName(
-      block.getFieldValue("VAR"),
+        const variableName = Blockly['Arduino'].variableDB_.getName(
+            block.getFieldValue('VAR'),
            Blockly.Variables.NAME_TYPE
        );
-    const variableValue = Blockly["Arduino"].valueToCode(
+        const variableValue = Blockly['Arduino'].valueToCode(
            block,
-      "VALUE",
-      Blockly["Arduino"].ORDER_ATOMIC
+            'VALUE',
+            Blockly['Arduino'].ORDER_ATOMIC
        );

-    const allVars = Blockly.getMainWorkspace()
-      .getVariableMap()
-      .getAllVariables();
-    const myVar = allVars.filter((v) => v.name === variableName)[0];
-    var code = "";
+        const allVars = Blockly.getMainWorkspace().getVariableMap().getAllVariables();
+        const myVar = allVars.filter(v => v.name === variableName)[0]
+        var code = ''

        switch (myVar.type) {
            default:
-        Blockly.Arduino.variables_[variableName + myVar.type] =
-          myVar.type + " " + myVar.name + ";\n";
-        code = variableName + " = " + (variableValue || defaultValue) + ";\n";
+                Blockly.Arduino.variables_[myVar + myVar.type] = myVar.type + " " + myVar.name + ';\n';
+                code = variableName + ' = ' + (variableValue || defaultValue) + ';\n';
                break;
-      case "Array":
+            case 'Array':
                var arrayType;
                var number;

                if (this.getChildren().length > 0) {
-          if (this.getChildren()[0].type === "lists_create_empty") {
-            arrayType = this.getChildren()[0].getFieldValue("type");
-            number = Blockly.Arduino.valueToCode(
-              this.getChildren()[0],
-              "NUMBER",
-              Blockly["Arduino"].ORDER_ATOMIC
-            );
-            Blockly.Arduino.variables_[
-              myVar + myVar.type
-            ] = `${arrayType} ${myVar.name} [${number}];\n`;
+                    if (this.getChildren()[0].type === 'lists_create_empty') {
+
+                        arrayType = this.getChildren()[0].getFieldValue('type');
+                        number = Blockly.Arduino.valueToCode(this.getChildren()[0], 'NUMBER', Blockly['Arduino'].ORDER_ATOMIC);
+                        Blockly.Arduino.variables_[myVar + myVar.type] = `${arrayType} ${myVar.name} [${number}];\n`;
                    }
                }
                break;
@@ -48,13 +40,13 @@ const setVariableFunction = function (defaultValue) {
 };

 const getVariableFunction = function (block) {
-  const variableName = Blockly["Arduino"].variableDB_.getName(
-    block.getFieldValue("VAR"),
+    const variableName = Blockly['Arduino'].variableDB_.getName(
+        block.getFieldValue('VAR'),
        Blockly.Variables.NAME_TYPE
    );
    var code = variableName;
-  return [code, Blockly["Arduino"].ORDER_ATOMIC];
+    return [code, Blockly['Arduino'].ORDER_ATOMIC];
 };

-Blockly["Arduino"]["variables_set_dynamic"] = setVariableFunction();
-Blockly["Arduino"]["variables_get_dynamic"] = getVariableFunction;
+Blockly['Arduino']['variables_set_dynamic'] = setVariableFunction()
+Blockly['Arduino']['variables_get_dynamic'] = getVariableFunction;
@@ -1,31 +1,33 @@
-import Blockly from 'blockly';
+import Blockly from "blockly";
 /**
 * Webserver Blocks by Lucas Steinmann
 *
 */

 Blockly.Arduino.sensebox_initialize_http_server = function (block) {
-    var box_id = this.getFieldValue('Port');
-    Blockly.Arduino.libraries_['library_senseBoxMCU'] = '#include "SenseBoxMCU.h"';
-    Blockly.Arduino.codeFunctions_['define_wifi_server'] = 'WiFiServer server(' + box_id + ');';
-    Blockly.Arduino.setupCode_['sensebox_wifi_server_beging'] = 'server.begin();';
-    return '';
+  var box_id = this.getFieldValue("Port");
+  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
+    '#include "SenseBoxMCU.h"';
+  Blockly.Arduino.codeFunctions_["define_wifi_server"] =
+    "WiFiServer server(" + box_id + ");";
+  Blockly.Arduino.setupCode_["sensebox_wifi_server_beging"] = "server.begin();";
+  return "";
 };

 Blockly.Arduino.sensebox_http_on_client_connect = function (block) {
-    var onConnect = Blockly.Arduino.statementToCode(block, 'ON_CONNECT');
-    var code = '';
-    code += 'WiFiClient client = server.available();\n';
-    code += 'if (client && client.available()) {\n';
-    code += '  String request_string = listenClient(client);\n';
-    code += '  Request request;\n';
-    code += '  if (parseRequestSafe(request_string, request)) {\n';
+  var onConnect = Blockly.Arduino.statementToCode(block, "ON_CONNECT");
+  var code = "";
+  code += "WiFiClient client = server.available();\n";
+  code += "if (client && client.available()) {\n";
+  code += "  String request_string = listenClient(client);\n";
+  code += "  Request request;\n";
+  code += "  if (parseRequestSafe(request_string, request)) {\n";
  code += onConnect;
-    code += '  }\n';
-    code += '  delay(1);\n';
-    code += '  client.stop();\n';
-    code += '  delay(1);\n';
-    code += '}\n';
+  code += "  }\n";
+  code += "  delay(1);\n";
+  code += "  client.stop();\n";
+  code += "  delay(1);\n";
+  code += "}\n";
  return code;
 };

@@ -34,7 +36,6 @@ Blockly.Arduino.sensebox_http_method = function (block) {
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };

-
 Blockly.Arduino.sensebox_http_uri = function (block) {
  var code = "request.uri";
  return [code, Blockly.Arduino.ORDER_ATOMIC];
@@ -51,64 +52,76 @@ Blockly.Arduino.sensebox_http_user_agent = function (block) {
 };

 Blockly.Arduino.sensebox_generate_html_doc = function (block) {
-    var header = Blockly.Arduino.valueToCode(block, 'HEADER', Blockly.Arduino.ORDER_NONE) || '""';
-    var body = Blockly.Arduino.valueToCode(block, 'BODY', Blockly.Arduino.ORDER_NONE) || '""';
-    var code = 'buildHTML(' + header + ', ' + body + ')';
+  var header =
+    Blockly.Arduino.valueToCode(block, "HEADER", Blockly.Arduino.ORDER_NONE) ||
+    '""';
+  var body =
+    Blockly.Arduino.valueToCode(block, "BODY", Blockly.Arduino.ORDER_NONE) ||
+    '""';
+  var code = "buildHTML(" + header + ", " + body + ")";
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };

 Blockly.Arduino.sensebox_generate_http_succesful_response = function (block) {
-    var content = Blockly.Arduino.valueToCode(block, 'CONTENT', Blockly.Arduino.ORDER_NONE) || '""';
-    var code = 'client.println(buildSuccessfulResponse(request, ' + content + '));\n';
+  var content =
+    Blockly.Arduino.valueToCode(block, "CONTENT", Blockly.Arduino.ORDER_NONE) ||
+    '""';
+  var code =
+    "client.println(buildSuccessfulResponse(request, " + content + "));\n";
  return code;
 };

 Blockly.Arduino.sensebox_generate_http_not_found_response = function (block) {
-    var code = 'client.println(buildNotFoundResponse(request));\n';
+  var code = "client.println(buildNotFoundResponse(request));\n";
  return code;
 };

-
 Blockly.Arduino.sensebox_ip_address = function (block) {
  var code = "b->getIpAddress()";
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };

 Blockly.Arduino.sensebox_general_html_tag = function (block) {
-    var tag = this.getFieldValue('TAG');
+  var tag = this.getFieldValue("TAG");
  var code = 'buildTag("' + tag + '",';
  var n = 0;
-    var branch = Blockly.Arduino.valueToCode(block, 'DO' + n, Blockly.Arduino.ORDER_NONE);
+  var branch = Blockly.Arduino.valueToCode(
+    block,
+    "DO" + n,
+    Blockly.Arduino.ORDER_NONE
+  );
  if (branch.length > 0) {
-        code += '\n ' + branch;
+    code += "\n " + branch;
  } else {
    code += '""';
  }
  for (n = 1; n <= block.additionalChildCount_; n++) {
-        branch = Blockly.Arduino.valueToCode(block, 'DO' + n, Blockly.Arduino.ORDER_NONE);
-        code += ' +' + branch;
+    branch = Blockly.Arduino.valueToCode(
+      block,
+      "DO" + n,
+      Blockly.Arduino.ORDER_NONE
+    );
+    code += " +" + branch;
  }
-    return [code + ')', Blockly.Arduino.ORDER_ATOMIC];
+  return [code + ")", Blockly.Arduino.ORDER_ATOMIC];
 };

 Blockly.Arduino.sensebox_web_readHTML = function (block) {
-    var filename = this.getFieldValue('FILENAME');
-    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
-    Blockly.Arduino.libraries_['library_sd'] = '#include <SD.h>';
-    Blockly.Arduino.codeFunctions_['define_sd' + filename] = 'File webFile;';
-    Blockly.Arduino.setupCode_['sensebox_sd'] = 'SD.begin(28);';
-    var func = [
-        'String generateHTML(){',
-        ' webFile = SD.open("' + filename + '", FILE_READ);',
-        ' String finalString ="";',
-        ' while (webFile.available())',
-        '   {',
-        '   finalString+=(char)webFile.read();',
-        '   }',
-        ' return finalString;',
-        '}'];
-    var functionName = Blockly.Arduino.addFunction(
-        'generateHTML', func.join('\n'));
-    var code = functionName + '()';
+  var filename = this.getFieldValue("FILENAME");
+  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
+  Blockly.Arduino.libraries_["library_sd"] = "#include <SD.h>";
+  Blockly.Arduino.codeFunctions_["define_sd" + filename] = "File webFile;";
+  Blockly.Arduino.setupCode_["sensebox_sd"] = "SD.begin(28);";
+  Blockly.Arduino.codeFunctions_["generateHTML"] = `
+String generateHTML(){
+     webFile = SD.open("${filename}", FILE_READ);
+   String finalString ="";
+   while (webFile.available())
+     {
+     finalString+=(char)webFile.read();
+     }
+   return finalString;
+  }`;
+  var code = `generateHTML()`;
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
@@ -1,3 +1,4 @@
+
 const colours = {
    sensebox: 120,
    logic: 210,
@@ -11,10 +12,11 @@ const colours = {
    audio: 250,
    arrays: 33,
    mqtt: 90,
-  webserver: 40,
-  phyphox: 25,
-};
+    webserver: 40
+}
+

 export const getColour = () => {
    return colours;
 };
+
@@ -8,100 +8,235 @@
 *     types.
 */

-
 /** Single character. */
 export const CHARACTER = {
-    typeId: 'Character',
-    typeName: 'char',
-    typeMsgName: 'ARD_TYPE_CHAR',
-}
+  typeId: "Character",
+  typeName: "char",
+  typeMsgName: "ARD_TYPE_CHAR",
+};

 export const BOOLEAN = {
-    typeId: 'Boolean',
-    typeName: 'boolean',
-    typeMsgName: 'ARD_TYPE_BOOL',
-}
+  typeId: "Boolean",
+  typeName: "boolean",
+  typeMsgName: "ARD_TYPE_BOOL",
+};

 /** Text string. */
 export const TEXT = {
-    typeId: 'Text',
-    typeName: 'String',
-    typeMsgName: 'ARD_TYPE_TEXT',
-}
+  typeId: "Text",
+  typeName: "String",
+  typeMsgName: "ARD_TYPE_TEXT",
+};

 /** Short integer number. */
 export const SHORT_NUMBER = {
-    typeId: 'Short_Number',
-    typeName: 'int',
-    typeMsgName: 'ARD_TYPE_SHORT',
-}
+  typeId: "Short_Number",
+  typeName: "int",
+  typeMsgName: "ARD_TYPE_SHORT",
+};

 /** Integer number. */
 export const NUMBER = {
-    typeId: 'Number',
-    typeName: 'int',
-    typeMsgName: 'ARD_TYPE_NUMBER',
-}
+  typeId: "Number",
+  typeName: "int",
+  typeMsgName: "ARD_TYPE_NUMBER",
+};

 /** Large integer number. */
 export const LARGE_NUMBER = {
-    typeId: 'Large Number',
-    typeName: 'long',
-    typeMsgName: 'ARD_TYPE_LONG',
-}
+  typeId: "Large Number",
+  typeName: "long",
+  typeMsgName: "ARD_TYPE_LONG",
+};

 /** Decimal/floating point number. */
 export const DECIMAL = {
-    typeId: 'Decimal',
-    typeName: 'float',
-    typeMsgName: 'ARD_TYPE_DECIMAL',
-}
+  typeId: "Decimal",
+  typeName: "float",
+  typeMsgName: "ARD_TYPE_DECIMAL",
+};

 /** Array/List of items. */
 export const ARRAY = {
-    typeId: 'Array',
-    typeName: 'Array',
-    typeMsgName: 'ARD_TYPE_ARRAY',
-    compatibleTypes: []
-}
+  typeId: "Array",
+  typeName: "Array",
+  typeMsgName: "ARD_TYPE_ARRAY",
+  compatibleTypes: [],
+};

 /** Null indicate there is no type. */
 export const NULL = {
-    typeId: 'Null',
-    typeName: 'void',
-    typeMsgName: 'ARD_TYPE_NULL',
-}
+  typeId: "Null",
+  typeName: "void",
+  typeMsgName: "ARD_TYPE_NULL",
+};

 /** Type not defined, or not yet defined. */
 export const UNDEF = {
-    typeId: 'Undefined',
-    typeName: 'undef',
-    typeMsgName: 'ARD_TYPE_UNDEF',
-}
+  typeId: "Undefined",
+  typeName: "undef",
+  typeMsgName: "ARD_TYPE_UNDEF",
+};

 /** Set when no child block (meant to define the variable type) is connected. */
 export const CHILD_BLOCK_MISSING = {
-    typeId: 'ChildBlockMissing',
-    typeMsgName: 'ARD_TYPE_CHILDBLOCKMISSING',
-    compatibleTypes: []
-}
+  typeId: "ChildBlockMissing",
+  typeMsgName: "ARD_TYPE_CHILDBLOCKMISSING",
+  compatibleTypes: [],
+};

 const compatibleTypes = {
-    Array: ['Array'],
-    boolean: ['boolean'],
-    int: ['int', 'long', 'double', 'float'],
-    char: ['char'],
-    String: ['String'],
-    void: ['void'],
-    long: ['int', 'long'],
-    double: ['int', 'long', 'double'],
-    float: ['int', 'long', 'double', 'float'],
-    null: ['null']
-
-}
+  Array: ["Array"],
+  boolean: ["boolean"],
+  int: ["int", "long", "double", "float"],
+  char: ["char"],
+  String: ["String"],
+  void: ["void"],
+  long: ["int", "long"],
+  double: ["int", "long", "double"],
+  float: ["int", "long", "double", "float"],
+  null: ["null"],
+};

 export const getCompatibleTypes = (type) => {
  return compatibleTypes[type];
 };

-export const VARIABLE_TYPES = [['SHORT_NUMBER', 'char'], ['NUMBER', 'int'], ['DECIMAL', 'long'], ['TEXT', 'String'], ['CHARACTER', 'char'], ['BOOLEAN', 'boolean'], ['NULL', 'void'], ['UNDEF', 'undefined']];
+export const VARIABLE_TYPES = [
+  ["SHORT_NUMBER", "char"],
+  ["NUMBER", "int"],
+  ["DECIMAL", "long"],
+  ["TEXT", "String"],
+  ["CHARACTER", "char"],
+  ["BOOLEAN", "boolean"],
+  ["NULL", "void"],
+  ["UNDEF", "undefined"],
+];
+
+// /**
+//  * Some Types have circular dependencies on their compatibilities, so add them
+//  * after declaration.
+//  */
+// Blockly.Types.NUMBER.addCompatibleTypes([
+//     Blockly.Types.BOOLEAN,
+//     Blockly.Types.SHORT_NUMBER,
+//     Blockly.Types.LARGE_NUMBER,
+//     Blockly.Types.DECIMAL]);
+
+// Blockly.Types.SHORT_NUMBER.addCompatibleTypes([
+//     Blockly.Types.BOOLEAN,
+//     Blockly.Types.NUMBER,
+//     Blockly.Types.LARGE_NUMBER,
+//     Blockly.Types.DECIMAL]);
+
+// Blockly.Types.LARGE_NUMBER.addCompatibleTypes([
+//     Blockly.Types.BOOLEAN,
+//     Blockly.Types.SHORT_NUMBER,
+//     Blockly.Types.NUMBER,
+//     Blockly.Types.DECIMAL]);
+
+// /**
+//  * Adds another type to the Blockly.Types collection.
+//  * @param {string} typeId_ Identifiable name of the type.
+//  * @param {string} typeMsgName_ Name of the member variable from Blockly.Msg
+//  *     object to identify the translateble string.for the Type name.
+//  * @param {Array<Blockly.Type>} compatibleTypes_ List of types this Type is
+//  *     compatible with.
+//  */
+// Blockly.Types.addType = function (typeId_, typeMsgName_, compatibleTypes_) {
+//     // The Id is used as the key from the value pair in the BlocklyTypes object
+//     var key = typeId_.toUpperCase().replace(/ /g, '_');
+//     if (Blockly.Types[key] !== undefined) {
+//         throw 'The Blockly type ' + key + ' already exists.';
+//     }
+//     Blockly.Types[key] = new Blockly.Type({
+//         typeId: typeId_,
+//         typeName: typeMsgName_,
+//         compatibleTypes: compatibleTypes_
+//     });
+// };
+
+// /**
+//  * Converts the static types dictionary in to a an array with 2-item arrays.
+//  * This array only contains the valid types, excluding any error or temp types.
+//  * @return {!Array<Array<string>>} Blockly types in the format described above.
+//  */
+// Blockly.Types.getValidTypeArray = function () {
+//     var typesArray = [];
+//     for (var typeKey in Blockly.Types) {
+//         if ((typeKey !== 'UNDEF') && (typeKey !== 'CHILD_BLOCK_MISSING') &&
+//             (typeKey !== 'NULL') && (typeKey !== 'ARRAY') &&
+//             (typeof Blockly.Types[typeKey] !== 'function') &&
+//             !(Blockly.Types[typeKey] instanceof RegExp)) {
+//             typesArray.push([Blockly.Types[typeKey].typeName, typeKey]);
+//         }
+//     }
+//     return typesArray;
+// };
+
+// /**
+//  * Navigates through child blocks of the argument block to get this block type.
+//  * @param {!Blockly.Block} block Block to navigate through children.
+//  * @return {Blockly.Type} Type of the input block.
+//  */
+// Blockly.Types.getChildBlockType = function (block) {
+//     var blockType = null;
+//     var nextBlock = block;
+//     // Only checks first input block, so it decides the type. Incoherences amongst
+//     // multiple inputs dealt at a per-block level with their own block warnings
+//     while (nextBlock && (nextBlock.getBlockType === undefined) &&
+//         (nextBlock.inputList.length > 0) &&
+//         (nextBlock.inputList[0].connection)) {
+//         nextBlock = nextBlock.inputList[0].connection.targetBlock();
+//     }
+//     if (nextBlock === block) {
+//         // Set variable block is empty, so no type yet
+//         blockType = Blockly.Types.CHILD_BLOCK_MISSING;
+//     } else if (nextBlock === null) {
+//         // Null return from targetBlock indicates no block connected
+//         blockType = Blockly.Types.CHILD_BLOCK_MISSING;
+//     } else {
+//         var func = nextBlock.getBlockType;
+//         if (func) {
+//             blockType = nextBlock.getBlockType();
+//         } else {
+//             // Most inner block, supposed to define a type, is missing getBlockType()
+//             blockType = Blockly.Types.NULL;
+//         }
+//     }
+//     return blockType;
+// };
+
+// /**
+//  * Regular expressions to identify an integer.
+//  * @private
+//  */
+// Blockly.Types.regExpInt_ = new RegExp(/^-?\d+$/);
+
+// /**
+//  * Regular expressions to identify a decimal.
+//  * @private
+//  */
+// Blockly.Types.regExpFloat_ = new RegExp(/^-?[0-9]*[.][0-9]+$/);
+
+// /**
+//  * Uses regular expressions to identify if the input number is an integer or a
+//  * floating point.
+//  * @param {string} numberString String of the number to identify.
+//  * @return {!Blockly.Type} Blockly type.
+//  */
+// Blockly.Types.identifyNumber = function (numberString) {
+//     if (Blockly.Types.regExpInt_.test(numberString)) {
+//         var intValue = parseInt(numberString);
+//         if (isNaN(intValue)) {
+//             return Blockly.Types.NULL;
+//         }
+//         if (intValue > 32767 || intValue < -32768) {
+//             return Blockly.Types.LARGE_NUMBER;
+//         }
+//         return Blockly.Types.NUMBER;
+//     } else if (Blockly.Types.regExpFloat_.test(numberString)) {
+//         return Blockly.Types.DECIMAL;
+//     }
+//     return Blockly.Types.NULL;
+// };
@@ -1,32 +1,29 @@
-import { AUDIO } from "./de/audio";
-import { BLE } from "./de/sensebox-ble";
-import { FAQ } from "./de/faq";
-import { IO } from "./de/io";
-import { LOGIC } from "./de/logic";
-import { LOOPS } from "./de/loops";
-import { MATH } from "./de/math";
-import { MQTT } from "./de/mqtt";
-import { DISPLAY } from "./de/sensebox-display";
-import { LED } from "./de/sensebox-led";
-import { LORA } from "./de/sensebox-lora";
-import { OSEM } from "./de/sensebox-osem";
-import { RTC } from "./de/sensebox-rtc";
-import { SD } from "./de/sensebox-sd";
-import { SENSORS } from "./de/sensebox-sensors";
-import { SENSEBOX } from "./de/sensebox";
-import { TELEGRAM } from "./de/sensebox-telegram";
-import { WEB } from "./de/sensebox-web";
-import { TEXT } from "./de/text";
-import { TIME } from "./de/time";
-import { TOURS } from "./de/tours";
-import { TRANSLATIONS } from "./de/translations";
-import { UI } from "./de/ui";
-import { VARIABLES } from "./de/variables";
-import { WEBSERVER } from "./de/webserver";
+
+import { AUDIO } from './de/audio';
+import { FAQ } from './de/faq';
+import { IO } from './de/io';
+import { LOGIC } from './de/logic';
+import { LOOPS } from './de/loops';
+import { MATH } from './de/math';
+import { MQTT } from './de/mqtt';
+import { DISPLAY } from './de/sensebox-display';
+import { LED } from './de/sensebox-led';
+import { LORA } from './de/sensebox-lora';
+import { OSEM } from './de/sensebox-osem';
+import { SD } from './de/sensebox-sd';
+import { SENSORS } from './de/sensebox-sensors';
+import { TELEGRAM } from './de/sensebox-telegram';
+import { WEB } from './de/sensebox-web';
+import { TEXT } from './de/text';
+import { TIME } from './de/time';
+import { TOURS } from './de/tours';
+import { TRANSLATIONS } from './de/translations';
+import { UI } from './de/ui';
+import { VARIABLES } from './de/variables';
+import { WEBSERVER } from './de/webserver';

 export const De = {
    ...AUDIO,
-  ...BLE,
    ...FAQ,
    ...IO,
    ...LOGIC,
@@ -37,10 +34,8 @@ export const De = {
    ...LED,
    ...LORA,
    ...OSEM,
-  ...RTC,
    ...SD,
    ...SENSORS,
-  ...SENSEBOX,
    ...TELEGRAM,
    ...WEB,
    ...TEXT,
@@ -49,5 +44,5 @@ export const De = {
    ...TRANSLATIONS,
    ...UI,
    ...VARIABLES,
-  ...WEBSERVER,
-};
+    ...WEBSERVER
+}
@@ -1,41 +0,0 @@
-export const BLE = {
-  /**
-   * Phyphox Blöcke
-   */
-  sensebox_phyphox_init: "Initialisiere Phyphox Gerät mit Namen:",
-  sensebox_phyphox_createExperiment: "Erstelle Experiment",
-  sensebox_phyphox_experimentName: "Name des Experiments",
-  sensebox_phyphox_experimentTitle: "Titel",
-  sensebox_phyphox_experimentCategory: "Kategorie",
-  sensebox_phyphox_experimentDescription: "Beschreibung",
-  sensebox_phyphox_experiment_description: "Kurze Beschreibung des Experiments",
-  sensebox_phyphox_writeValues: "Sende Werte",
-  sensebox_phyphox_createView: "Mit Graphen:",
-  sensebox_phyphox_createGraph: "Erstelle Graph",
-  sensebox_phyphox_graphLabel: "",
-  sensebox_phyphox_unitx: "Einheit x-Achse",
-  sensebox_phyphox_unity: "Einheit y-Achse",
-  sensebox_phyphox_labelx: "Beschriftung x-Achse",
-  sensebox_phyphox_labely: "Beschriftung y-Achse",
-  sensebox_phyphox_channel0: "Wert x-Achse",
-  sensebox_phyphox_channel1: "Wert y-Achse",
-  sensebox_phyphox_style_dots: "Punkte",
-  sensebox_phyphox_style_line: "Linie",
-  sensebox_phyphox_timestamp: "Zeitstempel",
-  sensebox_phyphox_channel: "Kanal",
-  sensebox_phyphox_sendchannel: "sende an Kanal:",
-  sensebox_phyphox_graphStyle: "Stil",
-
-  sensebox_phyphox_init_tooltip:
-    "Initialisere das Bluetooth Bee. Stecke diese auf dem Steckplatz **XBEE1**. Gib dem Phphox Messgerät einen eindeutigen Namen, damit du dieses in der App wiederfindest",
-  sensebox_phyphox_experiment_tooltip:
-    "Erstelle ein Experiment und vergib einen eindeutigen Namen und eine kurze Beschreibung. Füge bis zu 5 verschiedene Graphen in der Ansicht hinzu. ",
-  sensebox_phyphox_graph_tooltip:
-    "Erstellt einen neuen Graph für das Experiment. Gibt die Einheit und Beschriftung für die Achsen an und wähle den Stil der Visualisuerng der Messwerte. Füge an die Schnittstellen für die Werte der X- und Y-Achse den Kanal an auf dem die Messwerte später gesendet werden. Möchtest du einen Zeitstempel über die Phyphox App erstellen lassen verbinde den Block *Zeitstempel*",
-  sensebox_phyphox_timestamp_tooltip:
-    "Verwende diesen Block, um einen Zeitstempel über die Phyphox App erstellen zu lassen",
-  sensebox_phyphox_sendchannel_tooltip:
-    "Sendet einen Messwert an den ausgewählten Kanal",
-  sensebox_phyphox_experiment_send_tooltip:
-    "Sendet die Messwerte an die Phyphox App",
-};
@@ -6,10 +6,8 @@ export const LED = {
    senseBox_ws2818_rgb_led_init: "RGB LED (WS2818) initialisieren",
    senseBox_ws2818_rgb_led_position: "Position",
    senseBox_ws2818_rgb_led_brightness: "Helligkeit",
-  senseBox_ws2818_rgb_led_tooltip:
-    "Verändere mit diesem Block die Farbe deiner RGB-LED. Verbinde einen Block für die Farbe. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. ",
-  senseBox_ws2818_rgb_led_init_tooltip:
-    "Schließe die RGB-LED an einen der drei **digital/analog Ports** an. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. ",
+    senseBox_ws2818_rgb_led_tooltip: "Verändere mit diesem Block die Farbe deiner RGB-LED. Verbinde einen Block für die Farbe. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. ",
+    senseBox_ws2818_rgb_led_init_tooltip: "Schließe die RGB-LED an einen der drei **digital/analog Ports** an. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. ",
    senseBox_ws2818_rgb_led_color: "Farbe",
    senseBox_ws2818_rgb_led_number: "Anzahl",

@@ -22,11 +20,9 @@ export const LED = {
    COLOUR_BLEND_HELPURL: "http://meyerweb.com/eric/tools/color-blend/",
    COLOUR_BLEND_RATIO: "im Verhältnis",
    COLOUR_BLEND_TITLE: "mische",
-  COLOUR_BLEND_TOOLTIP:
-    "Vermische 2 Farben mit konfigurierbaren Farbverhältnis (0.0 - 1.0).",
+    COLOUR_BLEND_TOOLTIP: "Vermische 2 Farben mit konfigurierbaren Farbverhältnis (0.0 - 1.0).",
    COLOUR_PICKER_HELPURL: "https://de.wikipedia.org/wiki/Farbe",
-  COLOUR_PICKER_TOOLTIP:
-    "Wähle eine Farbe aus der Palette. Die Farbe wird automatisch in RGB-Werte konvertiert.",
+    COLOUR_PICKER_TOOLTIP: "Wähle eine Farbe aus der Palette. Die Farbe wird automatisch in RGB-Werte konvertiert.",
    COLOUR_RANDOM_HELPURL: "http://randomcolour.com",  // untranslated
    COLOUR_RANDOM_TITLE: "zufällige Farbe",
    COLOUR_RANDOM_TOOLTIP: "Erstelle eine Farbe nach dem Zufallsprinzip.",
@@ -35,6 +31,6 @@ export const LED = {
    COLOUR_RGB_HELPURL: "https://de.wikipedia.org/wiki/RGB-Farbraum",
    COLOUR_RGB_RED: "rot",
    COLOUR_RGB_TITLE: "Farbe mit",
-  COLOUR_RGB_TOOLTIP:
-    "Erstelle eine Farbe mit selbst definierten Rot-, Grün- und Blauwerten. Alle Werte müssen zwischen 0 und 255 liegen. 0 ist hierbei die geringte Intensität der Farbe 255 die höchste.",
-};
+    COLOUR_RGB_TOOLTIP: "Erstelle eine Farbe mit selbst definierten Rot-, Grün- und Blauwerten. Alle Werte müssen zwischen 0 und 255 liegen. 0 ist hierbei die geringte Intensität der Farbe 255 die höchste.",
+
+}
@@ -1,19 +0,0 @@
-export const RTC = {
-  sensebox_rtc_init: "Initialisiere RTC",
-  sensebox_rtc_init_tooltip:
-    "Initialisiere die RTC. Schließe diese an einen der 5 I2C/Wire Anschlüsse an und lege die Batterie ein. Bevor du die Uhrzeit auslesen kannst muss diese zunächst einmal gesetzt werden. Dieser Schritt muss normalerweise nur einmalig durchgeführt werden.",
-  sensebox_rtc_set: "Setze Uhrzeit/Datum der RTC",
-  sensebox_rtc_set_tooltip:
-    "Stellt die Uhrzeit der RTC ein. Beachte, dass du diesen Block im Setup ausführst.",
-  sensebox_rtc_get_timestamp: "Zeitstempel",
-  sensebox_rtc_get_timestamp_tooltip:
-    "Gibt dir einen in ISO 8601 formatierten Zeitstempel zurück. Bsp: 2021-12-24T18:21Z",
-  sensebox_rtc_get: "Wert: ",
-  sensebox_rtc_get_tooltip: "Gibt dir den ausgewählten Wert zurück.",
-  sensebox_rtc_second: "Sekunden",
-  sensebox_rtc_minutes: "Minuten",
-  sensebox_rtc_hour: "Stunden",
-  sensebox_rtc_day: "Tag",
-  sensebox_rtc_month: "Monat",
-  sensebox_rtc_year: "Jahr",
-};
@@ -4,10 +4,13 @@ export const SD = {
   */
  senseBox_sd_create_file: "Erstelle Datei auf SD-Karte",
  senseBox_sd_write_file: "Schreibe Daten auf SD-Karte",
-    senseBox_sd_open_file: "Öffne eine Datei auf der SD-Karte",
-    senseBox_sd_create_file_tooltip: "Erstellt eine Datei auf der Karte. Stecke das SD-Bee auf den Steckplatz **XBEE2**. Die **maximale** Länge des Dateinamen sind **8 Zeichen**. Die Datei sollte zuerst im *Setup()* erstellt werden",
-    senseBox_sd_write_file_tooptip: "Schreibe Daten auf die SD-Karte. Beachte, dass die Datei zuerst geöffnet werden muss.",
-    senseBox_sd_open_file_tooltip: "Öffne die Datei auf der SD-Karte, um Dateien zu speichern. Am Ende der Schleife wird die Datei automatisch wieder geschlossen.",
+  senseBox_sd_open_file: "Öffne Datei auf der SD-Karte",
+  senseBox_sd_create_file_tooltip:
+    "Erstellt eine Datei auf der Karte. Stecke das SD-Bee auf den Steckplatz **XBEE2**. Die **maximale** Länge des Dateinamen sind **8 Zeichen**. Die Datei sollte zuerst im *Setup()* erstellt werden",
+  senseBox_sd_write_file_tooptip:
+    "Schreibe Daten auf die SD-Karte. Beachte, dass die Datei zuerst geöffnet werden muss.",
+  senseBox_sd_open_file_tooltip:
+    "Öffne die Datei auf der SD-Karte, um Dateien zu speichern. Am Ende der Schleife wird die Datei automatisch wieder geschlossen.",
  sensebox_sd_filename: "Daten",
  senseBox_sd_decimals: "Dezimalen",
-}
+};
@@ -1,16 +0,0 @@
-export const SENSEBOX = {
-  /**
-   * Multiplexer
-   */
-  senseBox_multiplexer_init: "Initialisiere Multiplexer mit ",
-  senseBox_multiplexer_init_tooltip:
-    "Schließe den Multiplexer mit einem JST-JST Kabel an einen der 5 I2C-Ports an. Nun kannst du bis zu 8 gleiche Sensoren verwenden über die entsprechenden Kanäle ansprechen. Gib im Block die Anzahl der verwendeten Kanäle an",
-  senseBox_multiplexer_init_helpurl:
-    "https://docs.sensebox.de/hardware/zubehoer-multiplexer/",
-  senseBox_multplexer_nchannels: "Kanälen",
-  senseBox_multiplexer_changeChannel: "Wechsel Kanal auf:",
-  sensebox_multiplexer_changeChannel_tooltip:
-    "Wähle den entsprechenden Kanal aus",
-  sensebox_multiplexer_changeChannel_helpurl:
-    "https://docs.sensebox.de/hardware/zubehoer-multiplexer/",
-};
@@ -1,11 +1,11 @@
 export const TIME = {
-
  /**
   * Interval Block
   */
-    senseBox_interval_timer: "Messintervall",
+  senseBox_interval_timer: "Intervall:",
  senseBox_interval: "ms",
  senseBox_interval_timer_tip: "Intervall",
+  senseBox_interval_time: "Zeit: ",
  ARD_TIME_DELAY: "Warte",
  ARD_TIME_DELAY_MICROS: "Mikrosekunden",
  ARD_TIME_DELAY_MICRO_TIP: "Warte eine spezifischen Zeit in Microsekunden",
@@ -13,8 +13,10 @@ export const TIME = {
  ARD_TIME_INF: "Warte für immer (Beende Programm)",
  ARD_TIME_INF_TIP: "Stoppt das Programm.",
  ARD_TIME_MICROS: "Bereits vergangen Zeit (Mikrosekunden)",
-    ARD_TIME_MICROS_TIP: "Gibt eine Zahl in Microsekunden zurück, die der Zeitdauer des Aktuellen Programms entspricht. Muss als positiven Integer gespeichert werden",  // untranslated
+  ARD_TIME_MICROS_TIP:
+    "Gibt eine Zahl in Microsekunden zurück, die der Zeitdauer des Aktuellen Programms entspricht. Muss als positiven Integer gespeichert werden", // untranslated
  ARD_TIME_MILLIS: "Bereits vergangen Zeit (Millisekunden)",
-    ARD_TIME_MILLIS_TIP: "Gibt eine Zahl in Millisekunden zurück, die der Zeitdauer des Aktuellen Programms entspricht. Muss als positiven Integer gespeichert werden",  // untranslated
+  ARD_TIME_MILLIS_TIP:
+    "Gibt eine Zahl in Millisekunden zurück, die der Zeitdauer des Aktuellen Programms entspricht. Muss als positiven Integer gespeichert werden", // untranslated
  ARD_TIME_MS: "Millisekunden",
-}
+};
@@ -1,3 +1,4 @@
+
 export const UI = {
    /**
     * Toolbox
@@ -10,16 +11,6 @@ export const UI = {
    toolbox_time: "Zeit",
    toolbox_functions: "Funktionen",
    toolbox_variables: "Variablen",
-  variable_NUMBER: "Zahl (int)",
-  variable_SHORT_NUMBER: "char",
-  variable_LONG: "große Zahl (long)",
-  variable_DECIMAL: "Kommazahl (float)",
-  variables_TEXT: "Text (string)",
-  variables_ARRAY: "Array (array)",
-  variables_CHARACTER: "char (char)",
-  variables_BOOLEAN: "Boolean (boolean)",
-  variables_NULL: "void (void)",
-  variables_UNDEF: "undefined",

    /**
     * Tooltips
@@ -44,8 +35,8 @@ export const UI = {
    tooltip_share_project: "Projekt teilen",
    tooltip_reset_workspace: "Workspace zurücksetzen",
    tooltip_copy_link: "Link kopieren",
-  tooltip_trashcan_hide: "gelöschte Blöcke ausblenden",
-  tooltip_trashcan_delete: "Blöcke endgültig löschen",
+    tooltip_trashcan_hide: 'gelöschte Blöcke ausblenden',
+    tooltip_trashcan_delete: 'Blöcke endgültig löschen',
    tooltip_project_title: "Titel des Projektes",
    tooltip_check_solution: "Lösung kontrollieren",
    tooltip_copy_code: "Code in die Zwischenablage kopieren",
@@ -55,42 +46,24 @@ export const UI = {
     *
     */

-  messages_delete_project_failed:
-    "Fehler beim Löschen des Projektes. Versuche es noch einmal.",
-  messages_reset_workspace_success:
-    "Das Projekt wurde erfolgreich zurückgesetzt",
-  messages_PROJECT_UPDATE_SUCCESS:
-    "Das Projekt wurde erfolgreich aktualisiert.",
-  messages_GALLERY_UPDATE_SUCCESS:
-    "Das Galerie-Projekt wurde erfolgreich aktualisiert.",
-  messages_PROJECT_UPDATE_FAIL:
-    "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.",
-  messages_GALLERY_UPDATE_FAIL:
-    "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.",
+    messages_delete_project_failed: "Fehler beim Löschen des Projektes. Versuche es noch einmal.",
+    messages_reset_workspace_success: "Das Projekt wurde erfolgreich zurückgesetzt",
+    messages_PROJECT_UPDATE_SUCCESS: "Das Projekt wurde erfolgreich aktualisiert.",
+    messages_GALLERY_UPDATE_SUCCESS: "Das Galerie-Projekt wurde erfolgreich aktualisiert.",
+    messages_PROJECT_UPDATE_FAIL: "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.",
+    messages_GALLERY_UPDATE_FAIL: "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.",
    messages_gallery_save_fail_1: "Fehler beim Speichern des ",
    messages_gallery_save_fail_2: "Projektes. Versuche es noch einmal.",
-  messages_SHARE_SUCCESS: "Programm teilen",
-  messages_SHARE_FAIL:
-    "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.",
-  messages_copylink_success: "Link erfolgreich in Zwischenablage gespeichert.",
-  messages_rename_success_01: "Das Projekt wurde erfolgreich in ",
-  messages_rename_success_02: "umbenannt.",
-  messages_newblockly_head:
-    "Willkommen zur neuen Version Blockly für die senseBox",
-  messages_newblockly_text:
-    "Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)",
-  messages_GET_TUTORIAL_FAIL: "Zurück zur Tutorials-Übersicht",
-  messages_LOGIN_FAIL: "Der Benutzername oder das Passwort ist nicht korrekt.",
+    messages_SHARE_SUCCESS: 'Programm teilen',
+    messages_SHARE_FAIL: "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.",
+    messages_copylink_success: 'Link erfolgreich in Zwischenablage gespeichert.',
+    messages_rename_success_01: 'Das Projekt wurde erfolgreich in ',
+    messages_rename_success_02: 'umbenannt.',
+    messages_newblockly_head: "Willkommen zur neuen Version Blockly für die senseBox",
+    messages_newblockly_text: "Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)",
+    messages_GET_TUTORIAL_FAIL: 'Zurück zur Tutorials-Übersicht',
+    messages_LOGIN_FAIL: 'Der Benutzername oder das Passwort ist nicht korrekt.',
    messages_copy_code: "Code wurde in die Zwischenablage kopiert",
-
-  /**
-   * Reset Dialog
-   */
-
-  resetDialog_headline: "Workspace zurücksetzen?",
-  resetDialog_text:
-    "Möchtest du wirklich die Workspace zurücksetzen? Hierbei werden alle Blöcke gelöscht!",
-
    /**
     * Share Dialog
     */
@@ -103,8 +76,7 @@ export const UI = {
     */

    renamedialog_headline: "Projekt benennen",
-  renamedialog_text:
-    "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'.",
+    renamedialog_text: "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'.",

    /**
     * Compile Dialog
@@ -112,8 +84,7 @@ export const UI = {
     */

    compiledialog_headline: "Fehler",
-  compiledialog_text:
-    "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
+    compiledialog_text: "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",

    /**
     * Buttons
@@ -142,16 +113,13 @@ export const UI = {
     */
    settings_head: "Einstellungen",
    settings_language: "Sprache",
-  settings_language_text:
-    "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden.",
+    settings_language_text: "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden.",
    settings_language_de: "Deutsch",
    settings_language_en: "Englisch",
    settings_renderer: "Renderer",
-  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.",
+    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.",
    settings_statistics: "Statistiken",
-  settings_statistics_text:
-    "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden.",
+    settings_statistics_text: "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden.",
    settings_statistics_on: "An",
    settings_statistics_off: "Aus",

@@ -160,29 +128,35 @@ export const UI = {
     */

    notfound_head: "Die von Ihnen angeforderte Seite kann nicht gefunden werden.",
-  notfound_text:
-    "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.",
+    notfound_text: "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.",
+

    /**
     * Labels
     */

-  labels_donotshowagain: "Dialog nicht mehr anzeigen",
+    labels_donotshowagain: 'Dialog nicht mehr anzeigen',
    labels_here: "hier",
-  labels_username: "E-Mail oder Nutzername",
+    labels_username: 'E-Mail oder Nutzername',
    labels_password: "Passwort",

+    /**
+     * Badges
+     */
+
+    badges_explaination: "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du ",
+    badges_ASSIGNE_BADGE_SUCCESS_01: "Herzlichen Glückwunsch! Du hast den Badge ",
+    badges_ASSIGNE_BADGE_SUCCESS_02: " erhalten.",
    /**
     * Tutorials
     */

    tutorials_assessment_task: "Aufgabe",
    tutorials_hardware_head: "Für die Umsetzung benötigst du folgende Hardware:",
-  tutorials_hardware_moreInformation:
-    "Weitere Informationen zur Hardware-Komponente findest du",
+    tutorials_hardware_moreInformation: "Weitere Informationen zur Hardware-Komponente findest du",
    tutorials_hardware_here: "hier",
-  tutorials_requirements:
-    "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:",
+    tutorials_requirements: "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:",
+

    /**
     * Tutorial Builder
@@ -191,19 +165,17 @@ export const UI = {
    builder_solution: "Lösung",
    builder_solution_submit: "Lösung einreichen",
    builder_example_submit: "Beispiel einreichen",
-  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.",
-  builder_hardware_order:
-    "Beachte, dass die Reihenfolge des Auswählens maßgebend ist.",
+    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.",
+    builder_hardware_order: "Beachte, dass die Reihenfolge des Auswählens maßgebend ist.",
    builder_hardware_helper: "Wähle mindestens eine Hardware-Komponente aus.",
    builder_requirements_head: "Voraussetzungen",
-  builder_requirements_order:
-    "Beachte, dass die Reihenfolge des Anhakens maßgebend ist.",
+    builder_requirements_order: "Beachte, dass die Reihenfolge des Anhakens maßgebend ist.",

    /**
     * Login
     */

+
    login_head: "Anmelden",
    login_osem_account_01: "Du benötigst einen ",
    login_osem_account_02: "Account um dich einzuloggen",
@@ -220,6 +192,7 @@ export const UI = {

    navbar_menu: "Menü",
    navbar_login: "Einloggen",
+    navbar_mybadges: "myBadges",
    navbar_account: "Konto",
    navbar_logout: "Abmelden",
    navbar_settings: "Einstellungen",
@@ -231,6 +204,8 @@ export const UI = {
    codeviewer_arduino: "Arduino Quellcode",
    codeviewer_xml: "XML Blöcke",

+
+
    /**
     * Overlay
     */
@@ -246,11 +221,4 @@ export const UI = {
    tooltip_viewer: "Hilfe",
    tooltip_moreInformation: "Mehr Informationen findest du ",
    tooltip_hint: "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen",
-
-  /**
-   * IDEDrawer
-   */
-  drawer_ideerror_head: "Hoppla da ist was schief gegangen.",
-  drawer_ideerror_text:
-    "Beim kompilieren ist ein Fehler aufgetreten, überprüfe deine Blöcke.",
-};
+}
@@ -1,32 +1,28 @@
-import { AUDIO } from "./en/audio";
-import { BLE } from "./en/sensebox-ble";
-import { FAQ } from "./en/faq";
-import { IO } from "./en/io";
-import { LOGIC } from "./en/logic";
-import { LOOPS } from "./en/loops";
-import { MATH } from "./en/math";
-import { MQTT } from "./en/mqtt";
-import { SENSEBOX } from "./en/sensebox";
-import { DISPLAY } from "./en/sensebox-display";
-import { LED } from "./en/sensebox-led";
-import { LORA } from "./en/sensebox-lora";
-import { OSEM } from "./en/sensebox-osem";
-import { RTC } from "./en/sensebox-rtc";
-import { SD } from "./en/sensebox-sd";
-import { SENSORS } from "./en/sensebox-sensors";
-import { TELEGRAM } from "./en/sensebox-telegram";
-import { WEB } from "./en/sensebox-web";
-import { TEXT } from "./en/text";
-import { TIME } from "./en/time";
-import { TOURS } from "./en/tours";
-import { TRANSLATIONS } from "./en/translations";
-import { UI } from "./en/ui";
-import { VARIABLES } from "./en/variables";
-import { WEBSERVER } from "./en/webserver";
+import { AUDIO } from './en/audio';
+import { FAQ } from './en/faq';
+import { IO } from './en/io';
+import { LOGIC } from './en/logic';
+import { LOOPS } from './en/loops';
+import { MATH } from './en/math';
+import { MQTT } from './en/mqtt';
+import { DISPLAY } from './en/sensebox-display';
+import { LED } from './en/sensebox-led';
+import { LORA } from './en/sensebox-lora';
+import { OSEM } from './en/sensebox-osem';
+import { SD } from './en/sensebox-sd';
+import { SENSORS } from './en/sensebox-sensors';
+import { TELEGRAM } from './en/sensebox-telegram';
+import { WEB } from './en/sensebox-web';
+import { TEXT } from './en/text';
+import { TIME } from './en/time';
+import { TOURS } from './en/tours';
+import { TRANSLATIONS } from './en/translations';
+import { UI } from './en/ui';
+import { VARIABLES } from './en/variables';
+import { WEBSERVER } from './en/webserver';

 export const En = {
    ...AUDIO,
-  ...BLE,
    ...FAQ,
    ...IO,
    ...LOGIC,
@@ -37,10 +33,8 @@ export const En = {
    ...LED,
    ...LORA,
    ...OSEM,
-  ...RTC,
    ...SD,
    ...SENSORS,
-  ...SENSEBOX,
    ...TELEGRAM,
    ...WEB,
    ...TEXT,
@@ -49,5 +43,5 @@ export const En = {
    ...TRANSLATIONS,
    ...UI,
    ...VARIABLES,
-  ...WEBSERVER,
-};
+    ...WEBSERVER
+}
@@ -1,42 +0,0 @@
-export const BLE = {
-  /**
-   * Phyphox Init
-   */
-  sensebox_phyphox_init: "Initialise Phyphox device with name:",
-  sensebox_phyphox_createExperiment: "Create experiment",
-  sensebox_phyphox_experimentName: "Name of experiment",
-  sensebox_phyphox_experimentTitle: "Title",
-  sensebox_phyphox_experimentCategory: "Category",
-  sensebox_phyphox_experimentDescription: "Description",
-  sensebox_phyphox_experiment_description:
-    "Short description of the experiment",
-  sensebox_phyphox_writeValues: "Send values",
-  sensebox_phyphox_createView: "With graphs:",
-  sensebox_phyphox_createGraph: "Create Graph",
-  sensebox_phyphox_graphLabel: "",
-  sensebox_phyphox_unitx: "Unit x-axis",
-  sensebox_phyphox_unity: "Unit y-axis",
-  sensebox_phyphox_labelx: "Label x-axis",
-  sensebox_phyphox_labely: "Label y-axis",
-  sensebox_phyphox_channel0: "x-axis value",
-  sensebox_phyphox_channel1: "y-axis value",
-  sensebox_phyphox_style_dots: "Dots",
-  sensebox_phyphox_style_line: "Line",
-  sensebox_phyphox_timestamp: "Timestamp",
-  sensebox_phyphox_channel: "Channel",
-  sensebox_phyphox_sendchannel: "send to channel:",
-  sensebox_phyphox_graphStyle: "style",
-
-  sensebox_phyphox_init_tooltip:
-    "Initialise the Bluetooth Bee. Plug it into the **XBEE1** slot. Give the Phphox meter a unique name so you can find it in the app",
-  sensebox_phyphox_experiment_tooltip:
-    "Create an experiment and give it a unique name and a short description. Add up to 5 different graphs in the view. ",
-  sensebox_phyphox_graph_tooltip:
-    "Creates a new graph for the experiment. Specify the unit and label for the axes and choose the style of visualisation of the measured values. Add to the interfaces for the values of the X- and Y-axis the channel on which the measured values will be sent later. If you want to create a timestamp via the Phyphox app, connect the block *Timestamp*",
-  sensebox_phyphox_timestamp_tooltip:
-    "Use this block to have a timestamp created via the Phyphox app",
-  sensebox_phyphox_sendchannel_tooltip:
-    "Sends a reading to the selected channel",
-  sensebox_phyphox_experiment_send_tooltip:
-    "Sends the measured values to the Phyphox App",
-};
@@ -1,20 +0,0 @@
-export const RTC = {
-  sensebox_rtc_init: "Initialise RTC",
-  sensebox_rtc_init_tooltip:
-    "Initialise the RTC. Connect it to one of the 5 I2C/Wire connections and insert the battery. Before you can read out the time, it must first be set. This step usually only needs to be done once.",
-  sensebox_rtc_set: "Set RTC time/date:",
-  sensebox_rtc_set_tooltip:
-    "Sets the time of the RTC. Note that you execute this block in the setup.",
-  sensebox_rtc_get_timestamp: "Get timestamp",
-  sensebox_rtc_get_timestamp_tooltip:
-    "Returns a timestamp formatted in ISO 8601. Ex: 2021-12-24T18:21Z",
-  sensebox_rtc_get_tooltip: "Returns the selected value",
-  sensebox_rtc_set_ntp: "Set time via NTP-Server",
-  sensebox_rtc_get: "Get: ",
-  sensebox_rtc_second: "seconds",
-  sensebox_rtc_minutes: "minutes",
-  sensebox_rtc_hour: "hour",
-  sensebox_rtc_day: "day",
-  sensebox_rtc_month: "month",
-  sensebox_rtc_year: "year",
-};
@@ -1,16 +0,0 @@
-export const SENSEBOX = {
-  /**
-   * Multiplexer
-   */
-  senseBox_multiplexer_init: "Initialise Multiplexer with ",
-  senseBox_multiplexer_init_tooltip:
-    "Connect the multiplexer with a JST-JST cable to one of the 5 I2C ports. Now you can use up to 8 sensors of the same type and address them via the corresponding channels. Enter the number of used channels in the block",
-  senseBox_multiplexer_init_helpurl:
-    "https://en.docs.sensebox.de/hardware/zubehoer-multiplexer/",
-  senseBox_multplexer_nchannels: "Channels",
-  senseBox_multiplexer_changeChannel: "Change active channel to:",
-  sensebox_multiplexer_changeChannel_tooltip:
-    "Changes the active channel to the selected number",
-  sensebox_multiplexer_changeChannel_helpurl:
-    "https://en.docs.sensebox.de/hardware/zubehoer-multiplexer/",
-};
@@ -1,8 +1,8 @@
 export const TIME = {
-
  senseBox_interval: "ms",
-    senseBox_interval_timer: "Measuring interval",
-    senseBox_interval_timer_tip: "Setup an Intervall",
+  senseBox_interval_timer: "Interval",
+  senseBox_interval_timer_tip: "Setup an Interval",
+  senseBox_interval_time: "time",
  ARD_TIME_DELAY: "wait",
  ARD_TIME_DELAY_MICROS: "microseconds",
  ARD_TIME_DELAY_MICRO_TIP: "Wait specific time in microseconds",
@@ -10,8 +10,10 @@ export const TIME = {
  ARD_TIME_INF: "wait forever (end program)",
  ARD_TIME_INF_TIP: "Wait indefinitely, stopping the program.",
  ARD_TIME_MICROS: "current elapsed Time (microseconds)",
-    ARD_TIME_MICROS_TIP: "Returns the number of microseconds since the Arduino board began running the current program. Has to be stored in a positive long integer",
+  ARD_TIME_MICROS_TIP:
+    "Returns the number of microseconds since the Arduino board began running the current program. Has to be stored in a positive long integer",
  ARD_TIME_MILLIS: "current elapsed Time (milliseconds)",
-    ARD_TIME_MILLIS_TIP: "Returns the number of milliseconds since the Arduino board began running the current program. Has to be stored in a positive long integer",
+  ARD_TIME_MILLIS_TIP:
+    "Returns the number of milliseconds since the Arduino board began running the current program. Has to be stored in a positive long integer",
  ARD_TIME_MS: "milliseconds",
-}
+};
@@ -1,4 +1,7 @@
 export const UI = {
+
+
+
    /**
     * Toolbox
     */
@@ -10,16 +13,6 @@ export const UI = {
    toolbox_time: "Time",
    toolbox_functions: "Functions",
    toolbox_variables: "Variables",
-  variable_NUMBER: "Number (int)",
-  variable_SHORT_NUMBER: "char",
-  variable_LONG: " Zahl (long)",
-  variable_DECIMAL: "Decimal (float)",
-  variables_TEXT: "Text (string)",
-  variables_ARRAY: "Array (array)",
-  variables_CHARACTER: "char (char)",
-  variables_BOOLEAN: "Boolean (boolean)",
-  variables_NULL: "void (void)",
-  variables_UNDEF: "undefined",

    /**
     * Tooltips
@@ -58,36 +51,22 @@ export const UI = {
    messages_delete_project_failed: "Error deleting the project. Try again.",
    messages_reset_workspace_success: "The project has been successfully reset.",
    messages_PROJECT_UPDATE_SUCCESS: "The project was successfully updated.",
-  messages_GALLERY_UPDATE_SUCCESS:
-    "The gallery project was successfully updated.",
+    messages_GALLERY_UPDATE_SUCCESS: "The gallery project was successfully updated.",
    messages_PROJECT_UPDATE_FAIL: "Error updating the project. Try again.",
-  messages_GALLERY_UPDATE_FAIL:
-    "Error updating the gallery project. Try again.",
+    messages_GALLERY_UPDATE_FAIL: "Error updating the gallery project. Try again.",
    messages_gallery_save_fail_1: "Error saving the ",
    messages_gallery_save_fail_2: "Project. Try again.",
-  messages_SHARE_SUCCESS: "Share program",
-  messages_SHARE_FAIL:
-    "Error creating a link to share your program. Try again.",
-  messages_copylink_success: "Link successfully saved to clipboard.",
-  messages_rename_success_01: "The project was successfully saved to ",
-  messages_rename_success_02: "renamed.",
-  messages_newblockly_head:
-    "Welcome to the new version Blockly for the senseBox",
-  messages_newblockly_text:
-    "The new Blockly version is currently in testing. If you find any errors please report them in our [forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). You can find an overview of all new features [here](/news)",
-  messages_GET_TUTORIAL_FAIL: "Back to tutorials overview",
-  messages_LOGIN_FAIL: "The username or password is incorrect.",
+    messages_SHARE_SUCCESS: 'Share program',
+    messages_SHARE_FAIL: "Error creating a link to share your program. Try again.",
+    messages_copylink_success: 'Link successfully saved to clipboard.',
+    messages_rename_success_01: 'The project was successfully saved to ',
+    messages_rename_success_02: 'renamed.',
+    messages_newblockly_head: 'Welcome to the new version Blockly for the senseBox',
+    messages_newblockly_text: "The new Blockly version is currently in testing. If you find any errors please report them in our [forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). You can find an overview of all new features [here](/news)",
+    messages_GET_TUTORIAL_FAIL: 'Back to tutorials overview',
+    messages_LOGIN_FAIL: 'The username or password is incorrect.',
    messages_login_error: "Enter both a username and a password.",
    messages_copy_code: "Copy code to clipboard succesfull",
-
-  /**
-   * Reset Dialog
-   */
-
-  resetDialog_headline: "Reset workspace?",
-  resetDialog_text:
-    "Do you really want to reset the workspace? All blocks will be deleted!",
-
    /**
     * Share Dialog
     */
@@ -100,16 +79,16 @@ export const UI = {
     */

    renamedialog_headline: "Rename project",
-  renamedialog_text:
-    "Please enter a name for the project and confirm it by clicking 'Confirm'.",
+    renamedialog_text: "Please enter a name for the project and confirm it by clicking 'Confirm'.",
    /**
     * Compile Dialog
     *
     */

    compiledialog_headline: "Error",
-  compiledialog_text:
-    "While compiling an error occured. Please check your blocks and try again",
+    compiledialog_text: "While compiling an error occured. Please check your blocks and try again",
+
+

    /**
     * Buttons
@@ -126,6 +105,8 @@ export const UI = {
    button_tutorial_overview: "Tutorial overview",
    button_login: "Login",

+
+
    /**
     *
     */
@@ -137,47 +118,50 @@ export const UI = {
     */
    settings_head: "Settings",
    settings_language: "Language",
-  settings_language_text:
-    "Selection of the language applies to the entire application. A distinction can be made between German and English.",
+    settings_language_text: "Selection of the language applies to the entire application. A distinction can be made between German and English.",
    settings_language_de: "German",
    settings_language_en: "English",
    settings_renderer: "Renderer",
-  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.",
+    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.",
    settings_statistics: "Statistics",
-  settings_statistics_text:
-    "The display of statistics on the usage of the blocks above the workspace can be shown or hidden.",
+    settings_statistics_text: "The display of statistics on the usage of the blocks above the workspace can be shown or hidden.",
    settings_statistics_on: "On",
    settings_statistics_off: "Off",

+
    /**
     * 404
     */

    notfound_head: "The page you requested cannot be found.",
-  notfound_text:
-    "The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable.",
+    notfound_text: "The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable.",

    /**
     * Labels
     */
-  labels_donotshowagain: "Do not show dialog again",
-  labels_here: "here",
-  labels_username: "Email or username",
+    labels_donotshowagain: 'Do not show dialog again',
+    labels_here: 'here',
+    labels_username: 'Email or username',
    labels_password: "Password",
+    /**
+     * Badges
+     */
+
+    badges_explaination: "An overview of all badges received in the Blockly for senseBox context can be found ",
+    badges_ASSIGNE_BADGE_SUCCESS_01: "Congratulations! You have received the badge ",
+    badges_ASSIGNE_BADGE_SUCCESS_02: ".",
+

    /**
     * Tutorials
     */

    tutorials_assessment_task: "Task",
-  tutorials_hardware_head:
-    "For the implementation you need the following hardware:",
-  tutorials_hardware_moreInformation:
-    "You can find more information about the hardware component.",
+    tutorials_hardware_head: "For the implementation you need the following hardware:",
+    tutorials_hardware_moreInformation: "You can find more information about the hardware component.",
    tutorials_hardware_here: "here",
-  tutorials_requirements:
-    "Before continuing with this tutorial, you should have successfully completed the following tutorials:",
+    tutorials_requirements: "Before continuing with this tutorial, you should have successfully completed the following tutorials:",
+

    /**
     * Tutorial Builder
@@ -186,24 +170,24 @@ export const UI = {
    builder_solution: "Solution",
    builder_solution_submit: "Submit Solution",
    builder_example_submit: "Submit example",
-  builder_comment:
-    "Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled.",
+    builder_comment: "Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled.",
    builder_hardware_order: "Note that the order of selection is authoritative.",
    builder_hardware_helper: "Select at least one hardware component.",
    builder_requirements_head: "Requirements.",
-  builder_requirements_order:
-    "Note that the order of ticking is authoritative.",
+    builder_requirements_order: "Note that the order of ticking is authoritative.",
+

    /**
     * Login
     */

+
    login_head: "Login",
    login_osem_account_01: "You need to have an ",
    login_osem_account_02: "Account to login",
    login_lostpassword: "Lost your password?",
-  login_createaccount:
-    "If you don't have an openSenseMap account please register on ",
+    login_createaccount: "If you don't have an openSenseMap account please register on ",
+

    /**
     * Navbar
@@ -216,6 +200,7 @@ export const UI = {

    navbar_menu: "Menu",
    navbar_login: "Login",
+    navbar_mybadges: "myBadges",
    navbar_account: "Account",
    navbar_logout: "Logout",
    navbar_settings: "Settings",
@@ -227,6 +212,9 @@ export const UI = {
    codeviewer_arduino: "Arduino Source Code",
    codeviewer_xml: "XML Blocks",

+
+
+
    /**
     * Overlay
     */
@@ -235,6 +223,7 @@ export const UI = {
    compile_overlay_text: "Then copy it to your senseBox MCU",
    compile_overlay_help: "You need help? Have a look here: ",

+
    /**
     * Tooltip Viewer
     */
@@ -243,9 +232,4 @@ export const UI = {
    tooltip_moreInformation: "More informations can be found ",
    tooltip_hint: "Select a Block to show the hint",

-  /**
-   * IDEDrawer
-   */
-  drawer_ideerror_head: "Oops something went wrong",
-  drawer_ideerror_text: "An error occurred while compiling, check your blocks",
-};
+}
@@ -1,43 +1,30 @@
-import React from "react";
-import { Block, Value, Field, Shadow, Category } from "../";
-import { getColour } from "../helpers/colour";
-import "@blockly/block-plus-minus";
-import { TypedVariableModal } from "@blockly/plugin-typed-variable-modal";
-import * as Blockly from "blockly/core";
+import React from 'react';
+import { Block, Value, Field, Shadow, Category } from '../';
+import { getColour } from '../helpers/colour'
+import '@blockly/block-plus-minus';
+import { TypedVariableModal } from '@blockly/plugin-typed-variable-modal';
+import * as Blockly from 'blockly/core';
+
+
+

 class Toolbox extends React.Component {
-  componentDidUpdate() {
-    this.props.workspace.registerToolboxCategoryCallback(
-      "CREATE_TYPED_VARIABLE",
-      this.createFlyout
-    );

-    const typedVarModal = new TypedVariableModal(
-      this.props.workspace,
-      "callbackName",
-      [
-        [`${Blockly.Msg.variable_SHORT_NUMBER}`, "char"],
-        [`${Blockly.Msg.variable_NUMBER}`, "int"],
-        [`${Blockly.Msg.variable_LONG}`, "long"],
-        [`${Blockly.Msg.variable_DECIMAL}`, "float"],
-        [`${Blockly.Msg.variables_TEXT}`, "String"],
-        [`${Blockly.Msg.variables_ARRAY}`, "Array"],
-        [`${Blockly.Msg.variables_CHARACTER}`, "char"],
-        [`${Blockly.Msg.variables_BOOLEAN}`, "boolean"],
-        [`${Blockly.Msg.variables_NULL}`, "void"],
-        [`${Blockly.Msg.variables_UNDEF}`, "undefined"],
-      ]
-    );
+    componentDidUpdate() {
+        this.props.workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', this.createFlyout);
+
+        const typedVarModal = new TypedVariableModal(this.props.workspace, 'callbackName', [['SHORT_NUMBER', 'char'], ['NUMBER', 'int'], ['DECIMAL', 'float'], ['TEXT', 'String'], ['ARRAY', 'Array'], ['CHARACTER', 'char'], ['BOOLEAN', 'boolean'], ['NULL', 'void'], ['UNDEF', 'undefined']]);
        typedVarModal.init();
    }

    createFlyout(workspace) {
+
        let xmlList = [];

        // Add your button and give it a callback name.
-    const button = document.createElement("button");
-    button.setAttribute("text", "Create Typed Variable");
-    button.setAttribute("callbackKey", "callbackName");
+        const button = document.createElement('button');
+        button.setAttribute('text', 'Create Typed Variable');
+        button.setAttribute('callbackKey', 'callbackName');

        xmlList.push(button);

@@ -46,20 +33,12 @@ class Toolbox extends React.Component {
        const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
        xmlList = xmlList.concat(blockList);
        return xmlList;
-  }
+    };

    render() {
        return (
-      <xml
-        xmlns="https://developers.google.com/blockly/xml"
-        id="blockly"
-        style={{ display: "none" }}
-        ref={this.props.toolbox}
-      >
-        <Category
-          name={Blockly.Msg.toolbox_sensors}
-          colour={getColour().sensebox}
-        >
+            <xml xmlns="https://developers.google.com/blockly/xml" id="blockly" style={{ display: 'none' }} ref={this.props.toolbox}>
+                <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" />
@@ -75,21 +54,7 @@ class Toolbox extends React.Component {
                    <Block type="sensebox_sensor_watertemperature" />
                    {/* <Block type="sensebox_windspeed" /> */}
                    <Block type="sensebox_soundsensor_dfrobot" />
-          <Block type="sensebox_multiplexer_init">
-            <Value name="nrChannels">
-              <Block type="math_number">
-                <Field name="NUM">1</Field>
-              </Block>
-            </Value>
-          </Block>
-          <Block type="sensebox_multiplexer_changeChannel">
-            <Value name="Channel">
-              <Block type="math_number">
-                <Field name="NUM">1</Field>
-              </Block>
-            </Value>
-          </Block>
-        </Category>
+                </Category >
                <Category name="WIFI" colour={getColour().sensebox}>
                    <Block type="sensebox_wifi" />
                    <Block type="sensebox_startap" />
@@ -192,16 +157,19 @@ class Toolbox extends React.Component {
                                <Field name="TEXT">Unit</Field>
                            </Block>
                        </Value>
-          </Block>
+                    </Block >
                    <Block type="sensebox_display_plotDisplay">
                        <Value name="Title">
-              <Block type="text"></Block>
+                            <Block type="text">
+                            </Block>
                        </Value>
                        <Value name="YLabel">
-              <Block type="text"></Block>
+                            <Block type="text">
+                            </Block>
                        </Value>
                        <Value name="XLabel">
-              <Block type="text"></Block>
+                            <Block type="text">
+                            </Block>
                        </Value>
                        <Value name="XRange1">
                            <Block type="math_number">
@@ -293,32 +261,16 @@ class Toolbox extends React.Component {
                    </Block>
                    <Block type="sensebox_send_to_osem" />
                </Category>
-        <Category
-          id="catSenseBoxOutput_LoRa"
-          name="  LoRa"
-          colour={getColour().sensebox}
-        >
-          <Category
-            id="catSenseBoxOutput_LoRa_activation"
-            name="    Aktivierung"
-            colour={getColour().sensebox}
-          >
+                <Category id="catSenseBoxOutput_LoRa" name="  LoRa" colour={getColour().sensebox}>
+                    <Category id="catSenseBoxOutput_LoRa_activation" name="    Aktivierung" colour={getColour().sensebox}>
                        <Block type="sensebox_lora_initialize_otaa" />
                        <Block type="sensebox_lora_initialize_abp" />
                    </Category>
-          <Category
-            id="catSenseBoxOutput_LoRa_loramessage"
-            name="    Lora Message"
-            colour={getColour().sensebox}
-          >
+                    <Category id="catSenseBoxOutput_LoRa_loramessage" name="    Lora Message" colour={getColour().sensebox}>
                        <Block type="sensebox_lora_message_send" />
                        <Block type="sensebox_send_lora_sensor_value" />
                    </Category>
-          <Category
-            id="catSenseBoxOutput_Map"
-            name="    TTN Mapper"
-            colour={getColour().sensebox}
-          >
+                    <Category id="catSenseBoxOutput_Map" name="    TTN Mapper" colour={getColour().sensebox}>
                        <Block type="sensebox_lora_ttn_mapper">
                            <Value name="Latitude">
                                <Block type="sensebox_gps">
@@ -347,11 +299,7 @@ class Toolbox extends React.Component {
                            </Value>
                        </Block>
                    </Category>
-          <Category
-            id="catSenseBoxOutput_LoRa_cayenne"
-            name="    Cayenne LPP"
-            colour={getColour().sensebox}
-          >
+                    <Category id="catSenseBoxOutput_LoRa_cayenne" name="    Cayenne LPP" colour={getColour().sensebox}>
                        <Block type="sensebox_lora_cayenne_send" />
                        <Block type="sensebox_lora_cayenne_temperature" />
                        <Block type="sensebox_lora_cayenne_humidity" />
@@ -362,35 +310,7 @@ class Toolbox extends React.Component {
                        <Block type="sensebox_lora_cayenne_gps" />
                    </Category>
                </Category>
-        <Category id="phyphox" name="Phyphox" colour={getColour().phyphox}>
-          <Block type="sensebox_phyphox_init"></Block>
-          <Block type="sensebox_phyphox_experiment">
-            <Value name="view">
-              <Block type="sensebox_phyphox_graph">
-                <Value name="channel0">
-                  <Block type="sensebox_phyphox_timestamp"></Block>
-                </Value>
-                <Value name="channel1">
-                  <Block type="sensebox_phyphox_channel"></Block>
-                </Value>
-              </Block>
-            </Value>
-          </Block>
-          <Block type="sensebox_phyphox_experiment_send">
-            <Value name="sendValues">
-              <Block type="sensebox_phyphox_sendchannel"></Block>
-            </Value>
-          </Block>
-          <Block type="sensebox_phyphox_graph"></Block>
-          <Block type="sensebox_phyphox_timestamp"></Block>
-          <Block type="sensebox_phyphox_channel"></Block>
-          <Block type="sensebox_phyphox_sendchannel"></Block>
-        </Category>
-        <Category
-          id="webserver"
-          name="Webserver"
-          colour={getColour().webserver}
-        >
+                <Category id="webserver" name="Webserver" colour={getColour().webserver}>
                    <Block type="sensebox_initialize_http_server"></Block>
                    <Block type="sensebox_http_on_client_connect"></Block>
                    <Block type="sensebox_ip_address"></Block>
@@ -418,11 +338,7 @@ class Toolbox extends React.Component {
                    <Block type="logic_boolean" />
                    <Block type="switch_case" />
                </Category>
-        <Category
-          id="loops"
-          name={Blockly.Msg.toolbox_loops}
-          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">
@@ -437,13 +353,13 @@ class Toolbox extends React.Component {
                                <Field name="NUM">1</Field>
                            </Block>
                        </Value>
-            <Value name="TO">
-              <Block type="math_number">
+                        <Value name="TO" >
+                            <Block type="math_number" >
                                <Field name="NUM">10</Field>
                            </Block>
                        </Value>
-            <Value name="BY">
-              <Block Type="math_number">
+                        <Value name="BY" >
+                            <Block Type="math_number" >
                                <Field name="NUM">1</Field>
                            </Block>
                        </Value>
@@ -461,11 +377,7 @@ class Toolbox extends React.Component {
                    <Block type="text_length" />
                    <Block type="text_isEmpty" />
                </Category>
-        <Category
-          id="time"
-          name={Blockly.Msg.toolbox_time}
-          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">
@@ -484,48 +396,8 @@ class Toolbox extends React.Component {
                    <Block type="time_micros"></Block>
                    <Block type="infinite_loop"></Block>
                    <Block type="sensebox_interval_timer"></Block>
-          <Block type="sensebox_rtc_init"></Block>
-          <Block type="sensebox_rtc_set">
-            <Value name="second">
-              <Block type="math_number">
-                <Field name="NUM">00</Field>
-              </Block>
-            </Value>
-            <Value name="minutes">
-              <Block type="math_number">
-                <Field name="NUM">00</Field>
-              </Block>
-            </Value>
-            <Value name="hour">
-              <Block type="math_number">
-                <Field name="NUM">00</Field>
-              </Block>
-            </Value>
-            <Value name="day">
-              <Block type="math_number">
-                <Field name="NUM">01</Field>
-              </Block>
-            </Value>
-            <Value name="month">
-              <Block type="math_number">
-                <Field name="NUM">01</Field>
-              </Block>
-            </Value>
-            <Value name="year">
-              <Block type="math_number">
-                <Field name="NUM">1970</Field>
-              </Block>
-            </Value>
-          </Block>
-          {/* <Block type="sensebox_rtc_set_ntp"></Block> */}
-          <Block type="sensebox_rtc_get"></Block>
-          <Block type="sensebox_rtc_get_timestamp"></Block>
                </Category>
-        <Category
-          id="math"
-          name={Blockly.Msg.toolbox_math}
-          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>
@@ -578,21 +450,13 @@ class Toolbox extends React.Component {
                    </Block>
                    <Block type="io_notone"></Block>
                </Category>
-        <Category
-          name={Blockly.Msg.toolbox_variables}
-          colour={getColour().variables}
-          custom="CREATE_TYPED_VARIABLE"
-        ></Category>
-        <Category name="Arrays" colour={getColour().arrays}>
+                <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={Blockly.Msg.toolbox_functions}
-          colour={getColour().procedures}
-          custom="PROCEDURE"
-        ></Category>
+                <Category name={Blockly.Msg.toolbox_functions} colour={getColour().procedures} custom="PROCEDURE"></Category>
                <sep></sep>
                <Category name={Blockly.Msg.toolbox_io} colour={getColour().io}>
                    <Block type="io_digitalwrite"></Block>
@@ -625,7 +489,7 @@ class Toolbox extends React.Component {
                */}
            </xml>
        );
-  }
+    };
 }

 export default Toolbox;
@@ -15,6 +15,7 @@ class Content extends Component {

  componentDidMount() {
    if (this.props.language === 'de_DE') {
+      console.log("change Language")
      Blockly.setLocale(De);
    } else if (this.props.language === 'en_US') {
      Blockly.setLocale(En);
@@ -22,10 +23,13 @@ class Content extends Component {
  }

  componentDidUpdate(props) {
+    console.log(this.props.language)
    if (props.language !== this.props.language) {
      if (this.props.language === 'de_DE') {
+        console.log("change Language")
        Blockly.setLocale(De);
      } else if (this.props.language === 'en_US') {
+        console.log("change Language")
        Blockly.setLocale(En);
      }
    }
@@ -1,38 +1,39 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';

-import Breadcrumbs from "./Breadcrumbs";
+import Breadcrumbs from './Breadcrumbs';

-import { withRouter } from "react-router-dom";
+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";
-import ReactMarkdown from "react-markdown";
-import Container from "@material-ui/core/Container";
-import ExpansionPanel from "@material-ui/core/ExpansionPanel";
-import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import * as Blockly from 'blockly'
+import ReactMarkdown from 'react-markdown';
+import Container from '@material-ui/core/Container';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { FaqQuestions } from "../data/faq";
-import Editor from "rich-markdown-editor";
+import { FaqQuestions } from '../data/faq'
+

 class Faq extends Component {
+
    state = {
-    panel: "",
-    expanded: false,
-    text: "",
-  };
+        panel: '',
+        expanded: false
+    }
+

    handleChange = (panel) => {
-    this.setState({ panel: this.state.panel === panel ? "" : panel });
+        this.setState({ panel: this.state.panel === panel ? '' : panel });
    };

    componentDidMount() {
        // Ensure that Blockly.setLocale is adopted in the component.
        // Otherwise, the text will not be displayed until the next update of the component.

-    window.scrollTo(0, 0);
+        window.scrollTo(0, 0)
        this.forceUpdate();
    }

@@ -40,85 +41,58 @@ class Faq extends Component {
        const { panel } = this.state;
        return (
            <div>
-        <Breadcrumbs
-          content={[{ link: this.props.location.pathname, title: "FAQ" }]}
-        />
+                <Breadcrumbs content={[{ link: this.props.location.pathname, title: 'FAQ' }]} />
                <Container fixed>
-          <div style={{ margin: "0px 24px 0px 24px" }}>
+                    <div style={{ margin: '0px 24px 0px 24px' }}>
                        <h1>FAQ</h1>
                        {FaqQuestions().map((object, i) => {
                            return (
-                <ExpansionPanel
-                  expanded={panel === `panel${i}`}
-                  onChange={() => this.handleChange(`panel${i}`)}
-                >
+                                <ExpansionPanel expanded={panel === `panel${i}`} onChange={() => this.handleChange(`panel${i}`)}>
                                    <ExpansionPanelSummary
-                    expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
+                                        expandIcon={
+                                            <FontAwesomeIcon icon={faChevronDown} />
+                                        }
                                    >
                                        <Typography variant="h6">{object.question}</Typography>
                                    </ExpansionPanelSummary>
                                    <ExpansionPanelDetails>
                                        <Typography>
-                      <ReactMarkdown
-                        className="news"
-                        allowDangerousHtml="true"
-                        children={object.answer}
-                      ></ReactMarkdown>
+                                            <ReactMarkdown className="news" allowDangerousHtml="true" children={object.answer}>
+                                            </ReactMarkdown>
                                        </Typography>
                                    </ExpansionPanelDetails>
                                </ExpansionPanel>
-              );
+                            )
                        })}
-            {this.props.button ? (
+                        {
+                            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("/");
-                }}
-              >
-                {Blockly.Msg.button_back}
-              </Button>
-            )}
-            <Editor
-              defaultValue="Hello world!"
-              // value={this.state.text}
-              onChange={(e) => {
-                this.setState({ text: e() });
-              }}
-              uploadImage={async (file) => {}}
-            />
-            <Button
-              style={{ marginTop: "20px" }}
-              variant="contained"
-              color="primary"
-              onClick={() => {
-                console.log(this.state.text);
-              }}
+                                    onClick={() => { this.props.history.push('/') }}
                                >
                                    {Blockly.Msg.button_back}
                                </Button>
+                        }
                    </div>
                </Container>
-      </div>
+            </div >
        );
-  }
+    };
 }

 export default withRouter(Faq);
-/*
+                /*
 <ExpansionPanel expanded={panel === 'panel1'} onChange={() => this.handleChange('panel1')}>
 <ExpansionPanelSummary
 expandIcon={
@@ -181,23 +155,25 @@ vitae egestas augue. Duis vel est augue.
 </ExpansionPanel>
 */

-// {{
-//     this.props.button ?
-//         <Button
-//             style={{ marginTop: '20px' }}
-//             variant="contained"
-//             color="primary"
-//             onClick={() => { this.props.history.push(this.props.button.link) }}
-//         >
-//             {this.props.button.title}
-//         </Button>
-//         :
-//         <Button
-//             style={{ marginTop: '20px' }}
-//             variant="contained"
-//             color="primary"
-//             onClick={() => { this.props.history.push('/') }}
-//         >
-//             {Blockly.Msg.button_back}
-//         </Button>
-// }}
+                    // {{
+                    //     this.props.button ?
+                    //         <Button
+                    //             style={{ marginTop: '20px' }}
+                    //             variant="contained"
+                    //             color="primary"
+                    //             onClick={() => { this.props.history.push(this.props.button.link) }}
+                    //         >
+                    //             {this.props.button.title}
+                    //         </Button>
+                    //         :
+                    //         <Button
+                    //             style={{ marginTop: '20px' }}
+                    //             variant="contained"
+                    //             color="primary"
+                    //             onClick={() => { this.props.history.push('/') }}
+                    //         >
+                    //             {Blockly.Msg.button_back}
+                    //         </Button>
+                    // }}
+
+
@@ -1,92 +1,49 @@
-import React, { Component } from "react";
-import { withRouter } from "react-router-dom";
-import Container from "@material-ui/core/Container";
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import Container from '@material-ui/core/Container';
 class Impressum extends Component {
    render() {
        return (
            <Container fixed>
-        <div style={{ margin: "0px 24px 0px 24px" }}>
+                <div style={{ margin: '0px 24px 0px 24px' }}>
                    <h1>Impressum</h1>
+
                    <h2>Angaben gemäß § 5 TMG:</h2>
-          Institut für Geoinformatik
-          <br />
+          Institut für Geoinformatik<br />
          Heisenbergstraße 2<br />
          Geo 1<br />
          48149 Münster
+
                <h2>Kontakt:</h2>
-          E-Mail: <a href="mailto:info@msensebox.de">info@msensebox.de</a>
+          E-Mail: <a href="mailto:info@mybadges.org!">info@mybadges.org</a>
+
                    <h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</h2>
-          Geschäftsführende Direktorin Prof. Dr. Angela Schwering
-          <br />
+          Geschäftsführende Direktorin Prof. Dr. Angela Schwering<br />
          Heisenbergstraße 2<br />
          Geo 1<br />
          48149 Münster
+
                <h2>Streitschlichtung</h2>
-          Die Europäische Kommission stellt eine Plattform zur
-          Online-Streitbeilegung (OS) bereit:{" "}
-          <a
-            href="https://ec.europa.eu/consumers/odr"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            https://ec.europa.eu/consumers/odr
-          </a>
-          .<br />
-          Unsere E-Mail-Adresse finden Sie oben im Impressum.
-          <br />
-          <p>
-            Wir sind nicht bereit oder verpflichtet, an
-            Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle
-            teilzunehmen.
-          </p>
+          Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener noreferrer">https://ec.europa.eu/consumers/odr</a>.<br />
+          Unsere E-Mail-Adresse finden Sie oben im Impressum.<br />
+                    <p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
+
                    <h3>Haftung für Inhalte</h3>
-          Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte
-          auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach
-          §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht
-          verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
-          überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige
-          Tätigkeit hinweisen.
-          <p>
-            Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
-            Informationen nach den allgemeinen Gesetzen bleiben hiervon
-            unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem
-            Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei
-            Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese
-            Inhalte umgehend entfernen.
-          </p>
+            Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
+                <p>Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
+
                    <h3>Haftung für Links</h3>
-          Unser Angebot enthält Links zu externen Websites Dritter, auf deren
-          Inhalte wir keinen Einfluss haben. Deshalb können wir für diese
-          fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der
-          verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der
-          Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der
-          Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige
-          Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.
-          <p>
-            Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist
-            jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht
-            zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir
-            derartige Links umgehend entfernen.
-          </p>
+            Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.
+                <p>Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
+
                    <h3>Urheberrecht</h3>
-          Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen
-          Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung,
-          Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der
-          Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
-          jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite
-          sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
-          <p>
-            Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt
-            wurden, werden die Urheberrechte Dritter beachtet. Insbesondere
-            werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie
-            trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten
-            wir um einen entsprechenden Hinweis. Bei Bekanntwerden von
-            Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
-          </p>
+            Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
+                <p>Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
+
                </div>
            </Container>
        );
-  }
+    };
 }

 export default withRouter(Impressum);
@@ -1,177 +1,136 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Link } from "react-router-dom";
-import { logout } from "../actions/authActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { logout } from '../actions/authActions';

-import senseboxLogo from "./sensebox_logo.svg";
+import senseboxLogo from './sensebox_logo.svg';

-import { withRouter } from "react-router-dom";
+import { withRouter } from 'react-router-dom';

-import { withStyles } from "@material-ui/core/styles";
-import Drawer from "@material-ui/core/Drawer";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import List from "@material-ui/core/List";
-import Typography from "@material-ui/core/Typography";
-import Divider from "@material-ui/core/Divider";
-import IconButton from "@material-ui/core/IconButton";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
-import LinearProgress from "@material-ui/core/LinearProgress";
-import Tour from "reactour";
-import { home, assessment } from "./Tour";
-import {
-  faBars,
-  faChevronLeft,
-  faLayerGroup,
-  faSignInAlt,
-  faSignOutAlt,
-  faUserCircle,
-  faQuestionCircle,
-  faCog,
-  faChalkboardTeacher,
-  faTools,
-  faLightbulb,
-} from "@fortawesome/free-solid-svg-icons";
+import { withStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Tour from 'reactour'
+import { home, assessment } from './Tour';
+import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faQuestionCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Blockly from "blockly";
-import Tooltip from "@material-ui/core/Tooltip";
+import * as Blockly from 'blockly'
+import Tooltip from '@material-ui/core/Tooltip';
+

 const styles = (theme) => ({
  drawerWidth: {
    // color: theme.palette.primary.main,
-    width: window.innerWidth < 600 ? "100%" : "240px",
-    borderRight: `1px solid ${theme.palette.primary.main}`,
+    width: window.innerWidth < 600 ? '100%' : '240px',
+    borderRight: `1px solid ${theme.palette.primary.main}`
  },
  appBarColor: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.main
  },
  tourButton: {
-    marginleft: "auto",
-    marginright: "30px",
-  },
+    marginleft: 'auto',
+    marginright: '30px',
+  }
 });

+
 class Navbar extends Component {
+
  constructor(props) {
    super(props);
    this.state = {
      open: false,
-      isTourOpen: false,
+      isTourOpen: false
    };
  }

  toggleDrawer = () => {
    this.setState({ open: !this.state.open });
-  };
+  }

  openTour = () => {
    this.setState({ isTourOpen: true });
-  };
+
+  }

  closeTour = () => {
    this.setState({ isTourOpen: false });
-  };
+  }

  render() {
    var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname);
    var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname);
-    var isAssessment =
-      /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) &&
-      !this.props.tutorialIsLoading &&
-      this.props.tutorial &&
-      this.props.tutorial.steps[this.props.activeStep].type === "task";
+    var isAssessment = /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) &&
+      !this.props.tutorialIsLoading && this.props.tutorial &&
+      this.props.tutorial.steps[this.props.activeStep].type === 'task';
    return (
      <div>
        <AppBar
          position="relative"
-          style={{
-            height: "50px",
-            marginBottom:
-              this.props.tutorialIsLoading || this.props.projectIsLoading
-                ? "0px"
-                : "30px",
-            boxShadow:
-              this.props.tutorialIsLoading || this.props.projectIsLoading
-                ? "none"
-                : "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)",
-          }}
+          style={{ height: '50px', marginBottom: this.props.tutorialIsLoading || this.props.projectIsLoading ? '0px' : '30px', boxShadow: this.props.tutorialIsLoading || this.props.projectIsLoading ? 'none' : '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)' }}
          classes={{ root: this.props.classes.appBarColor }}
        >
-          <Toolbar
-            style={{
-              height: "50px",
-              minHeight: "50px",
-              padding: 0,
-              color: "white",
-            }}
-          >
+          <Toolbar style={{ height: '50px', minHeight: '50px', padding: 0, color: 'white' }}>
            <IconButton
              color="inherit"
              onClick={this.toggleDrawer}
-              style={{ margin: "0 10px" }}
+              style={{ margin: '0 10px' }}
              className="MenuButton"
            >
              <FontAwesomeIcon icon={faBars} />
            </IconButton>
-            <Link to={"/"} style={{ textDecoration: "none", color: "inherit" }}>
+            <Link to={"/"} style={{ textDecoration: 'none', color: 'inherit' }}>
              <Typography variant="h6" noWrap>
                senseBox Blockly
              </Typography>
            </Link>
-            <Link to={"/"} style={{ marginLeft: "10px" }}>
+            <Link to={"/"} style={{ marginLeft: '10px' }}>
              <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
            </Link>
-            {isTutorial ? (
-              <Link
-                to={"/tutorial"}
-                style={{
-                  textDecoration: "none",
-                  color: "inherit",
-                  marginLeft: "10px",
-                }}
-              >
+            {isTutorial ?
+              <Link to={"/tutorial"} style={{ textDecoration: 'none', color: 'inherit', marginLeft: '10px' }}>
                <Typography variant="h6" noWrap>
                  Tutorial
                </Typography>
-              </Link>
-            ) : null}
-            {isHome ? (
-              <Tooltip title="Hilfe starten" arrow>
+              </Link> : null}
+            {isHome ?
+              <Tooltip title='Hilfe starten' arrow>
                <IconButton
                  color="inherit"
                  className={`openTour ${this.props.classes.button}`}
-                  onClick={() => {
-                    this.openTour();
-                  }}
-                  style={{ margin: "0 30px 0 auto" }}
+                  onClick={() => { this.openTour(); }}
+                  style={{ margin: '0 30px 0 auto' }}
                >
                  <FontAwesomeIcon icon={faQuestionCircle} />
                </IconButton>
              </Tooltip>
-            ) : null}
-            {isAssessment ? (
-              <Tooltip title="Hilfe starten" arrow>
+              : null}
+            {isAssessment ?
+              <Tooltip title='Hilfe starten' arrow>
                <IconButton
                  color="inherit"
                  className={`openTour ${this.props.classes.button}`}
-                  onClick={() => {
-                    this.openTour();
-                  }}
-                  style={{ margin: "0 30px 0 auto" }}
+                  onClick={() => { this.openTour(); }}
+                  style={{ margin: '0 30px 0 auto' }}
                >
                  <FontAwesomeIcon icon={faQuestionCircle} />
                </IconButton>
              </Tooltip>
-            ) : null}
+              : null}
            <Tour
              steps={isHome ? home() : assessment()}
              isOpen={this.state.isTourOpen}
-              onRequestClose={() => {
-                this.closeTour();
-              }}
+              onRequestClose={() => { this.closeTour(); }}
            />
          </Toolbar>
        </AppBar>
@@ -183,161 +142,71 @@ class Navbar extends Component {
          classes={{ paper: this.props.classes.drawerWidth }}
          ModalProps={{ keepMounted: true }} // Better open performance on mobile.
        >
-          <div
-            style={{
-              height: "50px",
-              cursor: "pointer",
-              color: "white",
-              padding: "0 22px",
-            }}
-            className={this.props.classes.appBarColor}
-            onClick={this.toggleDrawer}
-          >
-            <div
-              style={{
-                display: " table-cell",
-                verticalAlign: "middle",
-                height: "inherit",
-                width: "0.1%",
-              }}
-            >
-              <Typography variant="h6" style={{ display: "inline" }}>
+          <div style={{ height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px' }} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}>
+            <div style={{ display: ' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%' }}>
+              <Typography variant="h6" style={{ display: 'inline' }}>
                {Blockly.Msg.navbar_menu}
              </Typography>
-              <div style={{ float: "right" }}>
+              <div style={{ float: 'right' }}>
                <FontAwesomeIcon icon={faChevronLeft} />
              </div>
            </div>
          </div>
          <List>
-            {[
-              {
-                text: Blockly.Msg.navbar_tutorials,
-                icon: faChalkboardTeacher,
-                link: "/tutorial",
-              },
-              {
-                text: Blockly.Msg.navbar_tutorialbuilder,
-                icon: faTools,
-                link: "/tutorial/builder",
-                restriction:
-                  this.props.user &&
-                  this.props.user.blocklyRole !== "user" &&
-                  this.props.isAuthenticated,
-              },
-              {
-                text: Blockly.Msg.navbar_gallery,
-                icon: faLightbulb,
-                link: "/gallery",
-              },
-              {
-                text: Blockly.Msg.navbar_projects,
-                icon: faLayerGroup,
-                link: "/project",
-                restriction: this.props.isAuthenticated,
-              },
-            ].map((item, index) => {
-              if (
-                item.restriction ||
-                Object.keys(item).filter(
-                  (attribute) => attribute === "restriction"
-                ).length === 0
-              ) {
+            {[{ text: Blockly.Msg.navbar_tutorials, icon: faChalkboardTeacher, link: "/tutorial" },
+            { text: Blockly.Msg.navbar_tutorialbuilder, icon: faTools, link: "/tutorial/builder", restriction: this.props.user && this.props.user.blocklyRole !== 'user' && this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_gallery, icon: faLightbulb, link: "/gallery" },
+            { text: Blockly.Msg.navbar_projects, 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" }}
-                  >
+                  <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
                    <ListItem button onClick={this.toggleDrawer}>
-                      <ListItemIcon>
-                        <FontAwesomeIcon icon={item.icon} />
-                      </ListItemIcon>
+                      <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
                      <ListItemText primary={item.text} />
                    </ListItem>
                  </Link>
                );
-              } else {
-                return null;
              }
-            })}
+              else {
+                return(
+                  null
+                  )
+              }
+            }
+            )}
          </List>
-          <Divider
-            classes={{ root: this.props.classes.appBarColor }}
-            style={{ marginTop: "auto" }}
-          />
+          <Divider classes={{ root: this.props.classes.appBarColor }} style={{ marginTop: 'auto' }} />
          <List>
-            {[
-              {
-                text: Blockly.Msg.navbar_login,
-                icon: faSignInAlt,
-                link: "/user/login",
-                restriction: !this.props.isAuthenticated,
-              },
-              {
-                text: Blockly.Msg.navbar_account,
-                icon: faUserCircle,
-                link: "/user",
-                restriction: this.props.isAuthenticated,
-              },
-              {
-                text: Blockly.Msg.navbar_logout,
-                icon: faSignOutAlt,
-                function: this.props.logout,
-                restriction: this.props.isAuthenticated,
-              },
-              { text: "FAQ", icon: faQuestionCircle, link: "/faq" },
-              {
-                text: Blockly.Msg.navbar_settings,
-                icon: faCog,
-                link: "/settings",
-              },
-            ].map((item, index) => {
-              if (
-                item.restriction ||
-                Object.keys(item).filter(
-                  (attribute) => attribute === "restriction"
-                ).length === 0
-              ) {
+            {[{ text: Blockly.Msg.navbar_login, icon: faSignInAlt, link: '/user/login', restriction: !this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_account, icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_mybadges, icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_logout, icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated },
+            { text: 'FAQ', icon: faQuestionCircle, link: "/faq" },
+            { text: Blockly.Msg.navbar_settings, 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>
+                  <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>
                );
-              } else {
-                return null;
              }
-            })}
+              else {
+                return(
+                  null
+                  )
+              }
+              
+            }
+            
+            )}
          </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}
+        {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}
      </div>
    );
  }
@@ -349,10 +218,10 @@ Navbar.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
  user: PropTypes.object,
  tutorial: PropTypes.object.isRequired,
-  activeStep: PropTypes.number.isRequired,
+  activeStep: PropTypes.number.isRequired
 };

-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  tutorialIsLoading: state.tutorial.progress,
  projectIsLoading: state.project.progress,
  isAuthenticated: state.auth.isAuthenticated,
@@ -361,6 +230,4 @@ const mapStateToProps = (state) => ({
  activeStep: state.tutorial.activeStep,
 });

-export default connect(mapStateToProps, { logout })(
-  withStyles(styles, { withTheme: true })(withRouter(Navbar))
-);
+export default connect(mapStateToProps, { logout })(withStyles(styles, { withTheme: true })(withRouter(Navbar)));
@@ -56,6 +56,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('/', '');
+    console.log('param', param);
+    console.log(id);
    this.props.getProject(param, id);
  }

@@ -1,70 +1,57 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { getProjects, resetProject } from "../../actions/projectActions";
-import { clearMessages } from "../../actions/messageActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { getProjects, resetProject } from '../../actions/projectActions';
+import { clearMessages } from '../../actions/messageActions';

-import { Link, withRouter } from "react-router-dom";
+import { Link, withRouter } from 'react-router-dom';

-import Breadcrumbs from "../Breadcrumbs";
-import BlocklyWindow from "../Blockly/BlocklyWindow";
-import Snackbar from "../Snackbar";
-import WorkspaceFunc from "../Workspace/WorkspaceFunc";
+import Breadcrumbs from '../Breadcrumbs';
+import BlocklyWindow from '../Blockly/BlocklyWindow';
+import Snackbar from '../Snackbar';
+import WorkspaceFunc from '../Workspace/WorkspaceFunc';

-import { withStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import Divider from "@material-ui/core/Divider";
-import Typography from "@material-ui/core/Typography";
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import { withStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';

 const styles = (theme) => ({
  link: {
    color: theme.palette.primary.main,
-    textDecoration: "none",
-    "&:hover": {
+    textDecoration: 'none',
+    '&:hover': {
      color: theme.palette.primary.main,
-      textDecoration: "underline",
-    },
-  },
+      textDecoration: 'underline'
+    }
+  }
 });

+
 class ProjectHome extends Component {
+
  state = {
    snackbar: false,
-    type: "",
-    key: "",
-    message: "",
-  };
+    type: '',
+    key: '',
+    message: ''
+  }

  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") {
-        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") {
-        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",
-        });
+      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') {
+        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' });
      }
    }
  }
@@ -72,23 +59,14 @@ class ProjectHome extends Component {
  componentDidUpdate(props) {
    if (props.location.pathname !== this.props.location.pathname) {
      this.setState({ snackbar: false });
-      this.props.getProjects(this.props.location.pathname.replace("/", ""));
+      this.props.getProjects(this.props.location.pathname.replace('/', ''));
    }
    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") {
-        this.setState({
-          snackbar: true,
-          key: Date.now(),
-          message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`,
-          type: "success",
-        });
+      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') {
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
      }
    }
  }
@@ -99,107 +77,60 @@ class ProjectHome extends Component {
  }

  render() {
-    var data =
-      this.props.location.pathname === "/project" ? "Projekte" : "Galerie";
+    var data = this.props.location.pathname === '/project' ? 'Projekte' : 'Galerie';
    return (
      <div>
-        <Breadcrumbs
-          content={[{ link: this.props.location.pathname, title: data }]}
-        />
+        <Breadcrumbs content={[{ link: this.props.location.pathname, title: data }]} />

        <h1>{data}</h1>
-        {this.props.progress ? (
+        {this.props.progress ?
          <Backdrop open invisible>
            <CircularProgress color="primary" />
          </Backdrop>
-        ) : (
+          :
          <div>
-            {this.props.projects.length > 0 ? (
+            {this.props.projects.length > 0 ?
              <Grid container spacing={2}>
                {this.props.projects.map((project, i) => {
                  return (
                    <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" }}
-                        >
+                      <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" }}
-                          />
+                          <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 ? (
+                        {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" ? (
-                  <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}
+              : <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}
              </div>
-            )}
+            }
          </div>
-        )}
+        }
        <Snackbar
          open={this.state.snackbar}
          message={this.state.message}
@@ -208,7 +139,7 @@ class ProjectHome extends Component {
        />
      </div>
    );
-  }
+  };
 }

 ProjectHome.propTypes = {
@@ -218,18 +149,15 @@ ProjectHome.propTypes = {
  projects: PropTypes.array.isRequired,
  progress: PropTypes.bool.isRequired,
  user: PropTypes.object,
-  message: PropTypes.object.isRequired,
+  message: PropTypes.object.isRequired
 };

-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  projects: state.project.projects,
  progress: state.project.progress,
  user: state.auth.user,
-  message: state.message,
+  message: state.message
 });

-export default connect(mapStateToProps, {
-  getProjects,
-  resetProject,
-  clearMessages,
-})(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));
+
+export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));
@@ -1,38 +1,40 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { visitPage } from "../../actions/generalActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { visitPage } from '../../actions/generalActions';

-import { Route, Switch, withRouter } from "react-router-dom";
+import { Route, Switch, withRouter } from 'react-router-dom';

-import PublicRoute from "./PublicRoute";
-import PrivateRoute from "./PrivateRoute";
-import PrivateRouteCreator from "./PrivateRouteCreator";
-import IsLoggedRoute from "./IsLoggedRoute";
+import PublicRoute from './PublicRoute';
+import PrivateRoute from './PrivateRoute';
+import PrivateRouteCreator from './PrivateRouteCreator';
+import IsLoggedRoute from './IsLoggedRoute';

-import Home from "../Home";
-import Tutorial from "../Tutorial/Tutorial";
-import TutorialHome from "../Tutorial/TutorialHome";
-import Builder from "../Tutorial/Builder/Builder";
-import NotFound from "../NotFound";
-import ProjectHome from "../Project/ProjectHome";
-import Project from "../Project/Project";
-import Settings from "../Settings/Settings";
-import Impressum from "../Impressum";
-import Privacy from "../Privacy";
-import Login from "../User/Login";
-import Account from "../User/Account";
-import News from "../News";
-import Faq from "../Faq";
+import Home from '../Home';
+import Tutorial from '../Tutorial/Tutorial';
+import TutorialHome from '../Tutorial/TutorialHome';
+import Builder from '../Tutorial/Builder/Builder';
+import NotFound from '../NotFound';
+import ProjectHome from '../Project/ProjectHome';
+import Project from '../Project/Project';
+import Settings from '../Settings/Settings';
+import Impressum from '../Impressum';
+import Privacy from '../Privacy';
+import Login from '../User/Login';
+import Account from '../User/Account';
+import MyBadges from '../User/MyBadges';
+import News from '../News'
+import Faq from '../Faq'

 class Routes extends Component {
+
  componentDidUpdate() {
    this.props.visitPage();
  }

  render() {
    return (
-      <div style={{ margin: "0 22px" }}>
+      <div style={{ margin: '0 22px' }}>
        <Switch>
          <PublicRoute path="/" exact>
            <Home />
@@ -72,6 +74,9 @@ class Routes extends Component {
          <PrivateRoute path="/user" exact>
            <Account />
          </PrivateRoute>
+          <PrivateRoute path="/user/badge" exact>
+            <MyBadges />
+          </PrivateRoute>
          {/* settings */}
          <PublicRoute path="/settings" exact>
            <Settings />
@@ -93,6 +98,7 @@ class Routes extends Component {
          <PublicRoute>
            <NotFound />
          </PublicRoute>
+
        </Switch>
      </div>
    );
@@ -100,7 +106,7 @@ class Routes extends Component {
 }

 Home.propTypes = {
-  visitPage: PropTypes.func.isRequired,
+  visitPage: PropTypes.func.isRequired
 };

 export default connect(null, { visitPage })(withRouter(Routes));
@@ -1,20 +1,20 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { workspaceName } from "../../actions/workspaceActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { workspaceName } from '../../actions/workspaceActions';

-import BlocklyWindow from "../Blockly/BlocklyWindow";
-import CodeViewer from "../CodeViewer";
-import WorkspaceFunc from "../Workspace/WorkspaceFunc";
+import BlocklyWindow from '../Blockly/BlocklyWindow';
+import CodeViewer from '../CodeViewer';
+import WorkspaceFunc from '../Workspace/WorkspaceFunc';

-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";
-import { initialXml } from "../Blockly/initialXml";
+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 {
+
  componentDidMount() {
    this.props.workspaceName(this.props.name);
  }
@@ -28,90 +28,48 @@ class Assessment extends Component {
  render() {
    var tutorialId = this.props.tutorial._id;
    var currentTask = this.props.step;
-    var status = this.props.status.filter(
-      (status) => status._id === tutorialId
-    )[0];
-    var taskIndex = status.tasks.findIndex(
-      (task) => task._id === currentTask._id
-    );
+    var status = this.props.status.filter(status => status._id === tutorialId)[0];
+    var taskIndex = status.tasks.findIndex(task => task._id === currentTask._id);
    var statusTask = status.tasks[taskIndex];

    return (
-      <div className="assessmentDiv" style={{ width: "100%" }}>
-        <Typography
-          variant="h4"
-          style={{
-            float: "left",
-            marginBottom: "5px",
-            height: "40px",
-            display: "table",
-          }}
-        >
-          {currentTask.headline}
-        </Typography>
-        <div style={{ float: "right", height: "40px" }}>
-          <WorkspaceFunc assessment />
-        </div>
-        <Grid container spacing={2} style={{ marginBottom: "5px" }}>
+      <div className="assessmentDiv" style={{ width: '100%' }}>
+        <Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
+        <div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div>
+        <Grid container spacing={2} style={{ marginBottom: '5px' }}>
          <Grid item xs={12} md={6} lg={8}>
            <BlocklyWindow
-              initialXml={initialXml}
+              initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
              blockDisabled
-              blocklyCSS={{ height: "65vH" }}
+              blocklyCSS={{ height: '65vH' }}
            />
          </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">
-                {Blockly.Msg.tutorials_assessment_task}
-              </Typography>
+          <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'>{Blockly.Msg.tutorials_assessment_task}</Typography>
              <Typography>{currentTask.text}</Typography>
            </Card>
-            <div
-              style={
-                isWidthDown("sm", this.props.width)
-                  ? { height: "500px" }
-                  : { height: "50%" }
-              }
-            >
+            <div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
              <CodeViewer />
            </div>
          </Grid>
        </Grid>
      </div>
    );
-  }
+  };
 }

 Assessment.propTypes = {
  status: PropTypes.array.isRequired,
  change: PropTypes.number.isRequired,
  workspaceName: PropTypes.func.isRequired,
-  tutorial: PropTypes.object.isRequired,
+  tutorial: PropTypes.object.isRequired
 };

-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  change: state.tutorial.change,
  status: state.tutorial.status,
-  tutorial: state.tutorial.tutorials[0],
+  tutorial: state.tutorial.tutorials[0]
 });

-export default connect(mapStateToProps, { workspaceName })(
-  withWidth()(Assessment)
-);
+export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { assigneBadge } from '../../actions/tutorialActions';
+
+import Dialog from '../Dialog';
+
+import { Link } from 'react-router-dom';
+
+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: {
+    color: theme.palette.primary.main,
+    textDecoration: 'none',
+    '&:hover': {
+      color: theme.palette.primary.main,
+      textDecoration: 'underline'
+    }
+  }
+});
+
+
+class Badge extends Component {
+
+  state = {
+    open: false,
+    title: '',
+    content: ''
+  };
+
+  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()) {
+              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: `${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01} ${this.props.message.msg.name} ${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02}`, open: true });
+      }
+    }
+  }
+
+  isSuccess = () => {
+    var tutorialId = this.props.tutorial._id;
+    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) {
+      return true;
+    }
+    return false;
+  }
+
+  toggleDialog = () => {
+    this.setState({ open: !this.state, title: '', content: '' });
+  }
+
+  render() {
+    return (
+      <Dialog
+        style={{ zIndex: 99999999 }}
+        open={this.state.open}
+        title={this.state.title}
+        content={this.state.content}
+        onClose={() => { this.toggleDialog(); }}
+        onClick={() => { this.toggleDialog(); }}
+        button={Blockly.Msg.button_close}
+      >
+        <div style={{ marginTop: '10px' }}>
+          <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>
+            </Typography>
+          </Paper>
+          <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>
+    );
+  };
+}
+
+Badge.propTypes = {
+  assigneBadge: PropTypes.func.isRequired,
+  status: PropTypes.array.isRequired,
+  change: PropTypes.number.isRequired,
+  tutorial: PropTypes.object.isRequired,
+  user: PropTypes.object,
+  isAuthenticated: PropTypes.bool.isRequired,
+  message: PropTypes.object.isRequired
+};
+
+const mapStateToProps = state => ({
+  change: state.tutorial.change,
+  status: state.tutorial.status,
+  tutorial: state.tutorial.tutorials[0],
+  user: state.auth.user,
+  isAuthenticated: state.auth.isAuthenticated,
+  message: state.message
+});
+
+export default connect(mapStateToProps, { assigneBadge })(withStyles(styles, { withTheme: true })(Badge));
@@ -0,0 +1,190 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { tutorialBadge, deleteProperty, setError, deleteError } from '../../../actions/tutorialBuilderActions';
+
+import axios from 'axios';
+
+import { withStyles } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+
+const styles = (theme) => ({
+  errorColor: {
+    color: `${theme.palette.error.dark} !important`
+  },
+  errorColorShrink: {
+    color: `rgba(0, 0, 0, 0.54) !important`
+  },
+  errorBorder: {
+    borderColor: `${theme.palette.error.dark} !important`
+  }
+});
+
+class Badge extends Component {
+
+  constructor(props){
+    super(props);
+    this.state={
+      checked: props.badge ? true : false,
+      badgeName: '',
+      filteredBadges: [],
+      badges: []
+    };
+  }
+
+  componentDidMount(){
+    this.getBadges();
+  }
+
+  componentDidUpdate(props){
+    if(props.badge !== this.props.badge){
+      this.setState({ checked: this.props.badge !== undefined ? true : false, badgeName: this.props.badge ? this.state.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
+    }
+  }
+
+  getBadges = () => {
+    axios.get(`${process.env.REACT_APP_MYBADGES_API}/badge`)
+      .then(res => {
+        this.setState({badges: res.data.badges, badgeName: this.props.badge ? res.data.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  deleteBadge = () => {
+    this.setState({ filteredBadges: [], badgeName: '' });
+    this.props.tutorialBadge(null);
+    this.props.setError(this.props.index, 'badge');
+  };
+
+  setBadge = (badge) => {
+    this.setState({ filteredBadges: [] });
+    this.props.tutorialBadge(badge._id);
+    this.props.deleteError(this.props.index, 'badge');
+  };
+
+  onChange = e => {
+    this.setState({ badgeName: e.target.value });
+  };
+
+  onChangeBadge = e => {
+    if(e.target.value && this.props.badge === null){
+      var filteredBadges = this.state.badges.filter(badge => new RegExp(e.target.value, 'i').test(badge.name));
+      if(filteredBadges.length < 1){
+        filteredBadges = ['Keine Übereinstimmung gefunden.'];
+      }
+      this.setState({filteredBadges: filteredBadges});
+    }
+    else {
+      this.setState({filteredBadges: []});
+    }
+  };
+
+  onChangeSwitch = (value) => {
+    var oldValue = this.state.checked;
+    this.setState({checked: value});
+    if(oldValue !== value){
+      if(value){
+        this.props.setError(this.props.index, 'badge');
+        this.props.tutorialBadge(null);
+      } else {
+        this.props.deleteError(this.props.index, 'badge');
+        this.props.tutorialBadge(undefined);
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
+        <FormControlLabel
+          labelPlacement="end"
+          label={"Badge"}
+          control={
+            <Switch
+              checked={this.state.checked}
+              onChange={(e) => this.onChangeSwitch(e.target.checked)}
+              color="primary"
+            />
+          }
+        />
+        {this.state.checked ?
+          <div style={{marginTop: '10px'}}>
+            <FormControl variant="outlined" fullWidth>
+              <InputLabel
+                htmlFor={'badge'}
+                classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
+              >
+                {'Badge'}
+              </InputLabel>
+              <OutlinedInput
+                style={{borderRadius: '25px'}}
+                classes={{notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
+                error={this.props.error}
+                value={this.state.badgeName}
+                label={'Badge'}
+                id={'badge'}
+                disabled={this.props.badge}
+                onChange={(e) => this.onChange(e)}
+                onInput={(e) => this.onChangeBadge(e)}
+                fullWidth={true}
+                endAdornment={
+                      <IconButton
+                        onClick={this.deleteBadge}
+                        edge="end"
+                      >
+                        <FontAwesomeIcon size='xs' icon={faTimes} />
+                      </IconButton>
+                    }
+              />
+              {this.props.error && this.state.filteredBadges.length === 0 ?
+              <FormHelperText className={this.props.classes.errorColor}>Wähle ein Badge aus.</FormHelperText>
+              : null}
+            </FormControl>
+            <List style={{paddingTop: 0}}>
+            {this.state.filteredBadges.map((badge, i) => (
+              badge === 'Keine Übereinstimmung gefunden.' ?
+                <ListItem button key={i} onClick={this.deleteBadge} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}>
+                  <ListItemText>{badge}</ListItemText>
+                </ListItem>
+              :
+              <ListItem button key={i} onClick={() => {this.setBadge(badge)}} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}>
+                <ListItemText>{`${badge.name}`}</ListItemText>
+              </ListItem>
+            ))}
+            </List>
+          </div>
+        : null}
+      </div>
+    );
+  };
+}
+
+Badge.propTypes = {
+  tutorialBadge: PropTypes.func.isRequired,
+  deleteProperty: PropTypes.func.isRequired,
+  setError: PropTypes.func.isRequired,
+  deleteError: PropTypes.func.isRequired,
+  badge: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  badge: state.builder.badge,
+  change: state.builder.change
+});
+
+
+export default connect(mapStateToProps, { tutorialBadge, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(Badge));
@@ -1,75 +1,67 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  checkError,
-  readJSON,
-  jsonString,
-  progress,
-  tutorialId,
-  resetTutorial as resetTutorialBuilder,
-} from "../../../actions/tutorialBuilderActions";
-import {
-  getTutorials,
-  resetTutorial,
-  deleteTutorial,
-  tutorialProgress,
-} from "../../../actions/tutorialActions";
-import { clearMessages } from "../../../actions/messageActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder} from '../../../actions/tutorialBuilderActions';
+import { getTutorials, resetTutorial, deleteTutorial, tutorialProgress } from '../../../actions/tutorialActions';
+import { clearMessages } from '../../../actions/messageActions';

-import axios from "axios";
-import { withRouter } from "react-router-dom";
+import axios from 'axios';
+import { withRouter } from 'react-router-dom';

-import Breadcrumbs from "../../Breadcrumbs";
-import Textfield from "./Textfield";
-import Step from "./Step";
-import Dialog from "../../Dialog";
-import Snackbar from "../../Snackbar";

-import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Divider from "@material-ui/core/Divider";
-import FormHelperText from "@material-ui/core/FormHelperText";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-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 Breadcrumbs from '../../Breadcrumbs';
+import Badge from './Badge';
+import Textfield from './Textfield';
+import Step from './Step';
+import Dialog from '../../Dialog';
+import Snackbar from '../../Snackbar';
+
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Divider from '@material-ui/core/Divider';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+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';

 const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
-    color: "#fff",
+    color: '#fff',
  },
  errorColor: {
-    color: theme.palette.error.dark,
+    color: theme.palette.error.dark
  },
  errorButton: {
-    marginTop: "5px",
-    height: "40px",
+    marginTop: '5px',
+    height: '40px',
    backgroundColor: theme.palette.error.dark,
-    "&:hover": {
-      backgroundColor: theme.palette.error.dark,
-    },
-  },
+    '&:hover': {
+      backgroundColor: theme.palette.error.dark
+    }
+  }
 });

+
 class Builder extends Component {
+
  constructor(props) {
    super(props);
    this.state = {
-      tutorial: "new",
+      tutorial: 'new',
      open: false,
-      title: "",
-      content: "",
+      title: '',
+      content: '',
      string: false,
      snackbar: false,
-      key: "",
-      message: "",
+      key: '',
+      message: ''
    };
    this.inputRef = React.createRef();
  }
@@ -78,38 +70,27 @@ class Builder extends Component {
    this.props.tutorialProgress();
    // retrieve tutorials only if a potential user is loaded - authentication
    // is finished (success or failed)
-    if (!this.props.authProgress) {
+    if(!this.props.authProgress){
      this.props.getTutorials();
    }
  }

  componentDidUpdate(props, state) {
-    if (
-      props.authProgress !== this.props.authProgress &&
-      !this.props.authProgress
-    ) {
+    if(props.authProgress !== this.props.authProgress && !this.props.authProgress){
      // authentication is completed
      this.props.getTutorials();
    }
-    if (props.message !== this.props.message) {
-      if (this.props.message.id === "GET_TUTORIALS_FAIL") {
+    if(props.message !== this.props.message){
+      if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
        // alert(this.props.message.msg);
        this.props.clearMessages();
-      } 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") {
-        this.setState({
-          snackbar: true,
-          key: Date.now(),
-          message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`,
-          type: "error",
-        });
+      }
+      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') {
+        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`, type: 'error' });
      }
    }
  }
@@ -124,32 +105,22 @@ class Builder extends Component {

  uploadJsonFile = (jsonFile) => {
    this.props.progress(true);
-    if (jsonFile.type !== "application/json") {
+    if (jsonFile.type !== 'application/json') {
      this.props.progress(false);
-      this.setState({
-        open: true,
-        string: false,
-        title: "Unzulässiger Dateityp",
-        content:
-          "Die übergebene Datei entspricht nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.",
-      });
-    } else {
+      this.setState({ open: true, string: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entspricht nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.' });
+    }
+    else {
      var reader = new FileReader();
      reader.readAsText(jsonFile);
      reader.onloadend = () => {
        this.readJson(reader.result, true);
      };
    }
-  };
+  }

  uploadJsonString = () => {
-    this.setState({
-      open: true,
-      string: true,
-      title: "JSON-String einfügen",
-      content: "",
-    });
-  };
+    this.setState({ open: true, string: true, title: 'JSON-String einfügen', content: '' });
+  }

  readJson = (jsonString, isFile) => {
    try {
@@ -158,255 +129,173 @@ class Builder extends Component {
        result.steps = [{}];
      }
      this.props.readJSON(result);
-      this.setState({
-        snackbar: true,
-        key: Date.now(),
-        message: `${
-          isFile ? "Die übergebene JSON-Datei" : "Der übergebene JSON-String"
-        } wurde erfolgreich übernommen.`,
-        type: "success",
-      });
+      this.setState({ snackbar: true, key: Date.now(), message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success' });
    } catch (err) {
      this.props.progress(false);
-      this.props.jsonString("");
-      this.setState({
-        open: true,
-        string: false,
-        title: "Ungültiges JSON-Format",
-        content: `${
-          isFile ? "Die übergebene Datei" : "Der übergebene String"
-        } enthält nicht valides JSON. Bitte überprüfe ${
-          isFile ? "die JSON-Datei" : "den JSON-String"
-        } und versuche es erneut.`,
-      });
+      this.props.jsonString('');
+      this.setState({ open: true, string: false, title: 'Ungültiges JSON-Format', content: `${isFile ? 'Die übergebene Datei' : 'Der übergebene String'} enthält nicht valides JSON. Bitte überprüfe ${isFile ? 'die JSON-Datei' : 'den JSON-String'} und versuche es erneut.` });
+    }
  }
-  };

  checkSteps = (steps) => {
    if (!(steps && steps.length > 0)) {
      return false;
    }
    return true;
-  };
+  }

  toggle = () => {
    this.setState({ open: !this.state });
-  };
+  }

  onChange = (value) => {
    this.props.resetTutorialBuilder();
-    this.props.tutorialId("");
+    this.props.tutorialId('');
    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];
+      var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0];
      this.props.readJSON(tutorial);
-      this.setState({
-        snackbar: true,
-        key: Date.now(),
-        message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`,
-        type: "success",
-      });
+      this.setState({ snackbar: true, key: Date.now(), message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`, type: 'success' });
+    }
  }
-  };

  resetFull = () => {
    this.props.resetTutorialBuilder();
-    this.setState({
-      snackbar: true,
-      key: Date.now(),
-      message: `Das Tutorial wurde erfolgreich zurückgesetzt.`,
-      type: "success",
-    });
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success' });
    window.scrollTo(0, 0);
-  };
+  }

  resetTutorial = () => {
-    var tutorial = this.props.tutorials.filter(
-      (tutorial) => tutorial._id === this.props.id
-    )[0];
+    var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === this.props.id)[0];
    this.props.readJSON(tutorial);
-    this.setState({
-      snackbar: true,
-      key: Date.now(),
-      message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`,
-      type: "success",
-    });
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`, type: 'success' });
    window.scrollTo(0, 0);
-  };
+  }

  submit = () => {
    var isError = this.props.checkError();
    if (isError) {
-      this.setState({
-        snackbar: true,
-        key: Date.now(),
-        message: `Die Angaben für das Tutorial sind nicht vollständig.`,
-        type: "error",
-      });
+      this.setState({ snackbar: true, key: Date.now(), message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error' });
      window.scrollTo(0, 0);
      return false;
-    } else {
+    }
+    else {
      // export steps without attribute 'url'
      var steps = this.props.steps;
      var newTutorial = new FormData();
-      newTutorial.append("title", this.props.title);
+      newTutorial.append('title', this.props.title);
+      if(this.props.badge){
+        newTutorial.append('badge', this.props.badge);
+      }
      steps.forEach((step, i) => {
-        if (step._id) {
+        if(step._id){
          newTutorial.append(`steps[${i}][_id]`, step._id);
        }
        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
-              );
+              newTutorial.append(`steps[${i}][requirements][${j}]`, requirement);
            });
          }
          step.hardware.forEach((hardware, j) => {
            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) { // optional
          if (step.media.youtube) {
-            newTutorial.append(
-              `steps[${i}][media][youtube]`,
-              step.media.youtube
-            );
+            newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube);
          }
          if (step.media.picture) {
-            newTutorial.append(
-              `steps[${i}][media][picture]`,
-              step.media.picture
-            );
+            newTutorial.append(`steps[${i}][media][picture]`, step.media.picture);
          }
        }
      });
      return newTutorial;
    }
-  };
+  }

  submitNew = () => {
    var newTutorial = this.submit();
-    if (newTutorial) {
+    if(newTutorial){
      const config = {
-        success: (res) => {
+        success: res => {
          var tutorial = res.data.tutorial;
          this.props.history.push(`/tutorial/${tutorial._id}`);
        },
-        error: (err) => {
-          this.setState({
-            snackbar: true,
-            key: Date.now(),
-            message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`,
-            type: "error",
-          });
+        error: err => {
+          this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`, type: 'error' });
          window.scrollTo(0, 0);
-        },
+        }
      };
-      axios
-        .post(
-          `${process.env.REACT_APP_BLOCKLY_API}/tutorial/`,
-          newTutorial,
-          config
-        )
-        .then((res) => {
+      axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial, config)
+        .then(res => {
          res.config.success(res);
        })
-        .catch((err) => {
+        .catch(err => {
          err.config.error(err);
        });
    }
-  };
+  }

  submitUpdate = () => {
    var updatedTutorial = this.submit();
-    if (updatedTutorial) {
+    if(updatedTutorial){
      const config = {
-        success: (res) => {
+        success: res => {
          var tutorial = res.data.tutorial;
          this.props.history.push(`/tutorial/${tutorial._id}`);
        },
-        error: (err) => {
-          this.setState({
-            snackbar: true,
-            key: Date.now(),
-            message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`,
-            type: "error",
-          });
+        error: err => {
+          this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`, type: 'error' });
          window.scrollTo(0, 0);
-        },
+        }
      };
-      axios
-        .put(
-          `${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`,
-          updatedTutorial,
-          config
-        )
-        .then((res) => {
+      axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial, config)
+        .then(res => {
          res.config.success(res);
        })
-        .catch((err) => {
+        .catch(err => {
          err.config.error(err);
        });
    }
-  };
+  }

  render() {
-    var filteredTutorials = this.props.tutorials.filter(
-      (tutorial) => tutorial.creator === this.props.user.email
-    );
+    var filteredTutorials = this.props.tutorials.filter(tutorial => tutorial.creator === this.props.user.email);
    return (
      <div>
-        <Breadcrumbs
-          content={[
-            { link: "/tutorial", title: "Tutorial" },
-            { link: "/tutorial/builder", title: "Builder" },
-          ]}
-        />
+        <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: '/tutorial/builder', title: 'Builder' }]} />

        <h1>Tutorial-Builder</h1>

-        <RadioGroup
-          row
-          value={this.state.tutorial}
-          onChange={(e) => this.onChange(e.target.value)}
-        >
-          <FormControlLabel
-            style={{ color: "black" }}
+        <RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}>
+          <FormControlLabel style={{ color: 'black' }}
            value="new"
            control={<Radio color="primary" />}
            label="neues Tutorial erstellen"
            labelPlacement="end"
          />
-          {filteredTutorials.length > 0 ? (
+          {filteredTutorials.length > 0 ?
            <div>
-              <FormControlLabel
-                style={{ color: "black" }}
+              <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" }}
+              <FormControlLabel style={{ color: 'black' }}
                disabled={this.props.index === 0}
                value="delete"
                control={<Radio color="primary" />}
@@ -414,196 +303,110 @@ class Builder extends Component {
                labelPlacement="end"
              />
            </div>
-          ) : null}
+            : null}
        </RadioGroup>

-        <Divider variant="fullWidth" style={{ margin: "10px 0 15px 0" }} />
+        <Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />

-        {this.state.tutorial === "new" ? (
+        {this.state.tutorial === 'new' ?
          /*upload JSON*/
          <div ref={this.inputRef}>
            <input
-              style={{ display: "none" }}
+              style={{ display: 'none' }}
              accept="application/json"
-              onChange={(e) => {
-                this.uploadJsonFile(e.target.files[0]);
-              }}
+              onChange={(e) => { this.uploadJsonFile(e.target.files[0]) }}
              id="open-json"
              type="file"
            />
            <label htmlFor="open-json">
-              <Button
-                component="span"
-                style={{ marginRight: "10px", marginBottom: "10px" }}
-                variant="contained"
-                color="primary"
-              >
-                Datei laden
-              </Button>
+              <Button component="span" style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary'>Datei laden</Button>
            </label>
-            <Button
-              style={{ marginRight: "10px", marginBottom: "10px" }}
-              variant="contained"
-              color="primary"
-              onClick={() => this.uploadJsonString()}
-            >
-              String laden
-            </Button>
+            <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"
+              color='primary'
              labelId="select-outlined-label"
              value={this.props.id}
              onChange={(e) => this.onChangeId(e.target.value)}
              label="Tutorial"
            >
-              {filteredTutorials.map((tutorial) => (
+              {filteredTutorials.map(tutorial =>
                <MenuItem value={tutorial._id}>{tutorial.title}</MenuItem>
-              ))}
+              )}
            </Select>
          </FormControl>
-        )}
+        }

-        <Divider variant="fullWidth" style={{ margin: "10px 0 15px 0" }} />
+        <Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />

-        {this.state.tutorial === "new" ||
-        (this.state.tutorial === "change" && this.props.id !== "") ? (
+        {this.state.tutorial === 'new' || (this.state.tutorial === 'change' && this.props.id !== '') ?
        /*Tutorial-Builder-Form*/
        <div>
-            {this.props.error.type ? (
-              <FormHelperText
-                style={{ lineHeight: "initial" }}
-                className={this.props.classes.errorColor}
-              >{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
-            ) : null}
+          {this.props.error.type ?
+            <FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
+            : null}
          {/* <Id error={this.props.error.id} value={this.props.id} /> */}
-            <Textfield
-              value={this.props.title}
-              property={"title"}
-              label={"Titel"}
-              error={this.props.error.title}
-            />
+          <Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} />
+          <Badge error={this.props.error.badge}/>

-            {this.props.steps.map((step, i) => (
+          {this.props.steps.map((step, i) =>
            <Step step={step} index={i} key={i} />
-            ))}
+          )}

          {/*submit or reset*/}
-            {this.state.tutorial !== "delete" ? (
+          {this.state.tutorial !== 'delete' ?
            <div>
-                <Divider
-                  variant="fullWidth"
-                  style={{ margin: "30px 0 10px 0" }}
-                />
-                {this.state.tutorial === "new" ? (
+              <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>
+                  <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>
+              : <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>
                </div>
-                )}
+              }
            </div>
-            ) : null}
+          : null}

-            <Backdrop
-              className={this.props.classes.backdrop}
-              open={this.props.isProgress}
-            >
+            <Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
              <CircularProgress color="inherit" />
            </Backdrop>
          </div>
-        ) : null}
+          : null}

-        {this.state.tutorial === "delete" && this.props.id !== "" ? (
+        {this.state.tutorial === 'delete' && this.props.id !== '' ?
          <Button
            className={this.props.classes.errorButton}
-            variant="contained"
-            color="primary"
-            onClick={() => this.props.deleteTutorial()}
-          >
-            Tutorial löschen
-          </Button>
-        ) : null}
+            variant='contained'
+            color='primary'
+            onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button>
+          : null}

        <Dialog
          open={this.state.open}
-          maxWidth={this.state.string ? "md" : "sm"}
+          maxWidth={this.state.string ? 'md' : 'sm'}
          fullWidth={this.state.string}
          title={this.state.title}
          content={this.state.content}
          onClose={this.toggle}
          onClick={this.toggle}
-          button={"Schließen"}
+          button={'Schließen'}
          actions={
-            this.state.string ? (
+            this.state.string ?
              <div>
-                <Button
-                  disabled={this.props.error.json || this.props.json === ""}
-                  variant="contained"
-                  onClick={() => {
-                    this.toggle();
-                    this.props.progress(true);
-                    this.readJson(this.props.json, false);
-                  }}
-                  color="primary"
-                >
-                  Bestätigen
-                </Button>
-                <Button
-                  onClick={() => {
-                    this.toggle();
-                    this.props.jsonString("");
-                  }}
-                  color="primary"
-                >
-                  Abbrechen
-                </Button>
+                <Button disabled={this.props.error.json || this.props.json === ''} variant='contained' onClick={() => { this.toggle(); this.props.progress(true); this.readJson(this.props.json, false); }} color="primary">Bestätigen</Button>
+                <Button onClick={() => { this.toggle(); this.props.jsonString(''); }} color="primary">Abbrechen</Button>
              </div>
-            ) : null
+              : null
          }
        >
-          {this.state.string ? (
-            <Textfield
-              value={this.props.json}
-              property={"json"}
-              label={"JSON"}
-              multiline
-              error={this.props.error.json}
-            />
-          ) : null}
+          {this.state.string ?
+            <Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error.json} />
+            : null}
        </Dialog>

        <Snackbar
@@ -612,9 +415,10 @@ class Builder extends Component {
          type={this.state.type}
          key={this.state.key}
        />
+
      </div>
    );
-  }
+  };
 }

 Builder.propTypes = {
@@ -630,6 +434,7 @@ Builder.propTypes = {
  resetTutorialBuilder: PropTypes.func.isRequired,
  tutorialProgress: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
+  badge: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  steps: PropTypes.array.isRequired,
  change: PropTypes.number.isRequired,
@@ -639,11 +444,12 @@ Builder.propTypes = {
  tutorials: PropTypes.array.isRequired,
  message: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired,
-  authProgress: PropTypes.bool.isRequired,
+  authProgress: PropTypes.bool.isRequired
 };

-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  title: state.builder.title,
+  badge: state.builder.badge,
  id: state.builder.id,
  steps: state.builder.steps,
  change: state.builder.change,
@@ -653,19 +459,7 @@ const mapStateToProps = (state) => ({
  tutorials: state.tutorial.tutorials,
  message: state.message,
  user: state.auth.user,
-  authProgress: state.auth.progress,
+  authProgress: state.auth.progress
 });

-export default connect(mapStateToProps, {
-  checkError,
-  readJSON,
-  jsonString,
-  progress,
-  tutorialId,
-  resetTutorialBuilder,
-  getTutorials,
-  resetTutorial,
-  tutorialProgress,
-  clearMessages,
-  deleteTutorial,
-})(withStyles(styles, { withTheme: true })(withRouter(Builder)));
+export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, tutorialProgress, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder)));
@@ -1,39 +1,34 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  tutorialTitle,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';

-import { withStyles } from "@material-ui/core/styles";
-import OutlinedInput from "@material-ui/core/OutlinedInput";
-import InputLabel from "@material-ui/core/InputLabel";
-import FormControl from "@material-ui/core/FormControl";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import { withStyles } from '@material-ui/core/styles';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';

-const styles = (theme) => ({
+const styles = theme => ({
  multiline: {
-    padding: "18.5px 14px 18.5px 24px",
+    padding: '18.5px 14px 18.5px 24px'
  },
  errorColor: {
-    color: `${theme.palette.error.dark} !important`,
+    color: `${theme.palette.error.dark} !important`
  },
  errorColorShrink: {
-    color: `rgba(0, 0, 0, 0.54) !important`,
+    color: `rgba(0, 0, 0, 0.54) !important`
  },
  errorBorder: {
-    borderColor: `${theme.palette.error.dark} !important`,
-  },
+    borderColor: `${theme.palette.error.dark} !important`
+  }
 });

 class Textfield extends Component {
-  componentDidMount() {
-    if (this.props.error) {
-      if (this.props.property !== "media") {
+
+  componentDidMount(){
+    if(this.props.error){
+      if(this.props.property !== 'media'){
        this.props.deleteError(this.props.index, this.props.property);
      }
    }
@@ -41,50 +36,38 @@ class Textfield extends Component {

  handleChange = (e) => {
    var value = e.target.value;
-    if (this.props.property === "title") {
+    if(this.props.property === 'title'){
      this.props.tutorialTitle(value);
-    } else if (this.props.property === "json") {
-      this.props.jsonString(value);
-    } else {
-      this.props.changeContent(
-        value,
-        this.props.index,
-        this.props.property,
-        this.props.property2
-      );
    }
-    if (value.replace(/\s/g, "") === "") {
+    else if(this.props.property === 'json'){
+      this.props.jsonString(value);
+    }
+    else if(this.props.property === 'badge'){
+      this.props.tutorialBadge(value);
+    }
+    else {
+      this.props.changeContent(value, this.props.index, this.props.property, this.props.property2);
+    }
+    if(value.replace(/\s/g,'') === ''){
      this.props.setError(this.props.index, this.props.property);
-    } else {
+    }
+    else{
      this.props.deleteError(this.props.index, this.props.property);
    }
  };

  render() {
    return (
-      <FormControl
-        variant="outlined"
-        fullWidth
-        style={{ marginBottom: "10px" }}
-      >
+      <FormControl variant="outlined" fullWidth style={{marginBottom: '10px'}}>
        <InputLabel
          htmlFor={this.props.property}
-          classes={{
-            shrink: this.props.error
-              ? this.props.classes.errorColorShrink
-              : null,
-          }}
+          classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
        >
          {this.props.label}
        </InputLabel>
        <OutlinedInput
-          style={{ borderRadius: "25px" }}
-          classes={{
-            multiline: this.props.classes.multiline,
-            notchedOutline: this.props.error
-              ? this.props.classes.errorBorder
-              : null,
-          }}
+          style={{borderRadius: '25px'}}
+          classes={{multiline: this.props.classes.multiline, notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
          error={this.props.error}
          value={this.props.value}
          label={this.props.label}
@@ -94,37 +77,21 @@ class Textfield extends Component {
          rowsMax={10}
          onChange={(e) => this.handleChange(e)}
        />
-        {this.props.error ? (
-          this.props.property === "title" ? (
-            <FormHelperText className={this.props.classes.errorColor}>
-              Gib einen Titel für das Tutorial ein.
-            </FormHelperText>
-          ) : this.props.property === "json" ? (
-            <FormHelperText className={this.props.classes.errorColor}>
-              Gib einen JSON-String ein und bestätige diesen mit einem Klick auf
-              den entsprechenden Button
-            </FormHelperText>
-          ) : (
-            <FormHelperText className={this.props.classes.errorColor}>
-              {this.props.errorText}
-            </FormHelperText>
-          )
-        ) : null}
+        {this.props.error ?
+          this.props.property === 'title' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText>
+        : this.props.property === 'json' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen JSON-String ein und bestätige diesen mit einem Klick auf den entsprechenden Button</FormHelperText>
+        : <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
+        : null}
      </FormControl>
    );
-  }
+  };
 }

 Textfield.propTypes = {
  tutorialTitle: PropTypes.func.isRequired,
+  tutorialBadge: PropTypes.func.isRequired,
  jsonString: PropTypes.func.isRequired,
  changeContent: PropTypes.func.isRequired,
 };

-export default connect(null, {
-  tutorialTitle,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-})(withStyles(styles, { withTheme: true })(Textfield));
+export default connect(null, { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));
@@ -1,95 +1,57 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';

-import Hardware from "./Hardware";
-import Requirement from "./Requirement";
-import BlocklyWindow from "../Blockly/BlocklyWindow";
+import Hardware from './Hardware';
+import Requirement from './Requirement';
+import BlocklyWindow from '../Blockly/BlocklyWindow';
+
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import ReactMarkdown from 'react-markdown'

-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
-import ReactMarkdown from "react-markdown";

 class Instruction extends Component {
+
  render() {
    var step = this.props.step;
    var isHardware = step.hardware && step.hardware.length > 0;
    var areRequirements = step.requirements && step.requirements.length > 0;
    return (
      <div>
-        <Typography variant="h4" style={{ marginBottom: "5px" }}>
-          {step.headline}
-        </Typography>
-        <Typography style={isHardware ? {} : { marginBottom: "5px" }}>
-          <ReactMarkdown
-            className={"tutorial"}
-            linkTarget={"_blank"}
-            skipHtml={false}
-          >
-            {step.text}
-          </ReactMarkdown>
-        </Typography>
-        {isHardware ? <Hardware picture={step.hardware} /> : null}
-        {areRequirements > 0 ? (
-          <Requirement requirements={step.requirements} />
-        ) : null}
-        {step.media ? (
-          step.media.picture ? (
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                marginBottom: "5px",
-              }}
-            >
-              <img
-                src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
-                alt=""
-                style={{ maxHeight: "40vH", maxWidth: "100%" }}
-              />
+        <Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
+        <Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
+        {isHardware ?
+          <Hardware picture={step.hardware} /> : null}
+        {areRequirements > 0 ?
+          <Requirement requirements={step.requirements} /> : null}
+        {step.media ?
+          step.media.picture ?
+            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
+              <img src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
            </div>
-          ) : step.media.youtube ? (
+            : step.media.youtube ?
              /*16:9; width: 800px; height: width/16*9=450px*/
-            <div style={{ maxWidth: "800px", margin: "auto" }}>
-              <div
-                style={{
-                  position: "relative",
-                  height: 0,
-                  paddingBottom: "calc(100% / 16 * 9)",
-                }}
-              >
-                <iframe
-                  title={step.media.youtube}
-                  style={{
-                    position: "absolute",
-                    top: "0",
-                    left: "0",
-                    width: "100%",
-                    maxWidth: "800px",
-                    height: "100%",
-                    maxHeight: "450px",
-                  }}
-                  src={`https://www.youtube.com/embed/${step.media.youtube}`}
-                  frameBorder="0"
-                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                  allowFullScreen
+              <div style={{ maxWidth: '800px', margin: 'auto' }}>
+                <div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
+                  <iframe title={step.media.youtube} style={{ position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px' }} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
+                </div>
+              </div>
+              : null
+          : null}
+        {step.xml ?
+          <Grid container spacing={2} style={{ marginBottom: '5px' }}>
+            <Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
+              <BlocklyWindow
+                svg
+                blockDisabled
+                initialXml={step.xml}
              />
-              </div>
-            </div>
-          ) : null
-        ) : null}
-        {step.xml ? (
-          <Grid container spacing={2} style={{ marginBottom: "5px" }}>
-            <Grid
-              item
-              xs={12}
-              style={{ display: "flex", justifyContent: "center" }}
-            >
-              <BlocklyWindow svg blockDisabled initialXml={step.xml} />
            </Grid>
          </Grid>
-        ) : null}
+          : null}
      </div>
    );
-  }
+  };
 }

+
 export default Instruction;
@@ -85,7 +85,7 @@ class StepperVertical extends Component {
            return (
              <Step key={i}>
                <Tooltip title={step.headline} placement='right' arrow >
-                  <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => { this.props.tutorialStep(i)}}>
+                  <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => {console.log(i); this.props.tutorialStep(i)}}>
                    <StepLabel
                      StepIconComponent={'div'}
                      classes={{
@@ -1,51 +1,47 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { workspaceName } from "../../actions/workspaceActions";
-import { clearMessages } from "../../actions/messageActions";
-import {
-  getTutorial,
-  resetTutorial,
-  tutorialStep,
-  tutorialProgress,
-} from "../../actions/tutorialActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { workspaceName } from '../../actions/workspaceActions';
+import { clearMessages } from '../../actions/messageActions';
+import { getTutorial, resetTutorial, tutorialStep,tutorialProgress } from '../../actions/tutorialActions';

-import { withRouter } from "react-router-dom";
+import { withRouter } from 'react-router-dom';

-import Breadcrumbs from "../Breadcrumbs";
-import StepperHorizontal from "./StepperHorizontal";
-import StepperVertical from "./StepperVertical";
-import Instruction from "./Instruction";
-import Assessment from "./Assessment";
-import NotFound from "../NotFound";
-import * as Blockly from "blockly";
-import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
+import Breadcrumbs from '../Breadcrumbs';
+import StepperHorizontal from './StepperHorizontal';
+import StepperVertical from './StepperVertical';
+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';

-import Card from "@material-ui/core/Card";
-import Button from "@material-ui/core/Button";
+
+import Card from '@material-ui/core/Card';
+import Button from '@material-ui/core/Button';

 class Tutorial extends Component {
+
  componentDidMount() {
    this.props.tutorialProgress();
    // retrieve tutorial only if a potential user is loaded - authentication
    // is finished (success or failed)
-    if (!this.props.progress) {
+    if(!this.props.progress){
+      console.log(this.props);
      this.props.getTutorial(this.props.match.params.tutorialId);
    }
  }

  componentDidUpdate(props, state) {
-    if (props.progress !== this.props.progress && !this.props.progress) {
+    if(props.progress !== this.props.progress && !this.props.progress){
      // authentication is completed
      this.props.getTutorial(this.props.match.params.tutorialId);
-    } else if (
-      this.props.tutorial &&
-      !this.props.isLoading &&
-      this.props.tutorial._id !== this.props.match.params.tutorialId
-    ) {
+    }
+    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);
    }
  }
@@ -61,97 +57,44 @@ class Tutorial extends Component {
  render() {
    return (
      <div>
-        {this.props.isLoading ? null : !this.props.tutorial ? (
-          this.props.message.id === "GET_TUTORIAL_FAIL" ? (
-            <NotFound
-              button={{
-                title: Blockly.Msg.messages_GET_TUTORIAL_FAIL,
-                link: "/tutorial",
-              }}
-            />
-          ) : null
-        ) : (
-          (() => {
+        {this.props.isLoading ? null :
+          !this.props.tutorial ?
+            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)}`;
+              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,
-                    },
-                  ]}
-                />
+                  <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} />

                  <StepperHorizontal />
+                  <Badge />

-                <div style={{ display: "flex" }}>
+                  <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" ? (
+                    <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}
+                          : <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 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>
    );
-  }
+  };
 }

 Tutorial.propTypes = {
@@ -167,24 +110,17 @@ Tutorial.propTypes = {
  tutorial: PropTypes.object.isRequired,
  isLoading: PropTypes.bool.isRequired,
  message: PropTypes.object.isRequired,
-  progress: PropTypes.bool.isRequired,
+  progress: PropTypes.bool.isRequired
 };

-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  change: state.tutorial.change,
  status: state.tutorial.status,
  activeStep: state.tutorial.activeStep,
  tutorial: state.tutorial.tutorials[0],
  isLoading: state.tutorial.progress,
  message: state.message,
-  progress: state.auth.progress,
+  progress: state.auth.progress
 });

-export default connect(mapStateToProps, {
-  getTutorial,
-  resetTutorial,
-  tutorialStep,
-  tutorialProgress,
-  clearMessages,
-  workspaceName,
-})(withRouter(Tutorial));
+export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, tutorialProgress, clearMessages, workspaceName })(withRouter(Tutorial));
@@ -1,89 +1,77 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { login } from "../../actions/authActions";
-import { clearMessages } from "../../actions/messageActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { login } from '../../actions/authActions'
+import { clearMessages } from '../../actions/messageActions'

-import { withRouter } from "react-router-dom";
+import { withRouter } from 'react-router-dom';

-import Snackbar from "../Snackbar";
-import Alert from "../Alert";
-import Breadcrumbs from "../Breadcrumbs";
+import Snackbar from '../Snackbar';
+import Alert from '../Alert';
+import Breadcrumbs from '../Breadcrumbs';

-import Button from "@material-ui/core/Button";
-import IconButton from "@material-ui/core/IconButton";
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import TextField from "@material-ui/core/TextField";
-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";
+import TextField from '@material-ui/core/TextField';
+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 {
+
  constructor(props) {
    super(props);
    this.state = {
-      redirect: props.location.state
-        ? props.location.state.from.pathname
-        : null,
-      email: "",
-      password: "",
+      redirect: props.location.state ? props.location.state.from.pathname : null,
+      email: '',
+      password: '',
      snackbar: false,
-      type: "",
-      key: "",
-      message: "",
-      showPassword: false,
+      type: '',
+      key: '',
+      message: '',
+      showPassword: false
    };
  }

  componentDidUpdate(props) {
+    console.log(this.state.redirect);
    const { message } = this.props;
    if (message !== props.message) {
-      if (message.id === "LOGIN_SUCCESS") {
+      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") {
-        console.log("login fail");
-        this.setState({
-          email: "",
-          password: "",
-          snackbar: true,
-          key: Date.now(),
-          message: Blockly.Msg.messages_LOGIN_FAIL,
-          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' });
      }
    }
  }

-  onChange = (e) => {
+  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

-  onSubmit = (e) => {
+  onSubmit = e => {
    e.preventDefault();
    const { email, password } = this.state;
-    if (email !== "" && password !== "") {
+    if (email !== '' && password !== '') {
      // create user object
      const user = {
        email,
-        password,
+        password
      };
      this.props.login(user);
    } else {
-      this.setState({
-        snackbar: true,
-        key: Date.now(),
-        message: Blockly.Msg.messages_login_error,
-        type: "error",
-      });
+      this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_login_error, type: 'error' });
    }
  };

@@ -98,25 +86,12 @@ export class Login extends Component {
  render() {
    return (
      <div>
-        <Breadcrumbs
-          content={[{ link: "/user/login", title: Blockly.Msg.button_login }]}
-        />
+        <Breadcrumbs content={[{ link: '/user/login', title: Blockly.Msg.button_login }]} />

-        <div
-          style={{ maxWidth: "500px", marginLeft: "auto", marginRight: "auto" }}
-        >
+        <div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
          <h1>{Blockly.Msg.login_head}</h1>
          <Alert>
-            {Blockly.Msg.login_osem_account_01}{" "}
-            <Link
-              color="primary"
-              rel="noreferrer"
-              target="_blank"
-              href={"https://opensensemap.org/"}
-            >
-              openSenseMap
-            </Link>{" "}
-            {Blockly.Msg.login_osem_account_02}.
+            {Blockly.Msg.login_osem_account_01} <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> {Blockly.Msg.login_osem_account_02}.
          </Alert>
          <Snackbar
            open={this.state.snackbar}
@@ -125,83 +100,51 @@ export class Login extends Component {
            key={this.state.key}
          />
          <TextField
-            style={{ marginBottom: "10px" }}
+            style={{ marginBottom: '10px' }}
            // variant='outlined'
-            type="text"
+            type='text'
            label={Blockly.Msg.labels_username}
-            name="email"
+            name='email'
            value={this.state.email}
            onChange={this.onChange}
            fullWidth={true}
          />
          <TextField
            // variant='outlined'
-            type={this.state.showPassword ? "text" : "password"}
+            type={this.state.showPassword ? 'text' : 'password'}
            label={Blockly.Msg.labels_password}
-            name="password"
+            name='password'
            value={this.state.password}
            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
+              endAdornment:
+                <InputAdornment
+                  position="end"
+                >
                  <IconButton
                    onClick={this.handleClickShowPassword}
                    onMouseDown={this.handleMouseDownPassword}
                    edge="end"
                  >
-                    <FontAwesomeIcon
-                      size="xs"
-                      icon={this.state.showPassword ? faEyeSlash : faEye}
-                    />
+                    <FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
                  </IconButton>
                </InputAdornment>
-              ),
            }}
            onChange={this.onChange}
            fullWidth={true}
          />
          <p>
-            <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>
-              ) : (
-                Blockly.Msg.button_login
-              )}
+            <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>
+                : Blockly.Msg.button_login}
            </Button>
          </p>
-          <p style={{ textAlign: "center", fontSize: "0.8rem" }}>
-            <Link
-              rel="noreferrer"
-              target="_blank"
-              href={"https://opensensemap.org/"}
-              color="primary"
-            >
-              {Blockly.Msg.login_lostpassword}
-            </Link>
+          <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
+            <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">{Blockly.Msg.login_lostpassword}</Link>
          </p>
-          <Divider variant="fullWidth" />
-          <p
-            style={{
-              textAlign: "center",
-              paddingRight: "34px",
-              paddingLeft: "34px",
-            }}
-          >
-            {Blockly.Msg.login_createaccount}
-            <Link
-              rel="noreferrer"
-              target="_blank"
-              href={"https://opensensemap.org/"}
-            >
-              openSenseMap
-            </Link>
-            .
+          <Divider variant='fullWidth' />
+          <p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
+            {Blockly.Msg.login_createaccount}<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
          </p>
        </div>
      </div>
@@ -213,14 +156,12 @@ Login.propTypes = {
  message: PropTypes.object.isRequired,
  login: PropTypes.func.isRequired,
  clearMessages: PropTypes.func.isRequired,
-  progress: PropTypes.bool.isRequired,
+  progress: PropTypes.bool.isRequired
 };

-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  message: state.message,
-  progress: state.auth.progress,
+  progress: state.auth.progress
 });

-export default connect(mapStateToProps, { login, clearMessages })(
-  withRouter(Login)
-);
+export default connect(mapStateToProps, { login, clearMessages })(withRouter(Login));
@@ -0,0 +1,267 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { connectMyBadges, disconnectMyBadges } from '../../actions/authActions';
+
+import axios from 'axios';
+import { withRouter } from 'react-router-dom';
+
+import Breadcrumbs from '../Breadcrumbs';
+import Alert from '../Alert';
+
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import TextField from '@material-ui/core/TextField';
+import Divider from '@material-ui/core/Divider';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Avatar from '@material-ui/core/Avatar';
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+
+const styles = (theme) => ({
+  root: {
+    '& label.Mui-focused': {
+      color: '#aed9c8'
+    },
+    '& .MuiOutlinedInput-root': {
+      '&.Mui-focused fieldset': {
+        borderColor: '#aed9c8'
+      },
+      borderRadius: '0.75rem'
+    }
+  },
+  text: {
+    fontFamily: [
+      '"Open Sans"',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    fontSize: 16
+  }
+});
+
+export class MyBadges extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+      password: '',
+      showPassword: false,
+      msg: '',
+      badges: [],
+      progress: false
+    };
+  }
+
+  componentDidMount(){
+    if(this.props.user.badge){
+      this.getBadges();
+    }
+  }
+
+  componentDidUpdate(props){
+    const { message } = this.props;
+    if (message !== props.message) {
+      // Check for login error
+      if(message.id === 'MYBADGES_CONNECT_FAIL'){
+        this.setState({msg: 'Der Benutzername oder das Passwort ist nicht korrekt.', username: '', password: '', showPassword: false});
+      }
+      else if(message.id === 'MYBADGES_CONNECT_SUCCESS'){
+        this.getBadges();
+      }
+      else if(message.id === 'MYBADGES_DISCONNECT_SUCCESS' || message.id === 'MYBADGES_DISCONNECT_FAIL'){
+        this.setState({progress: false});
+      }
+      else {
+        this.setState({msg: null});
+      }
+    }
+  }
+
+  getBadges = () => {
+    this.setState({progress: true});
+    const config = {
+      success: res => {
+        this.setState({badges: res.data.badges, progress: false});
+      },
+      error: err => {
+        this.setState({progress: false});
+      }
+    };
+    axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, config)
+    .then(res => {
+      res.config.success(res);
+    })
+    .catch(err => {
+      err.config.error(err);
+    });
+  };
+
+  onChange = e => {
+    this.setState({ [e.target.name]: e.target.value, msg: '' });
+  };
+
+  onSubmit = e => {
+    e.preventDefault();
+    const {username, password} = this.state;
+    // create user object
+    const user = {
+      username,
+      password
+    };
+    this.props.connectMyBadges(user);
+  };
+
+  handleClickShowPassword = () => {
+    this.setState({ showPassword: !this.state.showPassword });
+  };
+
+  handleMouseDownPassword = (e) => {
+    e.preventDefault();
+  };
+
+  render(){
+    return(
+      <div>
+        <Breadcrumbs content={[{ link: '/user/badge', title: 'MyBadges' }]} />
+
+        <Grid container spacing={2}>
+          <Grid item xs={12} style={{margin: '4px'}}>
+            {!this.props.user.badge ?
+              <Alert>
+                Du kannst dein Blockly-Konto mit deinem <Link href={`${process.env.REACT_APP_MYBADGES}`}>MyBadges</Link>-Konto verknüpfen, um Badges erwerben zu können.
+              </Alert>
+            : null}
+            <Paper style={{background: '#fffbf5'}}>
+              <div style={{display: 'flex', flexDirection: 'row', alignSelf: 'center', justifyContent: 'center', flexWrap: 'wrap'}}>
+                <div style={!this.props.user.badge ? {margin: '15px 15px 0px 15px'} : {margin: '15px'}}>
+                  <img src={`${process.env.REACT_APP_MYBADGES}/static/media/Logo.d1c71fdf.png`} alt="My Badges" style={{maxWidth: '200px', maxHeight: '200px'}}></img>
+                </div>
+                {!this.props.user.badge ?
+                  <div style={{maxWidth: '500px', alignSelf: 'center', textAlign: 'center', margin: '15px'}}>
+                    {this.state.msg ?
+                      <div style={{lineHeight: 1.43, borderRadius: '0.75rem', padding: '14px 16px', marginBottom: '10px', color: 'rgb(97, 26, 21)', backgroundColor: 'rgb(253, 236, 234)', fontFamily: `"Open Sans",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`}}>
+                        {this.state.msg}
+                      </div> : null
+                    }
+                    <TextField
+                      style={{marginBottom: '10px'}}
+                      classes={{root: this.props.classes.root}}
+                      variant='outlined'
+                      type='text'
+                      label='Nutzername'
+                      name='username'
+                      value={this.state.username}
+                      onChange={this.onChange}
+                      fullWidth={true}
+                    />
+                    <TextField
+                      classes={{root: this.props.classes.root}}
+                      variant='outlined'
+                      type={this.state.showPassword ? 'text' : 'password'}
+                      label='Passwort'
+                      name='password'
+                      value={this.state.password}
+                      InputProps={{
+                        endAdornment:
+                          <InputAdornment
+                            position="end"
+                          >
+                            <IconButton
+                              onClick={this.handleClickShowPassword}
+                              onMouseDown={this.handleMouseDownPassword}
+                              edge="end"
+                            >
+                              <FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
+                            </IconButton>
+                          </InputAdornment>
+                      }}
+                      onChange={this.onChange}
+                      fullWidth={true}
+                    />
+                    <p>
+                      <Button variant='contained' onClick={this.onSubmit} className={this.props.classes.text} style={{background: '#aed9c8', borderRadius: '0.75rem', width: '100%'}}>
+                        Anmelden
+                      </Button>
+                    </p>
+                    <p className={this.props.classes.text} style={{textAlign: 'center', fontSize: '0.8rem'}}>
+                      <Link style={{color: '#aed9c8'}} href={`${process.env.REACT_APP_MYBADGES}/user/password`}>Passwort vergessen?</Link>
+                    </p>
+                    <Divider variant='fullWidth'/>
+                    <p className={this.props.classes.text} style={{textAlign: 'center', paddingRight: "34px", paddingLeft: "34px"}}>
+                      Du hast noch kein Konto? <Link style={{color: '#aed9c8'}} href={`${process.env.REACT_APP_MYBADGES}/register`}>Registrieren</Link>
+                    </p>
+                  </div>
+                : <div style={{margin: '15px', alignSelf: 'center'}}>
+                    <Typography style={{fontWeight: 'bold', fontSize: '1.1rem'}}>MyBadges-Konto ist erfolgreich verknüpft.</Typography>
+                    <Button variant='outlined' style={{borderColor: '#aed9c8'}} onClick={() => {this.props.disconnectMyBadges(); this.setState({badges: [], progress: true});}}>Konto trennen</Button>
+                  </div>}
+              </div>
+            </Paper>
+          </Grid>
+
+          {this.props.user.badge && !this.state.progress ?
+            <Grid container item>
+              <Grid item style={{margin: '4px'}}>
+              {this.state.badges && this.state.badges.length > 0 ?
+                <Typography style={{fontWeight: 'bold'}}>
+                  Du hast {this.state.badges.length} {this.state.badges.length === 1 ? 'Badge' : 'Badges'} im Kontext Blockly for senseBox erreicht.
+                </Typography>
+               : null}
+              </Grid>
+              <Grid container item>
+                {this.state.badges && this.state.badges.length > 0 ?
+                  this.state.badges.map(badge => (
+                    <Grid item xs={12} sm={6} md={4}>
+                      <Paper style={{margin: '4px', textAlign: 'center'}}>
+                        {badge.image && badge.image.path ?
+                          <Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${badge.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'}}>{badge.name}</div>
+                        </Typography>
+                      </Paper>
+                    </Grid>
+                  ))
+                :
+                  <Grid item style={{margin: '4px'}}>
+                    <Typography style={{fontWeight: 'bold'}}>
+                      Du hast noch keine Badges im Kontext senseBox for Blockly erreicht.
+                    </Typography>
+                  </Grid>}
+              </Grid>
+            </Grid>
+          : null}
+        </Grid>
+      </div>
+    );
+  }
+}
+
+MyBadges.propTypes = {
+  connectMyBadges: PropTypes.func.isRequired,
+  disconnectMyBadges: PropTypes.func.isRequired,
+  message: PropTypes.object.isRequired,
+  user: PropTypes.object.isRequired
+};
+
+const mapStateToProps = state => ({
+  message: state.message,
+  user: state.auth.user
+});
+
+export default connect(mapStateToProps, { connectMyBadges, disconnectMyBadges })(withStyles(styles, { withTheme: true })(withRouter(MyBadges)));
@@ -1,172 +1,127 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { workspaceName } from "../../actions/workspaceActions";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { workspaceName } from '../../actions/workspaceActions';

-import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
+import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
+
+import Dialog from '../Dialog';
+
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import TextField from '@material-ui/core/TextField';

-import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
-import Divider from "@material-ui/core/Divider";
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Blockly from "blockly/core";
-import Copy from "../copy.svg";
-import Prism from "prismjs";
-import "prismjs/themes/prism.css";
-import "prismjs/plugins/line-numbers/prism-line-numbers";
-import "prismjs/plugins/line-numbers/prism-line-numbers.css";
-import MuiDrawer from "@material-ui/core/Drawer";
+import * as Blockly from 'blockly/core';
+import Copy from '../copy.svg';

 const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
-    color: "#fff",
+    color: '#fff',
  },
  iconButton: {
    backgroundColor: theme.palette.button.compile,
    color: theme.palette.primary.contrastText,
-    width: "40px",
-    height: "40px",
-    "&:hover": {
+    width: '40px',
+    height: '40px',
+    '&:hover': {
      backgroundColor: theme.palette.button.compile,
      color: theme.palette.primary.contrastText,
-    },
+    }
  },
  button: {
    backgroundColor: theme.palette.button.compile,
    color: theme.palette.primary.contrastText,
-    "&:hover": {
+    '&:hover': {
      backgroundColor: theme.palette.button.compile,
      color: theme.palette.primary.contrastText,
-    },
-  },
+    }
+  }
 });

-const Drawer = withStyles((theme) => ({
-  paperAnchorBottom: {
-    backgroundColor: "black",
-    height: "20vH",
-  },
-}))(MuiDrawer);

 class Compile extends Component {
+
  constructor(props) {
    super(props);
    this.state = {
      progress: false,
      open: false,
      file: false,
-      title: "",
-      content: "",
-      name: props.name,
-      error: "",
+      title: '',
+      content: '',
+      name: props.name
    };
  }

-  componentDidMount() {
-    Prism.highlightAll();
-  }
-
  componentDidUpdate(props) {
    if (props.name !== this.props.name) {
      this.setState({ name: this.props.name });
    }
-    Prism.highlightAll();
  }

+
  compile = () => {
    this.setState({ progress: true });
    const data = {
-      board: process.env.REACT_APP_BOARD,
-      sketch: this.props.arduino,
+      "board": process.env.REACT_APP_BOARD,
+      "sketch": this.props.arduino
    };
    fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
    })
-      .then((response) => response.json())
-      .then((data) => {
+      .then(response => response.json())
+      .then(data => {
        console.log(data);
-        if (data.code === "Internal Server Error") {
-          this.setState({
-            progress: false,
-            file: false,
-            open: true,
-            title: Blockly.Msg.compiledialog_headline,
-            content: Blockly.Msg.compiledialog_text,
-            error: data.message,
-          });
-        }
        this.setState({ id: data.data.id }, () => {
          this.createFileName();
        });
      })
-      .catch((err) => {
+      .catch(err => {
        console.log(err);
-        //this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
+        this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
      });
-  };
+  }

  download = () => {
    const id = this.state.id;
    const filename = detectWhitespacesAndReturnReadableResult(this.state.name);
    this.toggleDialog();
    this.props.workspaceName(this.state.name);
-    window.open(
-      `${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`,
-      "_self"
-    );
+    window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self');
    this.setState({ progress: false });
-  };
+  }

  toggleDialog = () => {
    this.setState({ open: !this.state, progress: false });
-  };
+  }

  createFileName = () => {
    if (this.state.name) {
      this.download();
-    } else {
-      this.setState({
-        file: true,
-        open: true,
-        title: "Projekt kompilieren",
-        content:
-          "Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
-      });
    }
-  };
+    else {
+      this.setState({ file: true, open: true, title: 'Projekt kompilieren', content: 'Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
+    }
+  }

  setFileName = (e) => {
    this.setState({ name: e.target.value });
-  };
-
-  toggleDrawer = (anchor, open) => (event) => {
-    if (
-      event.type === "keydown" &&
-      (event.key === "Tab" || event.key === "Shift")
-    ) {
-      return;
  }

-    this.setState({ open: false });
-  };
-
  render() {
    return (
      <div style={{}}>
-        {this.props.iconButton ? (
-          <Tooltip
-            title={Blockly.Msg.tooltip_compile_code}
-            arrow
-            style={{ marginRight: "5px" }}
-          >
+        {this.props.iconButton ?
+          <Tooltip title={Blockly.Msg.tooltip_compile_code} arrow style={{ marginRight: '5px' }}>
            <IconButton
              className={`compileBlocks ${this.props.classes.iconButton}`}
              onClick={() => this.compile()}
@@ -174,73 +129,21 @@ class Compile extends Component {
              <FontAwesomeIcon icon={faClipboardCheck} size="l" />
            </IconButton>
          </Tooltip>
-        ) : (
-          <Button
-            style={{ float: "right", color: "white" }}
-            variant="contained"
-            className={this.props.classes.button}
-            onClick={() => this.compile()}
-          >
-            <FontAwesomeIcon
-              icon={faClipboardCheck}
-              style={{ marginRight: "5px" }}
-            />{" "}
-            Kompilieren
+          :
+          <Button style={{ float: 'right', color: 'white' }} variant="contained" className={this.props.classes.button} onClick={() => this.compile()}>
+            <FontAwesomeIcon icon={faClipboardCheck} style={{ marginRight: '5px' }} /> Kompilieren
          </Button>
-        )}
-        <Backdrop
-          className={this.props.classes.backdrop}
-          open={this.state.progress}
-        >
-          <div className="overlay">
+        }
+        <Backdrop className={this.props.classes.backdrop} open={this.state.progress}>
+          <div className='overlay'>
            <img src={Copy} width="400" alt="copyimage"></img>
            <h2>{Blockly.Msg.compile_overlay_head}</h2>
            <p>{Blockly.Msg.compile_overlay_text}</p>
-            <p>
-              {Blockly.Msg.compile_overlay_help}
-              <a href="/faq" target="_blank">
-                FAQ
-              </a>
-            </p>
+            <p>{Blockly.Msg.compile_overlay_help}<a href="/faq" target="_blank">FAQ</a></p>
            <CircularProgress color="inherit" />
          </div>
        </Backdrop>
-        <Drawer
-          anchor={"bottom"}
-          open={this.state.open}
-          onClose={this.toggleDrawer("bottom", false)}
-        >
-          <h2
-            style={{
-              color: "#4EAF47",
-              paddingLeft: "1rem",
-              paddingRight: "1rem",
-            }}
-          >
-            {Blockly.Msg.drawer_ideerror_head}
-          </h2>
-          <p
-            style={{
-              color: "#4EAF47",
-              paddingLeft: "1rem",
-              paddingRight: "1rem",
-            }}
-          >
-            {Blockly.Msg.drawer_ideerror_text}
-          </p>
-          <Divider style={{ backgroundColor: "white" }} />
-          <p
-            style={{
-              backgroundColor: "black",
-              color: "#E47128",
-              padding: "1rem",
-            }}
-          >
-            {" "}
-            {`${this.state.error}`}{" "}
-          </p>
-        </Drawer>
-        {/* <Dialog
+        <Dialog
          open={this.state.open}
          title={this.state.title}
          content={this.state.content}
@@ -253,32 +156,23 @@ class Compile extends Component {
              <TextField autoFocus placeholder='Dateiname' value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />
              <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
            </div>
-            : 
-           
-        <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: '100%', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}><code className="language-json">
-                {`${this.state.error}`}
-              </code></pre>
-        </AccordionDetails>
-      </Accordion>
-      
-            }
-        </Dialog> */}
+            : null}
+        </Dialog>
      </div>
    );
-  }
+  };
 }

 Compile.propTypes = {
  arduino: PropTypes.string.isRequired,
  name: PropTypes.string,
-  workspaceName: PropTypes.func.isRequired,
+  workspaceName: PropTypes.func.isRequired
 };

-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  arduino: state.workspace.code.arduino,
-  name: state.workspace.name,
+  name: state.workspace.name
 });

-export default connect(mapStateToProps, { workspaceName })(
-  withStyles(styles, { withTheme: true })(Compile)
-);
+
+export default connect(mapStateToProps, { workspaceName })(withStyles(styles, { withTheme: true })(Compile));
@@ -16,8 +16,6 @@ import Tooltip from '@material-ui/core/Tooltip';

 import { faShare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Dialog from '../Dialog';
-import Button from '@material-ui/core/Button';

 const styles = (theme) => ({
  button: {
@@ -41,21 +39,12 @@ class ResetWorkspace extends Component {
    this.inputRef = React.createRef();
    this.state = {
      snackbar: false,
-      open: false,
      type: '',
      key: '',
      message: '',
    };
  }

-  toggleDialog = () => {
-    this.setState({ open: !this.state});
-  }
-
-  openDialog = () => {
-    this.setState({open: true});
-  }
-
  resetWorkspace = () => {
    const workspace = Blockly.getMainWorkspace();
    Blockly.Events.disable(); // https://groups.google.com/forum/#!topic/blockly/m7e3g0TC75Y
@@ -80,7 +69,7 @@ class ResetWorkspace extends Component {
        <Tooltip title={Blockly.Msg.tooltip_reset_workspace} arrow>
          <IconButton
            className={this.props.classes.button}
-            onClick={() => this.openDialog()}
+            onClick={() => this.resetWorkspace()}
          >
            <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
          </IconButton>
@@ -92,17 +81,6 @@ class ResetWorkspace extends Component {
          type={this.state.type}
          key={this.state.key}
        />
-         <Dialog
-          open={this.state.open}
-          title={Blockly.Msg.resetDialog_headline}
-          content={Blockly.Msg.resetDialog_text}
-          onClose={() => { this.toggleDialog(); }}
-          onClick={() => { this.toggleDialog(); }}
-          button={Blockly.Msg.button_cancel}
-        > <div style={{ marginTop: '10px' }}>
-       
-        <Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
-      </div></Dialog>
      </div>
    );
  };
@@ -127,6 +127,7 @@ class SaveProject extends Component {
  }

  render() {
+    console.log(1, this.props);
    return (
      <div style={this.props.style}>
        <Tooltip title={this.state.projectType === 'project' ? Blockly.Msg.tooltip_update_project : Blockly.Msg.tooltip_save_project} arrow>
@@ -1,61 +1,59 @@
-import {
-  USER_LOADED,
-  USER_LOADING,
-  AUTH_ERROR,
-  LOGIN_SUCCESS,
-  LOGIN_FAIL,
-  LOGOUT_SUCCESS,
-  LOGOUT_FAIL,
-  REFRESH_TOKEN_SUCCESS,
-} from "../actions/types";
+import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types';
+

 const initialState = {
-  token: localStorage.getItem("token"),
-  refreshToken: localStorage.getItem("refreshToken"),
+  token: localStorage.getItem('token'),
+  refreshToken: localStorage.getItem('refreshToken'),
  isAuthenticated: null,
  progress: true,
-  user: null,
+  user: null
 };

-export default function foo(state = initialState, action) {
-  switch (action.type) {
+export default function foo(state = initialState, action){
+  switch(action.type){
    case USER_LOADING:
      return {
        ...state,
-        progress: true,
+        progress: true
      };
    case USER_LOADED:
      return {
        ...state,
        isAuthenticated: true,
        progress: false,
-        user: action.payload,
+        user: action.payload
      };
    case LOGIN_SUCCESS:
    case REFRESH_TOKEN_SUCCESS:
-      localStorage.setItem("token", action.payload.token);
-      localStorage.setItem("refreshToken", action.payload.refreshToken);
+      localStorage.setItem('token', action.payload.token);
+      localStorage.setItem('refreshToken', action.payload.refreshToken);
      return {
        ...state,
        user: action.payload.user,
        token: action.payload.token,
        refreshToken: action.payload.refreshToken,
        isAuthenticated: true,
-        progress: false,
+        progress: false
+      };
+    case MYBADGES_CONNECT:
+    case MYBADGES_DISCONNECT:
+      return {
+        ...state,
+        user: action.payload
      };
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case LOGOUT_SUCCESS:
    case LOGOUT_FAIL:
-      localStorage.removeItem("token");
-      localStorage.removeItem("refreshToken");
+      localStorage.removeItem('token');
+      localStorage.removeItem('refreshToken');
      return {
        ...state,
        token: null,
        refreshToken: null,
        user: null,
        isAuthenticated: false,
-        progress: false,
+        progress: false
      };
    default:
      return state;
@@ -1,54 +1,47 @@
-import {
-  PROGRESS,
-  JSON_STRING,
-  BUILDER_CHANGE,
-  BUILDER_ERROR,
-  BUILDER_TITLE,
-  BUILDER_ID,
-  BUILDER_ADD_STEP,
-  BUILDER_DELETE_STEP,
-  BUILDER_CHANGE_STEP,
-  BUILDER_CHANGE_ORDER,
-  BUILDER_DELETE_PROPERTY,
-} from "../actions/types";
+import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_BADGE, BUILDER_ID, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP,BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from '../actions/types';

 const initialState = {
  change: 0,
  progress: false,
-  json: "",
-  title: "",
-  id: "",
+  json: '',
+  title: '',
+  id: '',
  steps: [
    {
      id: 1,
-      type: "instruction",
-      headline: "",
-      text: "",
+      type: 'instruction',
+      headline: '',
+      text: '',
      hardware: [],
-      requirements: [],
-    },
+      requirements: []
+    }
  ],
  error: {
-    steps: [{}],
-  },
+    steps: [{}]
+  }
 };

-export default function foo(state = initialState, action) {
-  switch (action.type) {
+export default function foo(state = initialState, action){
+  switch(action.type){
    case BUILDER_CHANGE:
      return {
        ...state,
-        change: (state.change += 1),
+        change: state.change += 1
      };
    case BUILDER_TITLE:
      return {
        ...state,
-        title: action.payload,
+        title: action.payload
+      };
+    case BUILDER_BADGE:
+      return {
+        ...state,
+        badge: action.payload
      };
    case BUILDER_ID:
      return {
        ...state,
-        id: action.payload,
+        id: action.payload
      };
    case BUILDER_ADD_STEP:
    case BUILDER_DELETE_STEP:
@@ -57,23 +50,23 @@ export default function foo(state = initialState, action) {
    case BUILDER_DELETE_PROPERTY:
      return {
        ...state,
-        steps: action.payload,
+        steps: action.payload
      };
    case BUILDER_ERROR:
      return {
        ...state,
-        error: action.payload,
-      };
+        error: action.payload
+      }
    case PROGRESS:
      return {
        ...state,
-        progress: action.payload,
-      };
+        progress: action.payload
+      }
    case JSON_STRING:
      return {
        ...state,
-        json: action.payload,
-      };
+        json: action.payload
+      }
    default:
      return state;
  }
@@ -1082,7 +1082,7 @@
    "core-js-pure" "^3.0.0"
    "regenerator-runtime" "^0.13.4"

-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@7.12.1":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@7.12.1":
  "integrity" "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA=="
  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz"
  "version" "7.12.1"
@@ -1098,7 +1098,7 @@
    "@babel/parser" "^7.12.13"
    "@babel/types" "^7.12.13"

-"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.7.0":
  "integrity" "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ=="
  "resolved" "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz"
  "version" "7.13.0"
@@ -1142,23 +1142,13 @@
  "resolved" "https://registry.npmjs.org/@blockly/plugin-modal/-/plugin-modal-1.20200427.4.tgz"
  "version" "1.20200427.4"

-"@blockly/plugin-scroll-options@^1.0.2":
-  "integrity" "sha512-j0ehQlHv/0EWPw8UQEplGs4jCxfo45yp6ZzxYxReMirM0/j4EXXFvgXTZoruPgRYgMl+pCwya32Z6Dkv19sURA=="
-  "resolved" "https://registry.npmjs.org/@blockly/plugin-scroll-options/-/plugin-scroll-options-1.0.2.tgz"
-  "version" "1.0.2"
-
-"@blockly/plugin-typed-variable-modal@^3.1.26":
-  "integrity" "sha512-3aKdr/NkcyH93zt0etnmR+urZ3csHbhqyUBn9Q8r/w6GNm54S8s916B921YnGFUBtnWnUEzieMHRAt5KveSKug=="
-  "resolved" "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.26.tgz"
-  "version" "3.1.26"
+"@blockly/plugin-typed-variable-modal@^3.1.15":
+  "integrity" "sha512-X+s2Vd8tjt1GPV2gGfZUB+srabRUDWcZ7cOzjajV8gmc0zFu0IOLsR991cBptF1bsp207TEtUyIsoWONHBNp4A=="
+  "resolved" "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.15.tgz"
+  "version" "3.1.15"
  dependencies:
    "@blockly/plugin-modal" "^1.20200427.4"

-"@blockly/zoom-to-fit@^2.0.7":
-  "integrity" "sha512-ZMY6k1V97B3IwBWcbxFlpKwKtfWg2vmJuLfmdIymrJQZtswRyY303F1JOl1G1+zsCKeyW/FVo/ysrSDZTIaRCQ=="
-  "resolved" "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-2.0.7.tgz"
-  "version" "2.0.7"
-
 "@cnakazawa/watch@^1.0.3":
  "integrity" "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ=="
  "resolved" "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz"
@@ -1182,7 +1172,7 @@
  "resolved" "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
  "version" "0.8.0"

-"@emotion/is-prop-valid@^0.8.3":
+"@emotion/is-prop-valid@^0.8.1":
  "integrity" "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA=="
  "resolved" "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
  "version" "0.8.8"
@@ -1194,12 +1184,7 @@
  "resolved" "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz"
  "version" "0.7.4"

-"@emotion/stylis@^0.8.4":
-  "integrity" "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
-  "resolved" "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
-  "version" "0.8.5"
-
-"@emotion/unitless@^0.7.4":
+"@emotion/unitless@^0.7.0":
  "integrity" "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
  "resolved" "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
  "version" "0.7.5"
@@ -1944,21 +1929,6 @@
  dependencies:
    "@types/node" "*"

-"@types/hast@^2.0.0":
-  "integrity" "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g=="
-  "resolved" "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz"
-  "version" "2.3.4"
-  dependencies:
-    "@types/unist" "*"
-
-"@types/hoist-non-react-statics@^3.3.0":
-  "integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
-  "resolved" "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
-  "version" "3.3.1"
-  dependencies:
-    "@types/react" "*"
-    "hoist-non-react-statics" "^3.3.0"
-
 "@types/html-minifier-terser@^5.0.0":
  "integrity" "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
  "resolved" "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz"
@@ -2050,16 +2020,6 @@
  dependencies:
    "@types/react" "*"

-"@types/react-redux@^7.1.16":
-  "integrity" "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw=="
-  "resolved" "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz"
-  "version" "7.1.16"
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    "hoist-non-react-statics" "^3.3.0"
-    "redux" "^4.0.0"
-
 "@types/react-transition-group@^4.2.0":
  "integrity" "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w=="
  "resolved" "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz"
@@ -2649,11 +2609,6 @@
  dependencies:
    "sprintf-js" "~1.0.2"

-"argparse@^2.0.1":
-  "integrity" "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-  "resolved" "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
-  "version" "2.0.1"
-
 "aria-query@^4.0.2", "aria-query@^4.2.2":
  "integrity" "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA=="
  "resolved" "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
@@ -3151,10 +3106,10 @@
  dependencies:
    "file-uri-to-path" "1.0.0"

-"blockly@^6.20210701.0", "blockly@3.20200625.0 - 6":
-  "integrity" "sha512-cNrwFOAxXE5Pbs1FJAyLTlSRzpNW/C+0gPT2rGQDOJVVKcyF3vhFC1StgnxvQNsv//ueuksKWIXxDuSWh1VI4w=="
-  "resolved" "https://registry.npmjs.org/blockly/-/blockly-6.20210701.0.tgz"
-  "version" "6.20210701.0"
+"blockly@^5.20210325.1", "blockly@>3.20200625.0":
+  "integrity" "sha512-qrilYPovJeDfxKDWm1YBUCPVNElh/iyC1szaHTIPZHj9C9YPpSzZOeFyyrPBbYRudzbo8kjBOWMtHnN1bLjkoQ=="
+  "resolved" "https://registry.npmjs.org/blockly/-/blockly-5.20210325.1.tgz"
+  "version" "5.20210325.1"
  dependencies:
    "jsdom" "15.2.1"

@@ -3703,6 +3658,15 @@
  "resolved" "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
  "version" "2.2.0"

+"clipboard@^2.0.0":
+  "integrity" "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg=="
+  "resolved" "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz"
+  "version" "2.0.6"
+  dependencies:
+    "good-listener" "^1.2.2"
+    "select" "^1.1.2"
+    "tiny-emitter" "^2.0.0"
+
 "cliui@^5.0.0":
  "integrity" "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA=="
  "resolved" "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz"
@@ -3805,11 +3769,6 @@
  dependencies:
    "delayed-stream" "~1.0.0"

-"comma-separated-tokens@^1.0.0":
-  "integrity" "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
-  "resolved" "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz"
-  "version" "1.0.8"
-
 "commander@^2.20.0":
  "integrity" "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
  "resolved" "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
@@ -3862,11 +3821,6 @@
    "safe-buffer" "5.1.2"
    "vary" "~1.1.2"

-"compute-scroll-into-view@^1.0.17":
-  "integrity" "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
-  "resolved" "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz"
-  "version" "1.0.17"
-
 "concat-map@0.0.1":
  "integrity" "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
  "resolved" "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -3958,13 +3912,6 @@
  "resolved" "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz"
  "version" "0.1.1"

-"copy-to-clipboard@^3.0.8":
-  "integrity" "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw=="
-  "resolved" "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz"
-  "version" "3.3.1"
-  dependencies:
-    "toggle-selection" "^1.0.6"
-
 "core-js-compat@^3.6.2", "core-js-compat@^3.8.1", "core-js-compat@^3.9.0":
  "integrity" "sha512-jXAirMQxrkbiiLsCx9bQPJFA6llDadKMpYrBJQJ3/c4/vsPP/fAf29h24tviRlvwUL6AmY5CHLu2GvjuYviQqA=="
  "resolved" "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.9.1.tgz"
@@ -4171,14 +4118,14 @@
    "domutils" "^1.7.0"
    "nth-check" "^1.0.2"

-"css-to-react-native@^3.0.0":
-  "integrity" "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ=="
-  "resolved" "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz"
-  "version" "3.0.0"
+"css-to-react-native@^2.2.2":
+  "integrity" "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw=="
+  "resolved" "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz"
+  "version" "2.3.2"
  dependencies:
    "camelize" "^1.0.0"
    "css-color-keywords" "^1.0.0"
-    "postcss-value-parser" "^4.0.2"
+    "postcss-value-parser" "^3.3.0"

 "css-tree@^1.1.2":
  "integrity" "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ=="
@@ -4532,6 +4479,11 @@
  "resolved" "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
  "version" "1.0.0"

+"delegate@^3.1.2":
+  "integrity" "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+  "resolved" "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz"
+  "version" "3.2.0"
+
 "depd@~1.1.2":
  "integrity" "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
  "resolved" "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
@@ -4877,12 +4829,7 @@
  "resolved" "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz"
  "version" "1.1.2"

-"entities@^2.0.0", "entities@~2.1.0":
-  "integrity" "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
-  "resolved" "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz"
-  "version" "2.1.0"
-
-"entities@~2.0.0":
+"entities@^2.0.0":
  "integrity" "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
  "resolved" "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz"
  "version" "2.0.3"
@@ -5936,6 +5883,13 @@
    "merge2" "^1.3.0"
    "slash" "^3.0.0"

+"good-listener@^1.2.2":
+  "integrity" "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA="
+  "resolved" "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz"
+  "version" "1.2.2"
+  dependencies:
+    "delegate" "^3.1.2"
+
 "graceful-fs@^4.1.11", "graceful-fs@^4.1.15", "graceful-fs@^4.1.2", "graceful-fs@^4.1.6", "graceful-fs@^4.2.0", "graceful-fs@^4.2.4":
  "integrity" "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
  "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz"
@@ -6052,22 +6006,6 @@
    "inherits" "^2.0.3"
    "minimalistic-assert" "^1.0.1"

-"hast-util-parse-selector@^2.0.0":
-  "integrity" "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="
-  "resolved" "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz"
-  "version" "2.2.5"
-
-"hastscript@^6.0.0":
-  "integrity" "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w=="
-  "resolved" "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz"
-  "version" "6.0.0"
-  dependencies:
-    "@types/hast" "^2.0.0"
-    "comma-separated-tokens" "^1.0.0"
-    "hast-util-parse-selector" "^2.0.0"
-    "property-information" "^5.0.0"
-    "space-separated-tokens" "^1.0.0"
-
 "he@^1.2.0":
  "integrity" "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
  "resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
@@ -6099,7 +6037,7 @@
    "minimalistic-assert" "^1.0.0"
    "minimalistic-crypto-utils" "^1.0.1"

-"hoist-non-react-statics@^3.0.0", "hoist-non-react-statics@^3.1.0", "hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.2":
+"hoist-non-react-statics@^3.1.0", "hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.2":
  "integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
  "resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
  "version" "3.3.2"
@@ -6856,6 +6794,11 @@
  "resolved" "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
  "version" "1.0.0"

+"is-what@^3.3.1":
+  "integrity" "sha512-2ilQz5/f/o9V7WRWJQmpFYNmQFZ9iM+OXRonZKcYgTkCzjb949Vi4h282PD1UfmgHk666rcWonbRJ++KI41VGw=="
+  "resolved" "https://registry.npmjs.org/is-what/-/is-what-3.12.0.tgz"
+  "version" "3.12.0"
+
 "is-windows@^1.0.2":
  "integrity" "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
  "resolved" "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
@@ -7763,20 +7706,6 @@
  "resolved" "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
  "version" "1.1.6"

-"linkify-it@^2.0.0":
-  "integrity" "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw=="
-  "resolved" "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz"
-  "version" "2.2.0"
-  dependencies:
-    "uc.micro" "^1.0.1"
-
-"linkify-it@^3.0.1":
-  "integrity" "sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ=="
-  "resolved" "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.2.tgz"
-  "version" "3.0.2"
-  dependencies:
-    "uc.micro" "^1.0.1"
-
 "load-json-file@^2.0.0":
  "integrity" "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg="
  "resolved" "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz"
@@ -7987,33 +7916,6 @@
  dependencies:
    "object-visit" "^1.0.0"

-"markdown-it-container@^3.0.0":
-  "integrity" "sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw=="
-  "resolved" "https://registry.npmjs.org/markdown-it-container/-/markdown-it-container-3.0.0.tgz"
-  "version" "3.0.0"
-
-"markdown-it@^10.0.0":
-  "integrity" "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg=="
-  "resolved" "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz"
-  "version" "10.0.0"
-  dependencies:
-    "argparse" "^1.0.7"
-    "entities" "~2.0.0"
-    "linkify-it" "^2.0.0"
-    "mdurl" "^1.0.1"
-    "uc.micro" "^1.0.5"
-
-"markdown-it@^12.2.0":
-  "integrity" "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg=="
-  "resolved" "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz"
-  "version" "12.2.0"
-  dependencies:
-    "argparse" "^2.0.1"
-    "entities" "~2.1.0"
-    "linkify-it" "^3.0.1"
-    "mdurl" "^1.0.1"
-    "uc.micro" "^1.0.5"
-
 "md5.js@^1.3.4":
  "integrity" "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg=="
  "resolved" "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz"
@@ -8055,16 +7957,16 @@
  "resolved" "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz"
  "version" "2.0.4"

-"mdurl@^1.0.1":
-  "integrity" "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
-  "resolved" "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz"
-  "version" "1.0.1"
-
 "media-typer@0.3.0":
  "integrity" "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
  "resolved" "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
  "version" "0.3.0"

+"memoize-one@^5.0.0":
+  "integrity" "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz"
+  "version" "5.1.1"
+
 "memory-fs@^0.4.1":
  "integrity" "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI="
  "resolved" "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz"
@@ -8081,6 +7983,13 @@
    "errno" "^0.1.3"
    "readable-stream" "^2.0.1"

+"merge-anything@^2.2.4":
+  "integrity" "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ=="
+  "resolved" "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz"
+  "version" "2.4.4"
+  dependencies:
+    "is-what" "^3.3.1"
+
 "merge-descriptors@1.0.1":
  "integrity" "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
  "resolved" "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -8726,11 +8635,6 @@
    "type-check" "^0.4.0"
    "word-wrap" "^1.2.3"

-"orderedmap@^1.1.0":
-  "integrity" "sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ=="
-  "resolved" "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.1.tgz"
-  "version" "1.1.1"
-
 "original@^1.0.0":
  "integrity" "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg=="
  "resolved" "https://registry.npmjs.org/original/-/original-1.0.2.tgz"
@@ -8743,11 +8647,6 @@
  "resolved" "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz"
  "version" "0.3.0"

-"outline-icons@^1.26.1":
-  "integrity" "sha512-pe2vSI1mR4bJaWpmTitniyNpu4oq8dVObOweh/H6EON+12w2QDRtJZ6A6Bkc2vjlb2ZRYcZasisJI9VBUuTnHQ=="
-  "resolved" "https://registry.npmjs.org/outline-icons/-/outline-icons-1.31.0.tgz"
-  "version" "1.31.0"
-
 "p-each-series@^2.1.0":
  "integrity" "sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA=="
  "resolved" "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz"
@@ -9757,6 +9656,11 @@
  "resolved" "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz"
  "version" "3.3.1"

+"postcss-value-parser@^3.3.0":
+  "integrity" "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+  "resolved" "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz"
+  "version" "3.3.1"
+
 "postcss-value-parser@^4.0.2", "postcss-value-parser@^4.1.0":
  "integrity" "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
  "resolved" "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz"
@@ -9856,10 +9760,12 @@
    "ansi-styles" "^4.0.0"
    "react-is" "^17.0.1"

-"prismjs@^1.24.0", "prismjs@~1.24.0":
-  "integrity" "sha512-SqV5GRsNqnzCL8k5dfAjCNhUrF3pR0A9lTDSCUZeh/LIshheXJEaP0hwLz2t4XHivd2J/v2HR+gRnigzeKe3cQ=="
-  "resolved" "https://registry.npmjs.org/prismjs/-/prismjs-1.24.0.tgz"
-  "version" "1.24.0"
+"prismjs@^1.23.0":
+  "integrity" "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA=="
+  "resolved" "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz"
+  "version" "1.23.0"
+  optionalDependencies:
+    "clipboard" "^2.0.0"

 "process-nextick-args@~2.0.0":
  "integrity" "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
@@ -9896,7 +9802,7 @@
    "kleur" "^3.0.3"
    "sisteransi" "^1.0.5"

-"prop-types@^15.5.8", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@15.7.2":
+"prop-types@^15.5.4", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@15.7.2":
  "integrity" "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ=="
  "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
  "version" "15.7.2"
@@ -9905,129 +9811,6 @@
    "object-assign" "^4.1.1"
    "react-is" "^16.8.1"

-"property-information@^5.0.0":
-  "integrity" "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA=="
-  "resolved" "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz"
-  "version" "5.6.0"
-  dependencies:
-    "xtend" "^4.0.0"
-
-"prosemirror-commands@^1.1.6":
-  "integrity" "sha512-IWyBBXNAd44RM6NnBPljwq+/CM2oYCQJkF+YhKEAZNwzW0uFdGf4qComhjbKZzqFdu6Iub2ZhNsXgwPibA0lCQ=="
-  "resolved" "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.10.tgz"
-  "version" "1.1.10"
-  dependencies:
-    "prosemirror-model" "^1.0.0"
-    "prosemirror-state" "^1.0.0"
-    "prosemirror-transform" "^1.0.0"
-
-"prosemirror-dropcursor@^1.3.3":
-  "integrity" "sha512-tNUwcF2lPAkwKBZPZRtbxpwljnODRNZ3eiYloN1DSUqDjMT1nBZm0nejaEMS1TvNQ+3amibUSAiV4hX+jpASFA=="
-  "resolved" "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.5.tgz"
-  "version" "1.3.5"
-  dependencies:
-    "prosemirror-state" "^1.0.0"
-    "prosemirror-transform" "^1.1.0"
-    "prosemirror-view" "^1.1.0"
-
-"prosemirror-gapcursor@^1.1.5":
-  "integrity" "sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w=="
-  "resolved" "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz"
-  "version" "1.1.5"
-  dependencies:
-    "prosemirror-keymap" "^1.0.0"
-    "prosemirror-model" "^1.0.0"
-    "prosemirror-state" "^1.0.0"
-    "prosemirror-view" "^1.0.0"
-
-"prosemirror-history@^1.1.3":
-  "integrity" "sha512-B9v9xtf4fYbKxQwIr+3wtTDNLDZcmMMmGiI3TAPShnUzvo+Rmv1GiUrsQChY1meetHl7rhML2cppF3FTs7f7UQ=="
-  "resolved" "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.2.0.tgz"
-  "version" "1.2.0"
-  dependencies:
-    "prosemirror-state" "^1.2.2"
-    "prosemirror-transform" "^1.0.0"
-    "rope-sequence" "^1.3.0"
-
-"prosemirror-inputrules@^1.1.3":
-  "integrity" "sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw=="
-  "resolved" "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz"
-  "version" "1.1.3"
-  dependencies:
-    "prosemirror-state" "^1.0.0"
-    "prosemirror-transform" "^1.0.0"
-
-"prosemirror-keymap@^1.0.0", "prosemirror-keymap@^1.1.2", "prosemirror-keymap@^1.1.4":
-  "integrity" "sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg=="
-  "resolved" "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz"
-  "version" "1.1.4"
-  dependencies:
-    "prosemirror-state" "^1.0.0"
-    "w3c-keyname" "^2.2.0"
-
-"prosemirror-markdown@^1.5.2":
-  "integrity" "sha512-e9rVnRULVACEjCvIBOj5P2dGTE/nz8kKspA/GWZXVgtQgqeJEvQ+tUNeZkeRZJ2/I3XPzuWjeoWnwJmkMnIKrg=="
-  "resolved" "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.5.2.tgz"
-  "version" "1.5.2"
-  dependencies:
-    "markdown-it" "^10.0.0"
-    "prosemirror-model" "^1.0.0"
-
-"prosemirror-model@^1.0.0", "prosemirror-model@^1.1.0", "prosemirror-model@^1.13.3", "prosemirror-model@^1.8.1":
-  "integrity" "sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ=="
-  "resolved" "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.14.3.tgz"
-  "version" "1.14.3"
-  dependencies:
-    "orderedmap" "^1.1.0"
-
-"prosemirror-schema-list@^1.1.2":
-  "integrity" "sha512-9gadhga/wySVfb/iZ2vOpndbG0XroeLw0HkkZN5demNbOea6U5oQtJmvyYWC7ZVf3WkhmVdVsOXrllM9JcC20A=="
-  "resolved" "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.1.5.tgz"
-  "version" "1.1.5"
-  dependencies:
-    "prosemirror-model" "^1.0.0"
-    "prosemirror-transform" "^1.0.0"
-
-"prosemirror-state@^1.0.0", "prosemirror-state@^1.0.1", "prosemirror-state@^1.2.2", "prosemirror-state@^1.3.1", "prosemirror-state@^1.3.4":
-  "integrity" "sha512-Xkkrpd1y/TQ6HKzN3agsQIGRcLckUMA9u3j207L04mt8ToRgpGeyhbVv0HI7omDORIBHjR29b7AwlATFFf2GLA=="
-  "resolved" "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.4.tgz"
-  "version" "1.3.4"
-  dependencies:
-    "prosemirror-model" "^1.0.0"
-    "prosemirror-transform" "^1.0.0"
-
-"prosemirror-tables@^0.9.1", "prosemirror-tables@^1.1.1":
-  "integrity" "sha512-LmCz4jrlqQZRsYRDzCRYf/pQ5CUcSOyqZlAj5kv67ZWBH1SVLP2U9WJEvQfimWgeRlIz0y0PQVqO1arRm1+woA=="
-  "resolved" "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz"
-  "version" "1.1.1"
-  dependencies:
-    "prosemirror-keymap" "^1.1.2"
-    "prosemirror-model" "^1.8.1"
-    "prosemirror-state" "^1.3.1"
-    "prosemirror-transform" "^1.2.1"
-    "prosemirror-view" "^1.13.3"
-
-"prosemirror-transform@^1.0.0", "prosemirror-transform@^1.1.0", "prosemirror-transform@^1.2.1", "prosemirror-transform@1.2.5":
-  "integrity" "sha512-eqeIaxWtUfOnpA1ERrXCuSIMzqIJtL9Qrs5uJMCjY5RMSaH5o4pc390SAjn/IDPeIlw6auh0hCCXs3wRvGnQug=="
-  "resolved" "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.5.tgz"
-  "version" "1.2.5"
-  dependencies:
-    "prosemirror-model" "^1.0.0"
-
-"prosemirror-utils@^0.9.6":
-  "integrity" "sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA=="
-  "resolved" "https://registry.npmjs.org/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz"
-  "version" "0.9.6"
-
-"prosemirror-view@^1.0.0", "prosemirror-view@^1.1.0", "prosemirror-view@^1.13.3", "prosemirror-view@1.18.1":
-  "integrity" "sha512-TZd8byDRfdopLiokBY7T27msCSfWqqRxWs/LnBbdI030F+iI2kS+tO59/XFnpZxMLFKlJgOgGGhM9SzD1Nwdxw=="
-  "resolved" "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.18.1.tgz"
-  "version" "1.18.1"
-  dependencies:
-    "prosemirror-model" "^1.1.0"
-    "prosemirror-state" "^1.0.0"
-    "prosemirror-transform" "^1.1.0"
-
 "proxy-addr@~2.0.5":
  "integrity" "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw=="
  "resolved" "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz"
@@ -10244,14 +10027,15 @@
    "strip-ansi" "6.0.0"
    "text-table" "0.2.0"

-"react-dom@^16.0.0 || ^17.0.0", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^17.0.0", "react-dom@^17.0.1", "react-dom@^17.0.2", "react-dom@>= 16.8.0":
-  "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
-  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
-  "version" "17.0.2"
+"react-dom@^16.13.1":
+  "integrity" "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag=="
+  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz"
+  "version" "16.13.1"
  dependencies:
    "loose-envify" "^1.1.0"
    "object-assign" "^4.1.1"
-    "scheduler" "^0.20.2"
+    "prop-types" "^15.6.2"
+    "scheduler" "^0.19.1"

 "react-error-overlay@^6.0.9":
  "integrity" "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
@@ -10270,7 +10054,7 @@
    "use-callback-ref" "^1.2.1"
    "use-sidecar" "^1.0.1"

-"react-is@^16.12.0", "react-is@^16.13.1", "react-is@^16.6.0", "react-is@^16.7.0", "react-is@^16.8.0", "react-is@^16.8.1", "react-is@^16.8.4", "react-is@^16.8.6", "react-is@>= 16.8.0":
+"react-is@^16.12.0", "react-is@^16.6.0", "react-is@^16.7.0", "react-is@^16.8.0", "react-is@^16.8.1", "react-is@^16.8.4", "react-is@^16.8.6", "react-is@^16.9.0":
  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  "version" "16.13.1"
@@ -10296,34 +10080,16 @@
    "unist-util-visit" "^2.0.0"
    "xtend" "^4.0.1"

-"react-mde@^11.5.0":
-  "integrity" "sha512-CH/VK6d+tpVjJ8rTXfh1dDt6GWedTgCU0668p8toqhAc3vy0Lu872O2RKYDSpkUrlbHI08fjUPTl++nExp6gag=="
-  "resolved" "https://registry.npmjs.org/react-mde/-/react-mde-11.5.0.tgz"
-  "version" "11.5.0"
-
-"react-medium-image-zoom@^3.1.3":
-  "integrity" "sha512-5CoU8whSCz5Xz2xNeGD34dDfZ6jaf/pybdfZh8HNUmA9mbXbLfj0n6bQWfEUwkq9lsNg1sEkyeIJq2tcvZY8bw=="
-  "resolved" "https://registry.npmjs.org/react-medium-image-zoom/-/react-medium-image-zoom-3.1.3.tgz"
-  "version" "3.1.3"
-
-"react-portal@^4.2.1":
-  "integrity" "sha512-fE9kOBagwmTXZ3YGRYb4gcMy+kSA+yLO0xnPankjRlfBv4uCpFXqKPfkpsGQQR15wkZ9EssnvTOl1yMzbkxhPQ=="
-  "resolved" "https://registry.npmjs.org/react-portal/-/react-portal-4.2.1.tgz"
-  "version" "4.2.1"
+"react-redux@^7.2.0":
+  "integrity" "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA=="
+  "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz"
+  "version" "7.2.0"
  dependencies:
-    "prop-types" "^15.5.8"
-
-"react-redux@^7.2.4":
-  "integrity" "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA=="
-  "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz"
-  "version" "7.2.4"
-  dependencies:
-    "@babel/runtime" "^7.12.1"
-    "@types/react-redux" "^7.1.16"
-    "hoist-non-react-statics" "^3.3.2"
+    "@babel/runtime" "^7.5.5"
+    "hoist-non-react-statics" "^3.3.0"
    "loose-envify" "^1.4.0"
    "prop-types" "^15.7.2"
-    "react-is" "^16.13.1"
+    "react-is" "^16.9.0"

 "react-refresh@^0.8.3", "react-refresh@>=0.8.3 <0.10.0":
  "integrity" "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
@@ -10435,13 +10201,14 @@
    "loose-envify" "^1.4.0"
    "prop-types" "^15.6.2"

-"react@^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react@^16.0.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^17.0.0", "react@^17.0.1", "react@^17.0.2", "react@>= 16", "react@>= 16.8.0", "react@17.0.2":
-  "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
-  "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
-  "version" "17.0.2"
+"react@^16.13.1", "react@>= 16":
+  "integrity" "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w=="
+  "resolved" "https://registry.npmjs.org/react/-/react-16.13.1.tgz"
+  "version" "16.13.1"
  dependencies:
    "loose-envify" "^1.1.0"
    "object-assign" "^4.1.1"
+    "prop-types" "^15.6.2"

 "reactour@^1.18.0":
  "integrity" "sha512-de0Pa5NkDU6I8IyGl+7+rWdDcx3AskmJYK/yIKU11D9EPIN79qzn852gjJgvH/jXZqeEfa+rmMWg72vA0UkmgA=="
@@ -10656,7 +10423,7 @@
  "resolved" "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz"
  "version" "2.3.0"

-"redux@^4.0.0", "redux@^4.0.5":
+"redux@^4.0.5":
  "integrity" "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w=="
  "resolved" "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz"
  "version" "4.0.5"
@@ -10664,15 +10431,6 @@
    "loose-envify" "^1.4.0"
    "symbol-observable" "^1.2.0"

-"refractor@^3.3.1":
-  "integrity" "sha512-dBeD02lC5eytm9Gld2Mx0cMcnR+zhSnsTfPpWqFaMgUMJfC9A6bcN3Br/NaXrnBJcuxnLFR90k1jrkaSyV8umg=="
-  "resolved" "https://registry.npmjs.org/refractor/-/refractor-3.4.0.tgz"
-  "version" "3.4.0"
-  dependencies:
-    "hastscript" "^6.0.0"
-    "parse-entities" "^2.0.0"
-    "prismjs" "~1.24.0"
-
 "regenerate-unicode-properties@^8.2.0":
  "integrity" "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA=="
  "resolved" "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz"
@@ -10857,11 +10615,6 @@
  "resolved" "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
  "version" "1.0.0"

-"resize-observer-polyfill@^1.5.1":
-  "integrity" "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-  "resolved" "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
-  "version" "1.5.1"
-
 "resolve-cwd@^2.0.0":
  "integrity" "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo="
  "resolved" "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz"
@@ -10963,37 +10716,6 @@
  "resolved" "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz"
  "version" "1.0.0"

-"rich-markdown-editor@^11.17.7":
-  "integrity" "sha512-SFIMDz8xOrasOMeMiPyFShlldd3ta1TsIe9F4M3Gkej9UxGDsjBUbKux8NGEssZrxgYNxIh9GMYgM3+IJv+/1g=="
-  "resolved" "https://registry.npmjs.org/rich-markdown-editor/-/rich-markdown-editor-11.17.7.tgz"
-  "version" "11.17.7"
-  dependencies:
-    "copy-to-clipboard" "^3.0.8"
-    "lodash" "^4.17.11"
-    "markdown-it" "^12.2.0"
-    "markdown-it-container" "^3.0.0"
-    "outline-icons" "^1.26.1"
-    "prosemirror-commands" "^1.1.6"
-    "prosemirror-dropcursor" "^1.3.3"
-    "prosemirror-gapcursor" "^1.1.5"
-    "prosemirror-history" "^1.1.3"
-    "prosemirror-inputrules" "^1.1.3"
-    "prosemirror-keymap" "^1.1.4"
-    "prosemirror-markdown" "^1.5.2"
-    "prosemirror-model" "^1.13.3"
-    "prosemirror-schema-list" "^1.1.2"
-    "prosemirror-state" "^1.3.4"
-    "prosemirror-tables" "^1.1.1"
-    "prosemirror-transform" "1.2.5"
-    "prosemirror-utils" "^0.9.6"
-    "prosemirror-view" "1.18.1"
-    "react-medium-image-zoom" "^3.1.3"
-    "react-portal" "^4.2.1"
-    "refractor" "^3.3.1"
-    "resize-observer-polyfill" "^1.5.1"
-    "slugify" "^1.4.0"
-    "smooth-scroll-into-view-if-needed" "^1.1.29"
-
 "rimraf@^2.5.4":
  "integrity" "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w=="
  "resolved" "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
@@ -11058,11 +10780,6 @@
    "@types/node" "*"
    "acorn" "^7.1.0"

-"rope-sequence@^1.3.0":
-  "integrity" "sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg=="
-  "resolved" "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.2.tgz"
-  "version" "1.3.2"
-
 "rsvp@^4.8.4":
  "integrity" "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA=="
  "resolved" "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz"
@@ -11159,10 +10876,10 @@
  dependencies:
    "xmlchars" "^2.2.0"

-"scheduler@^0.20.2":
-  "integrity" "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ=="
-  "resolved" "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz"
-  "version" "0.20.2"
+"scheduler@^0.19.1":
+  "integrity" "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA=="
+  "resolved" "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz"
+  "version" "0.19.1"
  dependencies:
    "loose-envify" "^1.1.0"
    "object-assign" "^4.1.1"
@@ -11203,13 +10920,6 @@
    "ajv" "^6.12.5"
    "ajv-keywords" "^3.5.2"

-"scroll-into-view-if-needed@^2.2.28":
-  "integrity" "sha512-8LuxJSuFVc92+0AdNv4QOxRL4Abeo1DgLnGNkn1XlaujPH/3cCFz3QI60r2VNu4obJJROzgnIUw5TKQkZvZI1w=="
-  "resolved" "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.28.tgz"
-  "version" "2.2.28"
-  dependencies:
-    "compute-scroll-into-view" "^1.0.17"
-
 "scroll-smooth@1.1.0":
  "integrity" "sha512-68OUOXKN/ykM/Dbp4Lhza3O9QQUuW/c01WTsZzDOUyVgb1I5QjT/awOHCCbuYTSV1QnExUQ9w+KcxmVxlXIiAg=="
  "resolved" "https://registry.npmjs.org/scroll-smooth/-/scroll-smooth-1.1.0.tgz"
@@ -11225,6 +10935,11 @@
  "resolved" "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"
  "version" "2.0.0"

+"select@^1.1.2":
+  "integrity" "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+  "resolved" "https://registry.npmjs.org/select/-/select-1.1.2.tgz"
+  "version" "1.1.2"
+
 "selfsigned@^1.10.8":
  "integrity" "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w=="
  "resolved" "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz"
@@ -11381,11 +11096,6 @@
    "inherits" "^2.0.1"
    "safe-buffer" "^5.0.1"

-"shallowequal@^1.1.0":
-  "integrity" "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-  "resolved" "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
-  "version" "1.1.0"
-
 "shebang-command@^1.2.0":
  "integrity" "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo="
  "resolved" "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"
@@ -11460,18 +11170,6 @@
    "astral-regex" "^2.0.0"
    "is-fullwidth-code-point" "^3.0.0"

-"slugify@^1.4.0":
-  "integrity" "sha512-FkMq+MQc5hzYgM86nLuHI98Acwi3p4wX+a5BO9Hhw4JdK4L7WueIiZ4tXEobImPqBz2sVcV0+Mu3GRB30IGang=="
-  "resolved" "https://registry.npmjs.org/slugify/-/slugify-1.6.0.tgz"
-  "version" "1.6.0"
-
-"smooth-scroll-into-view-if-needed@^1.1.29":
-  "integrity" "sha512-1/Ui1kD/9U4E6B6gYvJ6qhEiZPHMT9ZHi/OKJVEiCFhmcMqPm7y4G15pIl/NhuPTkDF/u57eEOK4Frh4721V/w=="
-  "resolved" "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-1.1.32.tgz"
-  "version" "1.1.32"
-  dependencies:
-    "scroll-into-view-if-needed" "^2.2.28"
-
 "snapdragon-node@^2.0.1":
  "integrity" "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw=="
  "resolved" "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
@@ -11599,11 +11297,6 @@
  "resolved" "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
  "version" "1.4.8"

-"space-separated-tokens@^1.0.0":
-  "integrity" "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA=="
-  "resolved" "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz"
-  "version" "1.1.5"
-
 "spdx-correct@^3.0.0":
  "integrity" "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w=="
  "resolved" "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz"
@@ -11939,20 +11632,23 @@
    "loader-utils" "^2.0.0"
    "schema-utils" "^2.7.0"

-"styled-components@^5.0.0":
-  "integrity" "sha512-F7VhIXIbUXJ8KO3pU9wap2Hxdtqa6PZ1uHrx+YXTgRjyxGlwvBHb8LULXPabmDA+uEliTXRJM5WcZntJnKNn3g=="
-  "resolved" "https://registry.npmjs.org/styled-components/-/styled-components-5.0.0.tgz"
-  "version" "5.0.0"
+"styled-components@^4.4.1":
+  "integrity" "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g=="
+  "resolved" "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz"
+  "version" "4.4.1"
  dependencies:
    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^0.8.3"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
+    "@babel/traverse" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.8.1"
+    "@emotion/unitless" "^0.7.0"
    "babel-plugin-styled-components" ">= 1"
-    "css-to-react-native" "^3.0.0"
-    "hoist-non-react-statics" "^3.0.0"
-    "shallowequal" "^1.1.0"
+    "css-to-react-native" "^2.2.2"
+    "memoize-one" "^5.0.0"
+    "merge-anything" "^2.2.4"
+    "prop-types" "^15.5.4"
+    "react-is" "^16.6.0"
+    "stylis" "^3.5.0"
+    "stylis-rule-sheet" "^0.0.10"
    "supports-color" "^5.5.0"

 "stylehacks@^4.0.0":
@@ -11964,6 +11660,16 @@
    "postcss" "^7.0.0"
    "postcss-selector-parser" "^3.0.0"

+"stylis-rule-sheet@^0.0.10":
+  "integrity" "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+  "resolved" "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz"
+  "version" "0.0.10"
+
+"stylis@^3.5.0":
+  "integrity" "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+  "resolved" "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz"
+  "version" "3.5.4"
+
 "supports-color@^5.3.0", "supports-color@^5.5.0":
  "integrity" "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="
  "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -12175,6 +11881,11 @@
  "resolved" "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
  "version" "0.3.0"

+"tiny-emitter@^2.0.0":
+  "integrity" "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+  "resolved" "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz"
+  "version" "2.1.0"
+
 "tiny-invariant@^1.0.2":
  "integrity" "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
  "resolved" "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz"
@@ -12232,11 +11943,6 @@
    "regex-not" "^1.0.2"
    "safe-regex" "^1.1.0"

-"toggle-selection@^1.0.6":
-  "integrity" "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
-  "resolved" "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz"
-  "version" "1.0.6"
-
 "toidentifier@1.0.0":
  "integrity" "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
  "resolved" "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz"
@@ -12420,11 +12126,6 @@
  "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz"
  "version" "4.2.3"

-"uc.micro@^1.0.1", "uc.micro@^1.0.5":
-  "integrity" "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
-  "resolved" "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz"
-  "version" "1.0.6"
-
 "unbox-primitive@^1.0.0":
  "integrity" "sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA=="
  "resolved" "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz"
@@ -12762,11 +12463,6 @@
  dependencies:
    "browser-process-hrtime" "^1.0.0"

-"w3c-keyname@^2.2.0":
-  "integrity" "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
-  "resolved" "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz"
-  "version" "2.2.4"
-
 "w3c-xmlserializer@^1.1.2":
  "integrity" "sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg=="
  "resolved" "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz"
Author	SHA1	Message	Date
Mario Pesch	5901caa278	add multi interval feature	2021-04-22 15:28:30 +02:00
Mario Pesch	b74aef8167	update blockly to latest release	2021-04-22 15:28:12 +02:00