schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #23 from sensebox/add-procedures

Browse Source 
[WIP] - Add procedures
This commit is contained in:
Mario Pesch 2020-11-11 14:10:41 +01:00 committed by GitHub
commit bbc3022644
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 1428 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Blockly/blocks/lists.js
View File

@ -1,5 +1,4 @@
import Blockly, { FieldDropdown } from 'blockly/core';
import { selectedBoard } from '../helpers/board'
import Blockly, { FieldDropdown } from 'blockly/core'
import * as Types from '../helpers/types'
import { getColour } from '../helpers/colour';

1181
src/components/Blockly/blocks/procedures.js
View File

File diff suppressed because it is too large Load Diff

2
src/components/Blockly/blocks/sensebox-display.js
View File

@ -50,8 +50,6 @@ Blockly.Blocks['sensebox_display_printDisplay'] = {
.setCheck(null);
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
let variableName = this.getField('COLOR');
console.log(variableName.getValue());
this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tip);
this.setHelpUrl('https://sensebox.de/books');
},

3
src/components/Blockly/blocks/sensebox-osem.js
View File

@ -103,13 +103,10 @@ Blockly.Blocks['sensebox_send_to_osem'] = {
for (var i = 0; i < apiData.sensors.length; i++) {
options.push([apiData.sensors[i].title, apiData.sensors[i]._id]);
}
console.log(options);
}
if (options.length > 1) {
var dropdown = options.slice(1)
console.log(dropdown);
return dropdown;
} else
return options;

12
src/components/Blockly/blocks/sensebox-sensors.js
View File

