129 lines
3.9 KiB
Vue
129 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
|
|
// import pkg from '@xterm/xterm';
|
|
// const { Terminal } = pkg;
|
|
|
|
import { Terminal } from '@xterm/xterm';
|
|
// const { Terminal } = pkg;
|
|
|
|
const term = new Terminal({ rows: 15 });
|
|
|
|
const {
|
|
isConnected,
|
|
flashProgress,
|
|
status,
|
|
error,
|
|
connect,
|
|
flash,
|
|
disconnect,
|
|
reset
|
|
} = useEspFlasher(term);
|
|
|
|
const { theme } = useTheme();
|
|
const { getManifest } = useManifest();
|
|
|
|
const eraseFlash = ref(false);
|
|
|
|
const selectedDevice = ref();
|
|
const advancedSettings = ref({
|
|
hasFrontlight: false,
|
|
displayColors: 'black-on-white'
|
|
});
|
|
|
|
const startFlashing = async () => {
|
|
const manifest = await getManifest(
|
|
selectedDevice.value,
|
|
advancedSettings.value.customize,
|
|
advancedSettings.value.hasFrontlight,
|
|
advancedSettings.value.displayColors
|
|
);
|
|
await flash(manifest, eraseFlash.value);
|
|
};
|
|
|
|
const webSerialSupport = ref(false)
|
|
|
|
onMounted(() => {
|
|
|
|
term.open(document.getElementById('xterm-terminal'));
|
|
// const userAgent = navigator.userAgent.toLowerCase()
|
|
// const isChromium = /chrome|chromium|crios|edge/i.test(userAgent)
|
|
webSerialSupport.value = 'serial' in navigator
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container mx-auto p-4">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold mb-2">BTClock Web Flasher</h1>
|
|
<p class="text-gray-600 dark:text-gray-400">Flash your BTClock directly from the browser</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<DeviceSelector @update:device="selectedDevice = $event" class="row-span-2" />
|
|
|
|
<div class="card bg-base-100 shadow-xl ">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Control</h2>
|
|
|
|
<FlashProgress :progress="flashProgress" />
|
|
|
|
<div v-if="error" class="alert alert-error mt-4">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div class="card-actions justify-stretch place-items-center" v-if="webSerialSupport">
|
|
<div class="justify-start grow">{{ status || 'Not connected' }}</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label cursor-pointer">
|
|
<span class="label-text">Erase flash</span>
|
|
|
|
<input type="checkbox" v-model="eraseFlash" class="checkbox" />
|
|
</label>
|
|
</div>
|
|
<button class="btn btn-primary" @click="startFlashing" v-if="isConnected"
|
|
:disabled="!isConnected || (flashProgress != 0 && flashProgress != 100) || selectedDevice === undefined">
|
|
Start Flashing
|
|
</button>
|
|
<button class="btn btn-primary" @click="isConnected ? disconnect() : connect()"
|
|
:class="{ 'btn-success': isConnected }">
|
|
{{ isConnected ? 'Disconnect' : 'Connect' }}
|
|
</button>
|
|
<button v-if="isConnected" class="btn btn-secondary" @click="() => { reset() }">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
<div v-else>
|
|
<div role="alert" class="alert alert-error">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>The flasher is not available because your browser does not support Web Serial.<br>Open this page in Google Chrome, Chromium, Brave or Microsoft Edge instead.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<VersionInformation></VersionInformation>
|
|
|
|
|
|
<AdvancedSettings @update:settings="advancedSettings = $event" />
|
|
|
|
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Console</h2>
|
|
|
|
<div id="xterm-terminal"></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|