fix: correctly show compatibility

This commit is contained in:
2024-09-29 22:34:12 +02:00
parent 68faf57a22
commit 1f4604bcbc

View File

@@ -101,18 +101,23 @@
<section> <section>
<h3>OTA Upate</h3> <h3>OTA Upate</h3>
{#if data.ota} {#if data.ota}
{@const buttonError = error || (!success && isCorrectDevice === false)}
<button <button
class:working class:working
class:primary={!error} class:primary={!buttonError}
class:error={error || (!success && isCorrectDevice === false)} class:error={buttonError}
disabled={working || $serialPort === undefined || !isCorrectDevice} disabled={working || $serialPort === undefined || !isCorrectDevice}
onclick={update}>Apply Update</button onclick={update}>Apply Update</button
> >
{#if $serialPort} {#if $serialPort && isCorrectDevice}
<div transition:slide> <div transition:slide>
Your device is ready and compatible. Click the button to perform the Your device is ready and compatible. Click the button to perform the
update. update.
</div> </div>
{:else if $serialPort && isCorrectDevice === false}
<div class="error" transition:slide>
Your device is incompatible with the selected update.
</div>
{:else if success} {:else if success}
<div class="primary" transition:slide>Update successful</div> <div class="primary" transition:slide>Update successful</div>
{:else if error} {:else if error}
@@ -155,14 +160,14 @@
transition: color 200ms ease; transition: color 200ms ease;
} }
.error {
color: var(--md-sys-color-error);
}
.primary { .primary {
color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
} }
.error {
color: var(--md-sys-color-error);
}
@keyframes rotate { @keyframes rotate {
0% { 0% {
transform: rotate(120deg); transform: rotate(120deg);