Skip to content

Commit

Permalink
bb3 overview page and stop script
Browse files Browse the repository at this point in the history
  • Loading branch information
mvladic committed May 20, 2020
1 parent f0abb8b commit 0618e30
Show file tree
Hide file tree
Showing 29 changed files with 1,370 additions and 242 deletions.
2 changes: 1 addition & 1 deletion packages/eez-studio-shared/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const types = {
toDB: (value: any) => value
},
object: {
fromDB: (value: any) => JSON.parse(value),
fromDB: (value: any) => (value ? JSON.parse(value) : undefined),
toDB: (value: any) => JSON.stringify(toJS(value))
},
date: {
Expand Down
7 changes: 6 additions & 1 deletion packages/eez-studio-ui/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,17 @@ import classnames from "classnames";
export class Toolbar extends React.Component<
{
className?: string;
style?: React.CSSProperties;
},
{}
> {
render() {
let className = classnames("EezStudio_Toolbar", this.props.className);

return <div className={className}>{this.props.children}</div>;
return (
<div className={className} style={this.props.style}>
{this.props.children}
</div>
);
}
}
66 changes: 66 additions & 0 deletions packages/instrument/bb3/components/FirmwareVersionSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from "react";
import { observer } from "mobx-react";

import { compareVersions } from "eez-studio-shared/util";
import { FIRMWARE_RELEASES_PAGE, FIRMWARE_UPGRADE_PAGE } from "instrument/bb3/conf";
import { openLink } from "instrument/bb3/helpers";
import { InstrumentOverview } from "instrument/bb3/objects/InstrumentOverview";

export const ReleaseInfo = observer(
({ instrumentOverview }: { instrumentOverview: InstrumentOverview }) => {
if (!instrumentOverview.mcu.firmwareVersion) {
return null;
}

if (!instrumentOverview.latestFirmwareVersion) {
return (
<div className="alert alert-danger" role="alert">
Could not get info about the latest firmware version!
</div>
);
}

if (
compareVersions(
instrumentOverview.latestFirmwareVersion,
instrumentOverview.mcu.firmwareVersion
) > 1
) {
return (
<div className="alert alert-primary" role="alert">
There is{" "}
<a href="#" onClick={() => openLink(FIRMWARE_RELEASES_PAGE)}>
a newer firmware version!
</a>
. Follow{" "}
<a href="#" onClick={() => openLink(FIRMWARE_UPGRADE_PAGE)}>
this instructions
</a>{" "}
how to install it.
</div>
);
}

return (
<div className="alert alert-secondary" role="alert">
This is the latest firmware version!
</div>
);
}
);

export const FirmwareVersionSection = observer(
({ instrumentOverview }: { instrumentOverview: InstrumentOverview }) => {
return (
<section>
<header>
<h5>Firmware version</h5>
</header>
<div className="p-4">
<h5>{instrumentOverview.mcu.firmwareVersion}</h5>
<ReleaseInfo instrumentOverview={instrumentOverview} />
</div>
</section>
);
}
);
36 changes: 36 additions & 0 deletions packages/instrument/bb3/components/ModulesSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from "react";
import { observer } from "mobx-react";

import { InstrumentOverview } from "instrument/bb3/objects/InstrumentOverview";

export const ModulesSection = observer(
({ instrumentOverview }: { instrumentOverview: InstrumentOverview }) => {
return (
<section>
<header>
<h5>Modules</h5>
</header>
<div>
<table className="table">
<thead>
<tr>
<th>Slot #</th>
<th>Model</th>
<th>Version</th>
</tr>
</thead>
<tbody>
{instrumentOverview.slots.map((slot, i) => (
<tr key={i}>
<td>{i + 1}</td>
<td>{slot ? slot.model : "None"}</td>
<td>{slot ? slot.version : "-"}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
);
}
);
66 changes: 66 additions & 0 deletions packages/instrument/bb3/components/Overview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from "react";
import { observer } from "mobx-react";

import { styled } from "eez-studio-ui/styled-components";
import { Loader } from "eez-studio-ui/loader";

import { InstrumentAppStore } from "instrument/window/app-store";
import { InstrumentOverview } from "instrument/bb3/objects/InstrumentOverview";

import { FirmwareVersionSection } from "instrument/bb3/components/FirmwareVersionSection";
import { ScriptsSection } from "instrument/bb3/components/scripts-section/ScriptsSection";
import { ModulesSection } from "instrument/bb3/components/ModulesSection";
import { ShortcutsSection } from "instrument/bb3/components/ShortcutsSection";

const OverviewContainer = styled.div`
margin: 20px;
display: grid;
grid-gap: 20px;
grid-template-columns: calc(50% - 10px) calc(50% - 10px);
align-items: start;
& > section {
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
& > header {
padding: 5px;
padding-left: 10px;
background-color: ${props => props.theme.panelHeaderColor};
h5 {
text-transform: uppercase;
margin-bottom: 0;
}
}
& > div {
}
}
.table {
margin-bottom: 0;
}
`;

export const Overview = observer(
({
appStore,
instrumentOverview
}: {
appStore: InstrumentAppStore;
instrumentOverview: InstrumentOverview;
}) => {
if (instrumentOverview.refreshInProgress) {
return <Loader />;
}

return (
<OverviewContainer>
<FirmwareVersionSection instrumentOverview={instrumentOverview} />
<ModulesSection instrumentOverview={instrumentOverview} />
<ScriptsSection instrumentOverview={instrumentOverview} />
<ShortcutsSection appStore={appStore} />
</OverviewContainer>
);
}
);
29 changes: 29 additions & 0 deletions packages/instrument/bb3/components/ShortcutsSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from "react";
import { observer } from "mobx-react";

import { ShortcutsToolbar } from "instrument/window/terminal/toolbar";
import { executeShortcut } from "instrument/window/script";

import { InstrumentAppStore } from "instrument/window/app-store";

export const ShortcutsSection = observer(({ appStore }: { appStore: InstrumentAppStore }) => {
return (
<section>
<header>
<h5>Shortcuts</h5>
</header>
<div>
<ShortcutsToolbar
appStore={appStore}
executeShortcut={shortcut => {
executeShortcut(appStore, shortcut);
}}
style={{
border: 0,
backgroundColor: "white"
}}
/>
</div>
</section>
);
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from "react";
import { observer } from "mobx-react";

import { Loader } from "eez-studio-ui/loader";

import { getConnection } from "instrument/window/connection";

import { Script } from "instrument/bb3/objects/script";

export const ScriptActions = observer(({ script }: { script: Script }) => {
if (!getConnection(script.instrumentOverview.appStore).isConnected) {
return null;
}

if (script.busy) {
return <Loader size={25} style={{ margin: "6px 12px" }} />;
}

return (
<div>
{script.canInstall && (
<button
className="btn btn-sm btn-success"
onClick={script.install}
disabled={script.instrumentOverview.installAllScriptsInProgress}
>
Install
</button>
)}
{script.canUninstall && (
<button
className="btn btn-sm btn-danger"
onClick={script.uninstall}
disabled={script.instrumentOverview.installAllScriptsInProgress}
>
Uninstall
</button>
)}
{script.canUpdate && (
<button
className="btn btn-sm btn-success"
onClick={script.update}
disabled={script.instrumentOverview.installAllScriptsInProgress}
>
Update
</button>
)}
{script.canReplace && (
<button
className="btn btn-sm btn-success"
onClick={script.replace}
disabled={script.instrumentOverview.installAllScriptsInProgress}
>
Replace
</button>
)}
</div>
);
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from "react";
import { observer } from "mobx-react";

import { styled } from "eez-studio-ui/styled-components";

import { InstrumentOverview } from "instrument/bb3/objects/InstrumentOverview";

import { ScriptsSectionSelectView } from "instrument/bb3/components/scripts-section/ScriptsSectionSelectView";
import { ScriptsSectionGlobalActions } from "instrument/bb3/components/scripts-section/ScriptsSectionGlobalActions";
import { ScriptsSectionList } from "instrument/bb3/components/scripts-section/ScriptsSectionList";

const HeaderContainer = styled.div`
display: flex;
justify-content: flex-start;
align-items: center;
div:nth-child(2) {
flex-grow: 1;
margin-left: 50px;
}
`;

export const ScriptsSection = observer(
({ instrumentOverview }: { instrumentOverview: InstrumentOverview }) => {
return (
<section>
<header>
<HeaderContainer>
<h5>MicroPython Scripts</h5>
<ScriptsSectionSelectView instrumentOverview={instrumentOverview} />
<ScriptsSectionGlobalActions instrumentOverview={instrumentOverview} />
</HeaderContainer>
</header>
<div>
<ScriptsSectionList scripts={instrumentOverview.selectedScriptsCollection} />
</div>
</section>
);
}
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from "react";
import { observer } from "mobx-react";

import { getConnection } from "instrument/window/connection";

import { InstrumentOverview } from "instrument/bb3/objects/InstrumentOverview";

export const ScriptsSectionGlobalActions = observer(
({ instrumentOverview }: { instrumentOverview: InstrumentOverview }) => {
if (!getConnection(instrumentOverview.appStore).isConnected) {
return null;
}

if (!instrumentOverview.canInstallAllScripts) {
return null;
}

return (
<button
className="btn btn-sm btn-success"
onClick={instrumentOverview.installAllScripts}
>
Install All
</button>
);
}
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from "react";
import { observer } from "mobx-react";

import { styled } from "eez-studio-ui/styled-components";

import { Script } from "instrument/bb3/objects/script";

import { ScriptsSectionListItem } from "instrument/bb3/components/scripts-section/ScriptsSectionListItem";

const Container = styled.div`
display: flex;
flex-direction: column;
& > div {
padding: 10px;
border-top: 1px solid ${props => props.theme.borderColor};
}
& > div:first-child {
border-top: 0;
}
`;

export const ScriptsSectionList = observer(({ scripts }: { scripts: Script[] }) => {
if (scripts.length == 0) {
return null;
}

return (
<Container>
{scripts.map(script => (
<ScriptsSectionListItem key={script.name} script={script} />
))}
</Container>
);
});
Loading

0 comments on commit 0618e30

Please sign in to comment.