@ -309,7 +309,7 @@ Blockly.Blocks['sensebox_button'] = {
Blockly.Blocks['sensebox_scd30'] = {
init: function () {
var dropdownOptions = [[Blockly.Msg.senseBox_temp, "temperature"], [Blockly.Msg.senseBox_hum, "humidity"], [Blockly.Msg.senseBox_bme_co2, "CO2"]];
var dropdownOptions = [[Blockly.Msg.senseBox_scd_co2, "CO2"], [Blockly.Msg.senseBox_temp, "temperature"], [Blockly.Msg.senseBox_hum, "humidity"]];
this.appendDummyInput()
.appendField(Blockly.Msg.senseBox_scd30);
this.appendDummyInput()
@ -318,7 +318,15 @@ Blockly.Blocks['sensebox_scd30'] = {
.appendField(new Blockly.FieldDropdown(dropdownOptions), "dropdown")
this.setOutput(true, Types.NUMBER.typeName);
this.setColour(getColour().sensebox);
this.setTooltip(Blockly.Msg.senseBox_bme_tip);
this.setTooltip(Blockly.Msg.senseBox_scd_tip);
},
onchange: function (e) {
var dropdown = this.getFieldValue('dropdown');
if (dropdown === 'temperature' || dropdown === 'humidity') {
this.setOutput(true, Types.DECIMAL.typeName);
} else if (dropdown === 'CO2') {
this.setOutput(true, Types.NUMBER.typeName);
}
}
};

2
src/components/Blockly/generator/generator.js
View File

@ -44,7 +44,7 @@ Blockly['Arduino'].addReservedWords(
'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,bookean,char,' +
'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,' +

98
src/components/Blockly/generator/procedures.js
View File

@ -28,3 +28,101 @@ Blockly.Arduino['arduino_functions'] = function (block) {
//var loopcode = Blockly.Arduino.scrub_(block, loopBranch); No comment block
return loopBranch;
};
Blockly.Arduino['procedures_defreturn'] = function (block) {
// Define a procedure with a return value.
const funcName = Blockly.Arduino.variableDB_.getName(
block.getFieldValue('NAME'),
Blockly.Procedures.NAME_TYPE
);
const branch = Blockly.Arduino.statementToCode(block, 'STACK');
const returnType = block.getFieldValue('RETURN TYPE') || 'void';
let returnValue =
Blockly.Arduino.valueToCode(block, 'RETURN', Blockly.Arduino.ORDER_NONE) ||
'';
if (returnValue) {
returnValue = Blockly.Arduino.INDENT + 'return ' + returnValue + ';\n';
}
const args = [];
for (let i = 0; i < block.argumentVarModels_.length; i++) {
args[i] =
translateType(block.argumentVarModels_[i].type) +
' ' +
block.argumentVarModels_[i].name;
}
let code =
translateType(returnType) +
' ' +
funcName +
'(' +
args.join(', ') +
') {\n' +
branch +
returnValue +
'}';
code = Blockly.Arduino.scrub_(block, code);
// Add % so as not to collide with helper functions in definitions list.
Blockly.Arduino.functionNames_['%' + funcName] = code;
return null;
};
function translateType(type) {
console.log(type);
switch (type) {
case 'int':
return 'int';
case 'String':
return 'String';
case 'void':
return 'void';
case 'boolean':
return 'boolean';
case 'float':
return 'float'
default:
throw new Error('Invalid Parameter Type');
}
}
Blockly.Arduino['procedures_defnoreturn'] =
Blockly.Arduino['procedures_defreturn'];
Blockly.Arduino['procedures_callreturn'] = function (block) {
// Call a procedure with a return value.
const funcName = Blockly.Arduino.variableDB_.getName(
block.getFieldValue('NAME'),
Blockly.Procedures.NAME_TYPE
);
const args = [];
for (let i = 0; i < block.arguments_.length; i++) {
args[i] =
Blockly.Arduino.valueToCode(
block,
'ARG' + i,
Blockly.Arduino.ORDER_COMMA
) || 'null';
}
const code = funcName + '(' + args.join(', ') + ')';
return [code, Blockly.Arduino.ORDER_ATOMIC];
};
Blockly.Arduino['procedures_callnoreturn'] = function (block) {
// Call a procedure with no return value.
const funcName = Blockly.Arduino.variableDB_.getName(
block.getFieldValue('NAME'),
Blockly.Procedures.NAME_TYPE
);
const args = [];
for (let i = 0; i < block.arguments_.length; i++) {
args[i] =
Blockly.Arduino.valueToCode(
block,
'ARG' + i,
Blockly.Arduino.ORDER_COMMA
) || 'null';
}
return funcName + '(' + args.join(', ') + ');\n';
};

16
src/components/Blockly/generator/sensebox-sensors.js
View File

@ -263,32 +263,22 @@ Blockly.Arduino.sensebox_scd30 = function () {
Blockly.Arduino.libraries_['scd30_library'] = '#include "SparkFun_SCD30_Arduino_Library.h"'
Blockly.Arduino.libraries_['library_senseBoxMCU'] = '#include "SenseBoxMCU.h"';
Blockly.Arduino.definitions_['SCD30'] = 'SCD30 airSensor;';
Blockly.Arduino.variables_['scd30_temp'] = 'float scd30_temp;';
Blockly.Arduino.variables_['scd30_humi'] = 'float scd30_humi;';
Blockly.Arduino.variables_['scd30_co2'] = 'float scd30_co2;';
Blockly.Arduino.setupCode_['init_scd30'] = ` Wire.begin();
if (airSensor.begin() == false)
{
Serial.println("Air sensor not detected. Please check wiring. Freezing...");
while (1)
;
}`;
Blockly.Arduino.loopCodeOnce_['scd30_getData'] = `if (airSensor.dataAvailable())
{
scd30_co2 = airSensor.getCO2();
scd30_temp = airSensor.getTemperature();
scd30_humi = airSensor.getHumidity();
}`
var code = '';
switch (dropdown) {
case 'temperature':
code = 'scd30_temp';
code = 'aireSensor.getTemperature()';
break;
case 'humidity':
code = 'scd30_humi';
code = 'airSensor.getHumiditiy()';
break;
case 'CO2':
code = 'scd30_co2';
code = 'aireSensor.getCO2()';
break;
default:
code = ''

5
src/components/Blockly/helpers/types.js
View File

@ -89,13 +89,14 @@ export const CHILD_BLOCK_MISSING = {
const compatibleTypes = {
Array: ['Array'],
boolean: ['boolean'],
int: ['int'],
int: ['int', 'long', 'double', 'float'],
char: ['char'],
String: ['String'],
void: ['void'],
long: ['int', 'long'],
double: ['int', 'long', 'double'],
float: ['int', 'long', 'double', 'float']
float: ['int', 'long', 'double', 'float'],
null: ['null']
}

7
src/components/Blockly/msg/de.js
View File

@ -272,6 +272,11 @@ Blockly.Msg.PROCEDURES_CALLNORETURN_HELPURL = "https://de.wikipedia.org/wiki/Pro
Blockly.Msg.PROCEDURES_CALLNORETURN_TOOLTIP = "Rufe einen Funktionsblock ohne Rückgabewert auf.";
Blockly.Msg.PROCEDURES_CALLRETURN_HELPURL = "https://de.wikipedia.org/wiki/Prozedur_%28Programmierung%29";
Blockly.Msg.PROCEDURES_CALLRETURN_TOOLTIP = "Rufe einen Funktionsblock mit Rückgabewert auf.";
Blockly.Msg.PROCEDURES_CALL = "Rufe";
Blockly.Msg.PROCEDURES_CALL_END = "auf";
Blockly.Msg.PROCEDURES_DEFNORETURN = "Erstelle Funktion";
Blockly.Msg.PROCEDURES_BEFORE_PARAMS = "mit Eingabeparameter:";
Blockly.Msg.PROCEDURES_DEFRETURN_RETURN_TYPE = "Rückgabetype";
Blockly.Msg.PROCEDURES_CALL_BEFORE_PARAMS = "mit:";
Blockly.Msg.PROCEDURES_CREATE_DO = "Erzeuge \"Aufruf %1\"";
Blockly.Msg.PROCEDURES_DEFNORETURN_COMMENT = "Beschreibe diese Funktion …";
@ -774,6 +779,8 @@ Blockly.Msg.senseBox_telegram_message = "Nachricht"
Blockly.Msg.senseBox_telegram_send = "Sende Nachricht"
//SCD30 CO2 Sensor
Blockly.Msg.senseBox_scd30 = "CO2 Sensor (Sensirion SCD30)";
Blockly.Msg.senseBox_scd_tip = "Gibt den Wert des CO2 Sensors";
Blockly.Msg.senseBox_scd_co2 = "CO2 in ppm";
//WS2818 RGB LED
Blockly.Msg.senseBox_ws2818_rgb_led = "senseBox WS2812 - RGB LED";
Blockly.Msg.senseBox_ws2818_rgb_led_position = "Position";

11
src/components/Blockly/msg/en.js
View File

@ -267,20 +267,24 @@ Blockly.Msg.NEW_VARIABLE = "New variable...";
Blockly.Msg.NEW_VARIABLE_TITLE = "New variable name:";
Blockly.Msg.ORDINAL_NUMBER_SUFFIX = "";
Blockly.Msg.PROCEDURES_ALLOW_STATEMENTS = "allow statements";
Blockly.Msg.PROCEDURES_BEFORE_PARAMS = "with:";
Blockly.Msg.PROCEDURES_BEFORE_PARAMS = "with inputs:";
Blockly.Msg.PROCEDURES_CALLNORETURN_HELPURL = "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29";
Blockly.Msg.PROCEDURES_CALLNORETURN_TOOLTIP = "Run the user-defined function '%1'.";
Blockly.Msg.PROCEDURES_CALLRETURN_HELPURL = "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29";
Blockly.Msg.PROCEDURES_CALLRETURN_TOOLTIP = "Run the user-defined function '%1' and use its output.";
Blockly.Msg.PROCEDURES_CALL_BEFORE_PARAMS = "with:";
Blockly.Msg.PROCEDURES_CALL_BEFORE_PARAMS = "with Inputs:";
Blockly.Msg.PROCEDURES_CALL = "Call";
Blockly.Msg.PROCEDURES_CALL_END = '';
Blockly.Msg.PROCEDURES_CREATE_DO = "Create '%1'";
Blockly.Msg.PROCEDURES_DEFNORETURN_COMMENT = "Describe this function...";
Blockly.Msg.PROCEDURES_DEFNORETURN = "Create Function";
Blockly.Msg.PROCEDURES_DEFNORETURN_DO = "";
Blockly.Msg.PROCEDURES_DEFNORETURN_HELPURL = "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29";
Blockly.Msg.PROCEDURES_DEFNORETURN_PROCEDURE = "do something";
Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE = "to";
Blockly.Msg.PROCEDURES_DEFNORETURN_TOOLTIP = "Creates a function with no output.";
Blockly.Msg.PROCEDURES_DEFRETURN_HELPURL = "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29";
Blockly.Msg.PROCEDURES_DEFRETURN_RETURN_TYPE = "return Type";
Blockly.Msg.PROCEDURES_DEFRETURN_RETURN = "return";
Blockly.Msg.PROCEDURES_DEFRETURN_TOOLTIP = "Creates a function with an output.";
Blockly.Msg.PROCEDURES_DEF_DUPLICATE_WARNING = "Warning: This function has duplicate parameters.";
@ -757,6 +761,9 @@ Blockly.Msg.sensebox_soil_smt50 = "Soil Moisture and Temperature (SMT50)";
Blockly.Msg.sensebox_web_readHTML_filename = "File:";
//SCD30 CO2 Sensor
Blockly.Msg.senseBox_scd30 = "CO2 Sensor (Sensirion SCD30)";
Blockly.Msg.senseBox_scd_co2 = "CO2 in ppm";
Blockly.Msg.senseBox_scd_tip = "Returns value of the CO2 Sensor";
//WS2818 RGB LED
Blockly.Msg.senseBox_ws2818_rgb_led = "senseBox WS2812 - RGB LED";

1
src/components/Blockly/toolbox/Toolbox.js
View File

@ -414,6 +414,7 @@ class Toolbox extends React.Component {
<Block type="array_getIndex" />
<Block type="lists_length" />
</Category>
<Category name="Functions" colour={getColour().procedures} custom="PROCEDURE"></Category>
<sep></sep>
<Category name="Eingang/Ausgang" colour={getColour().io}>
<Block type="io_digitalwrite"></Block>

1
src/components/Gallery/GalleryHome.js
View File

@ -58,7 +58,6 @@ class GalleryHome extends Component {
}
componentDidMount() {
console.log(process.env.REACT_APP_BLOCKLY_API)
fetch(process.env.REACT_APP_BLOCKLY_API + this.props.location.pathname)
.then(res => res.json())
.then((data) => {

19
src/components/Home.js
View File

@ -49,7 +49,8 @@ class Home extends Component {
codeOn: false,
gallery: [],
share: [],
projectToLoad: undefined
projectToLoad: undefined,
stats: window.localStorage.getItem('stats'),
}
componentDidMount() {
@ -88,19 +89,15 @@ class Home extends Component {
}
render() {
// console.log(this.props.match.params.galleryId);
// console.log(gallery);
// console.log(gallery.filter(project => project.id == this.props.match.params.galleryId));
if (this.state.projectToLoad) {
console.log(this.state.projectToLoad.xml)
}
console.log(this.props);
return (
<div>
{this.state.stats ?
<div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
: null
}
<div style={{ float: 'right', height: '40px', marginBottom: '20px' }}><WorkspaceFunc /></div>
<div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
<Grid container spacing={2}>
<Grid item xs={12} md={this.state.codeOn ? 6 : 12} style={{ position: 'relative' }}>
<Grid item xs={12} md={this.state.codeOn ? 8 : 12} style={{ position: 'relative' }}>
<Tooltip title={this.state.codeOn ? 'Code ausblenden' : 'Code anzeigen'} >
<IconButton
className={this.state.codeOn ? this.props.classes.codeOn : this.props.classes.codeOff}
@ -117,7 +114,7 @@ class Home extends Component {
</Grid>
{this.state.codeOn ?
<Grid item xs={12} md={6}>
<Grid item xs={12} md={4}>
<CodeViewer />
</Grid>
: null}

2
src/components/Settings/RenderSelector.js
View File

@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function LanguageSelector() {
export default function RenderSelector() {
const classes = useStyles();
const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));

2
src/components/Settings/Settings.js
View File

@ -5,6 +5,7 @@ import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import LanguageSelector from './LanguageSelector';
import RenderSelector from './RenderSelector';
import StatsSelector from './StatsSelector';
class Settings extends Component {
@ -14,6 +15,7 @@ class Settings extends Component {
<Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
<LanguageSelector />
<RenderSelector />
<StatsSelector />
<Button
style={{ marginTop: '20px' }}
variant="contained"

44
src/components/Settings/StatsSelector.js Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
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 useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 400,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
export default function StatsSelector() {
const classes = useStyles();
const [stats, setStats] = React.useState(window.localStorage.getItem('stats'));
const handleChange = (event) => {
setStats(event.target.value);
window.localStorage.setItem('stats', event.target.value);
};
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Renderer</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={stats}
onChange={handleChange}
>
<MenuItem value={true}>On</MenuItem>
<MenuItem value={false}>Off</MenuItem>
</Select>
</FormControl>
<p>Schaltet die Statistiken Oberhalb der Arbeitsfläche ein bzw. aus</p>
</div>
);
}

2
src/components/Tutorial/Builder/Builder.js
View File

@ -51,7 +51,6 @@ class Builder extends Component {
}
submit = () => {
console.log(this.props.id)
if (this.props.id === null) {
var randomID = Date.now();
} else {
@ -115,7 +114,6 @@ class Builder extends Component {
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' });
} catch (err) {
console.log(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.` });

9
src/components/Tutorial/HintTutorialExists.js
View File

@ -27,10 +27,9 @@ const styles = (theme) => ({
class HintTutorialExists extends Component {
constructor(props){
constructor(props) {
var previousPageWasAnotherDomain = props.pageVisits === 0;
var userDoNotWantToSeeNews = window.localStorage.getItem('news') ? true : false;
console.log(userDoNotWantToSeeNews);
super(props);
this.state = {
open: userDoNotWantToSeeNews ? !userDoNotWantToSeeNews : previousPageWasAnotherDomain
@ -42,7 +41,7 @@ class HintTutorialExists extends Component {
}
onChange = (e) => {
if(e.target.checked){
if (e.target.checked) {
window.localStorage.setItem('news', e.target.checked);
}
else {
@ -66,8 +65,8 @@ class HintTutorialExists extends Component {
<div>
Es gibt ab jetzt Tutorials zu verschiedenen Themen. Schau mal <Link to="/tutorial" className={this.props.classes.link}>hier</Link> vorbei.
<FormControlLabel
style={{marginTop: '20px'}}
classes={{label: this.props.classes.label}}
style={{ marginTop: '20px' }}
classes={{ label: this.props.classes.label }}
control={
<Checkbox
size={'small'}

112
src/components/WorkspaceStats.js
View File

@ -37,7 +37,7 @@ const styles = (theme) => ({
class WorkspaceStats extends Component {
state={
state = {
anchor: null
}
@ -53,69 +53,69 @@ class WorkspaceStats extends Component {
const bigDisplay = !isWidthDown('sm', this.props.width);
const workspace = Blockly.getMainWorkspace();
const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
const stats = <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>
<Tooltip title="Anzahl aktueller Blöcke" arrow>
<Chip
style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
label={workspace ? workspace.getAllBlocks().length : 0}>
</Chip>
</Tooltip>
<Tooltip title="Anzahl neuer Blöcke" arrow>
<Chip
style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>}
label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
</Chip>
</Tooltip>
<Tooltip title="Anzahl veränderter Blöcke" arrow>
<Chip
style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
label={this.props.change}>
</Chip>
</Tooltip>
<Tooltip title="Anzahl bewegter Blöcke" arrow>
<Chip
style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>}
label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
</Chip>
</Tooltip>
<Tooltip title="Anzahl gelöschter Blöcke" arrow>
<Chip
style={remainingBlocksInfinity ? bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'} : {}}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>}
label={this.props.delete}>
</Chip>
</Tooltip>
{remainingBlocksInfinity ?
<Tooltip title="Verbleibende Blöcke" arrow>
<Chip
style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary"
label={workspace.remainingCapacity()}>
</Chip>
</Tooltip> : null}
</div>
const stats = <div style={bigDisplay ? { display: 'flex' } : { display: 'inline' }}>
<Tooltip title="Anzahl aktueller Blöcke" arrow>
<Chip
style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
label={workspace ? workspace.getAllBlocks().length : 0}>
</Chip>
</Tooltip>
<Tooltip title="Anzahl neuer Blöcke" arrow>
<Chip
style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>}
label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
</Chip>
</Tooltip>
<Tooltip title="Anzahl veränderter Blöcke" arrow>
<Chip
style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
label={this.props.change}>
</Chip>
</Tooltip>
<Tooltip title="Anzahl bewegter Blöcke" arrow>
<Chip
style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>}
label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
</Chip>
</Tooltip>
<Tooltip title="Anzahl gelöschter Blöcke" arrow>
<Chip
style={remainingBlocksInfinity ? bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' } : {}}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>}
label={this.props.delete}>
</Chip>
</Tooltip>
{remainingBlocksInfinity ?
<Tooltip title="Verbleibende Blöcke" arrow>
<Chip
style={bigDisplay ? { marginRight: '1rem' } : { marginRight: '1rem', marginBottom: '5px' }}
color="primary"
label={workspace.remainingCapacity()}>
</Chip>
</Tooltip> : null}
</div>
return (
bigDisplay ?
<div style={{bottom: 0, position: 'absolute'}}>
<div style={{ bottom: 0, position: 'absolute' }}>
{stats}
</div>
:
:
<div>
<Tooltip title='Statistiken anzeigen' arrow>
<IconButton
className={this.props.classes.menu}
onClick={(event) => this.handleClick(event)}
>
<FontAwesomeIcon icon={faEllipsisH} size="xs"/>
<FontAwesomeIcon icon={faEllipsisH} size="xs" />
</IconButton>
</Tooltip>
<Popover
@ -131,10 +131,10 @@ class WorkspaceStats extends Component {
horizontal: 'center',
}}
PaperProps={{
style: {margin: '5px'}
style: { margin: '5px' }
}}
>
<div style={{margin: '10px'}}>
<div style={{ margin: '10px' }}>
{stats}
</div>
</Popover>