feat: display unsupported appliances grayed out

app/components/NatureApplianceCardButton.vue

@@ -1,16 +1,16 @@
 <template>
-  <UCard
-    as="button"
-    class="disabled:opacity-60"
-    :class="[STYLE_CLICKABLE_CARD, STYLE_FOCUS_VISIBLE_RING]"
+  <button
+    class="group focus:outline-none focus-visible:outline-0"
     :disabled="disabled"
   >
-    <NatureApplianceCardContent
-      :appliance="appliance"
-      :status="status"
-      :override-indicator-type="overrideIndicatorType"
-    />
-  </UCard>
+    <UCard :class="[STYLE_CLICKABLE_CARD, STYLE_FOCUS_VISIBLE_RING]">
+      <NatureApplianceCardContent
+        :appliance="appliance"
+        :status="status"
+        :override-indicator-type="overrideIndicatorType"
+      />
+    </UCard>
+  </button>
 </template>
 
 <script setup lang="ts">

app/components/NatureApplianceCardLink.vue

@@ -2,6 +2,7 @@
   <ULink
     class="group focus:outline-none focus-visible:outline-0"
     :to="`/appliances/${appliance.id}`"
+    :disabled="disabled"
   >
     <UCard :class="[STYLE_CLICKABLE_CARD, STYLE_FOCUS_VISIBLE_RING_GROUP]">
       <NatureApplianceCardContent :appliance="appliance" :status="status" />
@@ -14,6 +15,7 @@ import type { NatureAppliance } from "~/utils/natureTypes";
 
 const props = defineProps<{
   appliance: NatureAppliance;
+  disabled?: boolean;
 }>();
 
 const status = useNatureApplianceStatus(() => props.appliance);

app/pages/devices/[id].vue

@@ -50,14 +50,20 @@
         </template>
       </dl>
     </div>
-    <template v-if="data?.appliances.length">
+    <template v-if="detailedAppliances?.length">
       <UDivider />
       <div
         id="controls"
         class="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-4"
       >
-        <template v-for="appliance in data?.appliances" :key="appliance.id">
-          <NatureApplianceCardLink :appliance="appliance" />
+        <template
+          v-for="{ appliance, supported } in detailedAppliances"
+          :key="appliance.id"
+        >
+          <NatureApplianceCardLink
+            :appliance="appliance"
+            :disabled="!supported"
+          />
         </template>
       </div>
     </template>
@@ -93,6 +99,13 @@ useHead({
   },
 });
 
+const detailedAppliances = computed(() =>
+  data.value?.appliances.map((appliance) => ({
+    appliance,
+    supported: isNatureApplianceSupportedType(appliance),
+  }))
+);
+
 const device = computed(() => data.value?.device);
 const sensorItems = useNatureDeviceSensors(device);
 const detailItems = useNatureDeviceDetails(device);

app/pages/index.vue

@@ -58,15 +58,16 @@
         </p>
       </Transition>
       <div
-        v-if="data.appliances.length"
+        v-if="detailedAppliances?.length"
         class="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-4"
       >
         <template
           v-for="{
             appliance,
+            supported,
             powerControl,
             powerStatus,
-          } in applianceAndPowerControls"
+          } in detailedAppliances"
           :key="appliance.id"
         >
           <NatureApplianceCardButton
@@ -88,7 +89,11 @@
                 sendPowerControl(appliance.id, powerControl, powerStatus)
             "
           />
-          <NatureApplianceCardLink v-else :appliance="appliance" />
+          <NatureApplianceCardLink
+            v-else
+            :appliance="appliance"
+            :disabled="!supported"
+          />
         </template>
       </div>
       <p v-else>使用可能なコントロールが登録されていません</p>
@@ -128,9 +133,10 @@ if (error.value) {
 
 // bulk power operation
 const bulkPowerMode = ref(false);
-const applianceAndPowerControls = computed(() =>
+const detailedAppliances = computed(() =>
   data.value?.appliances.map((appliance) => ({
     appliance,
+    supported: isNatureApplianceSupportedType(appliance),
     powerStatus: getNatureApplianceIndicatorType(appliance),
     powerControl: getNatureAppliancePowerControl(appliance),
   }))

app/utils/constants.ts

@@ -8,7 +8,7 @@ export const REFRESH_INTERVAL_DEVICE_PAGE = REFRESH_INTERVAL_HOME;
 export const SWIPE_THRESHOLD_DISTANCE_AC_TEMPERATURE = 1;
 
 export const STYLE_CLICKABLE_CARD =
-  "hover:[&:not(:disabled)]:bg-gray-50 dark:hover:[&:not(:disabled)]:bg-gray-800";
+  "[.group:where(:disabled,[aria-disabled=true])_&]:opacity-60 [.group:where(:enabled,:any-link)_&]:hover:bg-gray-50 [.group:where(:enabled,:any-link)_&]:dark:hover:bg-gray-800";
 
 export const STYLE_FOCUS_VISIBLE_RING =
   "focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400";

app/utils/useNatureApplianceStatus.ts

@@ -18,10 +18,21 @@ export interface NatureApplianceStatusSettings {
 }
 
 export interface NatureApplianceStatus {
+  readonly supported: boolean | null;
   readonly indicator: NatureApplianceStatusIndicator | null;
   readonly settings: NatureApplianceStatusSettings | null;
 }
 
+export function isNatureApplianceSupportedType(
+  appliance: NatureAppliance | null | undefined
+): boolean | null {
+  if (!appliance?.type) {
+    return null;
+  }
+
+  return ["AC", "LIGHT"].includes(appliance.type);
+}
+
 export function getNatureApplianceIndicatorFromIndicatorType(
   indicatorType?: NatureApplianceStatusIndicatorType
 ): NatureApplianceStatusIndicator | null {
@@ -90,6 +101,7 @@ export function getNatureApplianceStatus(
   }
 
   return {
+    supported: isNatureApplianceSupportedType(appliance),
     indicator,
     settings,
   };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "luonto",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "private": true,
   "type": "module",
   "scripts": {