pxt-calliope/editor/dialogs.tsx
2021-11-25 17:27:39 +01:00

124 lines
6.6 KiB
TypeScript

import * as React from "react";
export function renderUsbPairDialog(firmwareUrl?: string, failedOnce?: boolean): JSX.Element {
const boardName = pxt.appTarget.appTheme.boardName || "???";
const helpUrl = pxt.appTarget.appTheme.usbDocs;
firmwareUrl = failedOnce && `${helpUrl}/webusb/troubleshoot`; // todo mo
const instructions = <div className="ui grid">
<div className="row">
<div className="column">
<div className="ui two column grid padded">
<div className="column">
<div className="ui">
<div className="image">
<img alt={lf("Comic connecting calliope mini to computer")} className="ui medium rounded image" src="./static/download/connect.png" />
</div>
<div className="content">
<div className="description">
<span className="ui purple circular label">1</span>
<strong>{lf("Connect the {0} to your computer with a USB cable", boardName)}</strong>
<br />
<span className="ui small">{lf("Use the microUSB port on the top of the {0}", boardName)}</span>
</div>
</div>
</div>
</div>
<div className="column">
<div className="ui">
<div className="image">
<img alt={lf("Comic of successful calliope mini connection")} className="ui medium rounded image" src="./static/download/pair.png" />
</div>
<div className="content">
<div className="description">
<span className="ui purple circular label">2</span>
<strong>{lf("Pair your {0}", boardName)}</strong>
<br />
<span className="ui small">{lf("Click 'Pair device' below and select 'Calliope mini' or 'DAPLink CMSIS-DAP' from the list")}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>;
if (!firmwareUrl) return instructions;
return <div className="ui grid stackable">
<div className="column five wide firmware orange">
<div className="ui header inverted">{lf("Update Firmware")}</div>
<strong className="ui small">{lf("You must have version 0249 or above of the firmware")}</strong>
<div className="image">
<img alt={lf("Comic rainbow updating calliope mini firmware")} className="ui image" src="./static/download/firmware.png" />
</div>
<a className="ui button" role="button" href={firmwareUrl} target="_blank">{lf("Check Firmware")}</a>
</div>
<div className="column eleven wide instructions">
{instructions}
</div>
</div>;
}
export function renderBrowserDownloadInstructions(): JSX.Element {
const boardName = pxt.appTarget.appTheme.boardName || lf("device");
const boardDriveName = pxt.appTarget.appTheme.driveDisplayName || pxt.appTarget.compile.driveName || "???";
return <div className="ui grid stackable upload">
<div className="column sixteen wide instructions">
<div className="ui grid">
<div className="row">
<div className="column">
<div className="ui two column grid padded">
<div className="column">
<div className="ui">
<div className="image">
<img alt={lf("Comic connecting calliope mini to computer")} className="ui medium rounded image" src="./static/download/connect.png" />
</div>
<div className="content">
<div className="description">
<span className="ui purple circular label">1</span>
<strong>{lf("Connect the {0} to your computer with a USB cable", boardName)}</strong>
<br />
<span className="ui small">{lf("Use the microUSB port on the top of the {0}", boardName)}</span>
</div>
</div>
</div>
</div>
<div className="column">
<div className="ui">
<div className="image">
<img alt={lf("Comic moving hex file to calliope mini")} className="ui medium rounded image" src="./static/download/transfer.png" />
</div>
<div className="content">
<div className="description">
<span className="ui purple circular label">2</span>
<strong>{lf("Move the .hex file to the {0}", boardName)}</strong>
<br />
<span className="ui small">{lf("Locate the downloaded .hex file and drag it to the {0} drive", boardDriveName)}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>;
}
export function cantImportAsync(project: pxt.editor.IProjectView) {
// this feature is support in v0 only
return project.showModalDialogAsync({
header: lf("Can't import microbit.co.uk scripts..."),
body: lf("Importing microbit.co.uk programs is not supported in this editor anymore. Please open this script in the https://makecode.microbit.org/v0 editor."),
buttons: [
{
label: lf("Go to the old editor"),
url: `https://makecode.microbit.org/v0`
}
]
}).then(() => project.openHome())
}