web-flasher-ng/components/DeviceSelector.vue

<script setup lang="ts">
const selectedDevice = ref();

const emit = defineEmits<{
  (e: 'update:device', value: string): void;
}>();

watch(selectedDevice, (newValue) => {
  emit('update:device', newValue);
});
</script>

<template>
  <div class="card bg-base-100 shadow-xl">
    <div class="card-body">
      <div class="">

        <h2 class="card-title">Device Selection</h2>
        <div class="form-control">
          <label class="label cursor-pointer">
            <span class="label-text">Rev. A (2.13 inch)</span>
            <input type="radio" name="device-type" class="radio" value="lolin_s3_mini-213epd"
              v-model="selectedDevice" />
          </label>
        </div>
        <div class="form-control">
          <label class="label cursor-pointer">
            <span class="label-text">Rev. A (2.9 inch) <small>unsupported</small></span>
            <input type="radio" name="device-type" class="radio" value="lolin_s3_mini-29epd" v-model="selectedDevice" />
          </label>
        </div>
        <div class="form-control">
          <label class="label cursor-pointer">
            <span class="label-text">Rev. B (2.13 inch)</span>
            <input type="radio" name="device-type" class="radio" value="btclock_rev_b-213epd"
              v-model="selectedDevice" />
          </label>
        </div>
        <div class="w-full md:flex items-center hidden md:flex-col lg:flex-row">
          <div class="lg:w-1/2 md:w-full ">
            <img src="/rev_b.jpeg"
              class="transition-transform duration-300 lg:hover:scale-[1.4]  md:hover:scale-[1.7] h-auto z-50 ">
          </div>
          <div class="lg:w-1/2 md:w-full lg:p-5 text-sm">
            <p>If you are unsure about which version you have, check the back of the BTClock.</p>
            <p>The Rev. B has "Rev. B" written on the backside and two buttons on the back (Reset and Boot).</p>
            <small>All versions before block #841273 (2024-04-28) are rev. A.<br>The 2.9 inch version is offered as a
              courtesy, you most likely have the 2.13 inch version.</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>