update tutorial builder

package.json

@@ -33,6 +33,7 @@
     "react-markdown": "^8.0.0",
     "react-markdown-editor-lite": "^1.3.2",
     "react-mde": "^11.5.0",
+    "react-rating-stars-component": "^2.2.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.0",

src/App.css

@@ -43,6 +43,20 @@ blockquote p {
   display: inline;
 }
 
+.tutorial table,
+th,
+td {
+  border: 1px solid #ddd;
+}
+
+.tutorial th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #4eaf47;
+  color: white;
+}
+
 .overlay {
   display: flex;
   flex-direction: column;

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { BrowserRouter as Router } from "react-router-dom";
+import { Router } from "react-router-dom";
 import { createBrowserHistory } from "history";
 
 import { Provider } from "react-redux";

src/actions/tutorialActions.js

@@ -84,6 +84,77 @@ export const getTutorials = () => (dispatch, getState) => {
     });
 };
 
+export const getAllTutorials = () => (dispatch, getState) => {
+  axios
+    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/getAllTutorials`)
+    .then((res) => {
+      var tutorials = res.data.tutorials;
+      existingTutorials(tutorials, getState().tutorial.status).then(
+        (status) => {
+          dispatch({
+            type: TUTORIAL_SUCCESS,
+            payload: status,
+          });
+          dispatch(updateStatus(status));
+          dispatch({
+            type: GET_TUTORIALS,
+            payload: tutorials,
+          });
+          dispatch({ type: TUTORIAL_PROGRESS });
+          dispatch(returnSuccess(res.data.message, res.status));
+        }
+      );
+    })
+    .catch((err) => {
+      if (err.response) {
+        dispatch(
+          returnErrors(
+            err.response.data.message,
+            err.response.status,
+            "GET_TUTORIALS_FAIL"
+          )
+        );
+      }
+      dispatch({ type: TUTORIAL_PROGRESS });
+    });
+};
+
+export const getUserTutorials = () => (dispatch, getState) => {
+  axios
+    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/getUserTutorials`)
+    .then((res) => {
+      var tutorials = res.data.tutorials;
+      existingTutorials(tutorials, getState().tutorial.status).then(
+        (status) => {
+          dispatch({
+            type: TUTORIAL_SUCCESS,
+            payload: status,
+          });
+          dispatch(updateStatus(status));
+          dispatch({
+            type: GET_TUTORIALS,
+            payload: tutorials,
+          });
+          dispatch({ type: TUTORIAL_PROGRESS });
+          dispatch(returnSuccess(res.data.message, res.status));
+        }
+      );
+    })
+    .catch((err) => {
+      console.log(err);
+      if (err.response) {
+        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

src/actions/tutorialBuilderActions.js

@@ -4,6 +4,9 @@ import {
   BUILDER_CHANGE,
   BUILDER_ERROR,
   BUILDER_TITLE,
+  BUILDER_PUBLIC,
+  BUILDER_DIFFICULTY,
+  BUILDER_REVIEW,
   BUILDER_ID,
   BUILDER_ADD_STEP,
   BUILDER_DELETE_STEP,
@@ -35,6 +38,30 @@ export const tutorialTitle = (title) => (dispatch) => {
   dispatch(changeTutorialBuilder());
 };
 
+export const tutorialPublic = (pub) => (dispatch) => {
+  dispatch({
+    type: BUILDER_PUBLIC,
+    payload: pub,
+  });
+  dispatch(changeTutorialBuilder());
+};
+
+export const tutorialDifficulty = (difficulty) => (dispatch) => {
+  dispatch({
+    type: BUILDER_DIFFICULTY,
+    payload: difficulty,
+  });
+  dispatch(changeTutorialBuilder());
+};
+
+export const tutorialReview = (review) => (dispatch) => {
+  dispatch({
+    type: BUILDER_REVIEW,
+    payload: review,
+  });
+  dispatch(changeTutorialBuilder());
+};
+
 export const tutorialSteps = (steps) => (dispatch) => {
   dispatch({
     type: BUILDER_ADD_STEP,
@@ -320,6 +347,7 @@ export const readJSON = (json) => (dispatch, getState) => {
     return object;
   });
   dispatch(tutorialTitle(json.title));
+  dispatch(tutorialDifficulty(json.difficulty));
   dispatch(tutorialSteps(steps));
   dispatch(setSubmitError());
   dispatch(progress(false));

src/actions/types.js

@@ -21,6 +21,7 @@ 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_USERTUTORIALS = "GET_USERTUTORIALS";
 export const GET_STATUS = "GET_STATUS";
 export const TUTORIAL_SUCCESS = "TUTORIAL_SUCCESS";
 export const TUTORIAL_ERROR = "TUTORIAL_ERROR";
@@ -32,6 +33,9 @@ export const JSON_STRING = "JSON_STRING";
 
 export const BUILDER_CHANGE = "BUILDER_CHANGE";
 export const BUILDER_TITLE = "BUILDER_TITLE";
+export const BUILDER_DIFFICULTY = "BUILDER_DIFFICULTY";
+export const BUILDER_PUBLIC = "BUILDER_PUBLIC";
+export const BUILDER_REVIEW = "BUILDER_REVIEW";
 export const BUILDER_ID = "BUILDER_ID";
 export const BUILDER_ADD_STEP = "BUILDER_ADD_STEP";
 export const BUILDER_DELETE_STEP = "BUILDER_DELETE_STEP";

src/components/Alert.js

@@ -1,34 +1,29 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";
 
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
 
 const styles = (theme) => ({
   alert: {
-    marginBottom: '20px',
+    marginBottom: "20px",
     border: `1px solid ${theme.palette.primary.main}`,
-    padding: '10px 20px',
-    borderRadius: '4px',
-    background: fade(theme.palette.primary.main, 0.3),
-    color: 'rgb(70,70,70)'
-  }
+    padding: "10px 20px",
+    borderRadius: "4px",
+    background: alpha(theme.palette.primary.main, 0.3),
+    color: "rgb(70,70,70)",
+  },
 });
 
-
 export class Alert extends Component {
-
-  render(){
-    return(
+  render() {
+    return (
       <div className={this.props.classes.alert}>
-        <Typography>
-          {this.props.children}
-        </Typography>
+        <Typography>{this.props.children}</Typography>
       </div>
     );
   }
 }
 
-
 export default withStyles(styles, { withTheme: true })(Alert);

src/components/Blockly/BlocklyWindow.js

@@ -128,7 +128,7 @@ BlocklyWindow.propTypes = {
   onChangeWorkspace: PropTypes.func.isRequired,
   clearStats: PropTypes.func.isRequired,
   renderer: PropTypes.string.isRequired,
-  sounds: PropTypes.string.isRequired,
+  sounds: PropTypes.bool.isRequired,
   language: PropTypes.string.isRequired,
 };
 

src/components/Blockly/msg/de/ui.js

@@ -228,6 +228,12 @@ export const UI = {
   builder_requirements_head: "Voraussetzungen",
   builder_requirements_order:
     "Beachte, dass die Reihenfolge des Anhakens maßgebend ist.",
+  builder_difficulty: "Schwierigkeitsgrad",
+  builder_public_head: "Tutorial veröffentlichen",
+  builder_public_label: "Tutorial für alle Nutzer:innen veröffentlichen",
+  builder_review_head: "Tutorial veröffentlichen",
+  builder_review_text:
+    "Du kannst dein Tutorial direkt über den Link mit anderen Personen teilen. Wenn du dein Tutorial für alle Nutzer:innen in der Überischt veröffenltichen wollen kannst du es hier aktivieren. Ein Administrator wird dein Tutorial ansehen und anschließend freischalten.",
 
   /**
    * Login

src/components/Blockly/msg/en/ui.js

@@ -222,6 +222,12 @@ export const UI = {
   builder_requirements_head: "Requirements.",
   builder_requirements_order:
     "Note that the order of ticking is authoritative.",
+  builder_difficulty: "Difficulty level",
+  builder_public_head: "Publish tutorial",
+  builder_public_label: "Publish tutorial for all users",
+  builder_review_head: "Publish tutorial",
+  builder_review_text:
+    "You can share your tutorial with other people directly from the link. If you want to publish your tutorial for all users in the overview you can activate it here. An administrator will view your tutorial and then activate it.",
 
   /**
    * Login

src/components/CodeEditor/Compile.js

@@ -190,7 +190,7 @@ class Compile extends Component {
               className={`compileBlocks ${this.props.classes.iconButton}`}
               onClick={() => this.compile()}
             >
-              <FontAwesomeIcon icon={faClipboardCheck} size="m" />
+              <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
             </IconButton>
           </Tooltip>
         ) : (

src/components/CodeEditor/Sidebar.js

@@ -1,37 +1,45 @@
 import React from "react";
 import Blockly from "blockly";
+import { useSelector } from "react-redux";
 import Accordion from "@material-ui/core/Accordion";
 import AccordionSummary from "@material-ui/core/AccordionSummary";
 import AccordionDetails from "@material-ui/core/AccordionDetails";
 import Typography from "@material-ui/core/Typography";
 import { LibraryVersions } from "../../data/versions.js";
-//import { useMonaco } from "@monaco-editor/react";
-//import { Button } from "@material-ui/core";
+import { useMonaco } from "@monaco-editor/react";
+import { Button } from "@material-ui/core";
 import Dialog from "../Dialog";
 import SerialMonitor from "./SerialMonitor.js";
-//import axios from "axios";
+import axios from "axios";
 
 const Sidebar = () => {
   const [alert, setAlert] = React.useState(false);
   //const [examples, setExamples] = React.useState([]);
-
+  const user = useSelector((state) => state.auth.user);
   // useEffect(() => {
   //   axios
   //     .get("https://coelho.opensensemap.org/items/blocklysamples")
   //     .then((res) => {
   //       setExamples(res.data.data);
   //     });
   // }, []);
-
-  //const monaco = useMonaco();
-  // const loadCode = (code) => {
-  //   monaco.editor.getModels()[0].setValue(code);
-  // };
+  const monaco = useMonaco();
+  const loadCode = (code) => {
+    monaco.editor.getModels()[0].setValue(code);
+  };
 
   const toggleDialog = () => {
     setAlert(false);
   };
 
+  const getOsemScript = (id) => {
+    axios
+      .get(`https://api.opensensemap.org/boxes/${id}/script/`)
+      .then((res) => {
+        loadCode(res.data);
+      });
+  };
+
   return (
     <div>
       {"serial" in navigator ? (
@@ -50,7 +58,6 @@ const Sidebar = () => {
           </AccordionDetails>
         </Accordion>
       ) : null}
-
       {/* <Accordion>
         <AccordionSummary
           expandIcon={""}
@@ -67,6 +74,7 @@ const Sidebar = () => {
                   style={{ padding: "1rem", margin: "1rem" }}
                   variant="contained"
                   color="primary"
+                  key={i}
                   onClick={() => loadCode(object.code)}
                 >
                   {object.name}
@@ -76,6 +84,34 @@ const Sidebar = () => {
           </Typography>
         </AccordionDetails>
       </Accordion> */}
+      {user ? (
+        <Accordion>
+          <AccordionSummary
+            expandIcon={""}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+          >
+            <Typography>Deine openSenseMap Codes</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Typography>
+              {user.boxes.map((box, i) => {
+                return (
+                  <Button
+                    style={{ padding: "1rem", margin: "1rem" }}
+                    variant="contained"
+                    color="primary"
+                    key={i}
+                    onClick={() => getOsemScript(box._id)}
+                  >
+                    {box.name}
+                  </Button>
+                );
+              })}
+            </Typography>
+          </AccordionDetails>
+        </Accordion>
+      ) : null}
       <Accordion>
         <AccordionSummary
           expandIcon={""}

src/components/Settings/SoundsSelector.js

@@ -52,7 +52,7 @@ class SoundsSelector extends Component {
 SoundsSelector.propTypes = {
   setSounds: PropTypes.func.isRequired,
   language: PropTypes.string.isRequired,
-  sounds: PropTypes.string.isRequired,
+  sounds: PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = (state) => ({