Initial solution

src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte

@@ -1,8 +1,17 @@
-<script>
+<script lang="ts">
+  import EventPanel from "./../../../panels/configuration/EventPanel.svelte";
+  import {
+    CEEAT,
+    NumberToEventType,
+    grid,
+    EventTypeToNumber,
+    ElementType,
+    EventType,
+  } from "grid-protocol";
   import { ConfigTarget } from "./../../../panels/configuration/Configuration.store.js";
   import { user_input } from "./../../../../runtime/runtime.store.js";
   import { selectedConfigStore } from "../../../../runtime/config-helper.store";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { get } from "svelte/store";
   import { appSettings } from "../../../../runtime/app-helper.store";
   import SvgIcon from "../../../user-interface/SvgIcon.svelte";
@@ -19,6 +28,14 @@
   let loaded = false;
   let container;
 
+  enum State {
+    INCOMPATIBLE,
+    COMPATIBLE,
+    MATCHING,
+  }
+
+  let state = State.INCOMPATIBLE;
+
   $: {
     if (elementNumber === 255) {
       type =
@@ -37,12 +54,6 @@
     });
   }
 
-  $: {
-    if ($selectedConfigStore) {
-      loaded = false;
-    }
-  }
-
   function handlePresetLoad(e) {
     const { success } = e.detail;
     loaded = success;
@@ -53,7 +64,6 @@
     const { dx, dy } = ConfigTarget.getCurrent().device;
     if (dx !== device.dx || dy !== device.dy) {
       const ui = get(user_input);
-      console.log(device.dx, device.dy);
       user_input.set({
         dx: device.dx,
         dy: device.dy,
@@ -91,11 +101,50 @@
     );
     isChanged = typeof changed !== "undefined";
   }
+
+  function handleSelectedConfigChange(store) {
+    loaded = false;
+
+    if (store?.configType === "profile") {
+      return;
+    }
+
+    const filtredEvents = [EventType.INIT, EventType.TIMER];
+
+    const elementEvents = grid
+      .get_element_events(type)
+      .map((e) => e.desc)
+      .filter((e) => !filtredEvents.includes(e));
+    const configEvents =
+      store?.configs?.events
+        .map((e) => NumberToEventType(Number(e.event)))
+        .filter((e) => !filtredEvents.includes(e)) ?? [];
+
+    const compatibleEvents = elementEvents.reduce((acc, value) => {
+      if (configEvents.includes(value)) {
+        acc.push(value);
+      }
+      return acc;
+    }, []);
+
+    if (
+      compatibleEvents.length === configEvents.length &&
+      compatibleEvents.length === elementEvents.length
+    ) {
+      state = State.MATCHING;
+    } else if (compatibleEvents.length > 0) {
+      state = State.COMPATIBLE;
+    } else {
+      state = State.INCOMPATIBLE;
+    }
+  }
+
+  $: handleSelectedConfigChange($selectedConfigStore);
 </script>
 
 <container bind:this={container} on:preset-load={handlePresetLoad}>
   {#if visible}
-    {#if $selectedConfigStore?.type === type}
+    {#if state === State.COMPATIBLE || state === State.MATCHING}
       <div
         class="w-full h-full"
         class:loaded-element={loaded && !isChanged}
@@ -115,12 +164,17 @@
           {#if !loaded}
             <button
               on:click={handleClick}
-              class="rounded pointer-events-auto icon bg-opacity-75 p-1"
+              class="rounded pointer-events-auto {state === State.MATCHING
+                ? 'matching-icon'
+                : 'compatible-icon'} bg-opacity-75 p-1"
               class:icon-corner-cut-r={isRightCut}
               class:icon-corner-cut-l={isLeftCut}
               class:scale-50={elementNumber == 255}
             >
-              <SvgIcon fill="#FFF" iconPath={loaded ? "tick" : "download"} />
+              <SvgIcon
+                fill={state === State.MATCHING ? "#FFF" : "#000"}
+                iconPath={loaded ? "tick" : "download"}
+              />
             </button>
           {/if}
         </div>
@@ -141,8 +195,10 @@
 
 <style>
   :root {
-    --preset-load-color: rgb(28, 138, 114);
+    --preset-load-color: rgba(11, 164, 132, 0.8);
     --preset-load-hover-color: rgba(11, 164, 132, 1);
+    --preset-warning-color: rgb(220, 179, 8, 0.8);
+    --preset-warning-hover-color: rgb(220, 179, 8, 1);
     --preset-load-success-color: rgba(50, 50, 50, 1);
     --preset-disabled-color: rgba(0, 0, 0, 0.1);
   }
@@ -158,17 +214,28 @@
     box-shadow: 0px 300px 0px 1000px var(--preset-disabled-color);
   }
 
-  .icon {
+  .matching-icon {
     position: relative;
     overflow: hidden;
     background-color: var(--preset-load-color);
   }
-  .icon:hover {
+  .matching-icon:hover {
     position: relative;
     overflow: hidden;
     background-color: var(--preset-load-hover-color);
   }
 
+  .compatible-icon {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--preset-warning-color);
+  }
+  .compatible-icon:hover {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--preset-warning-hover-color);
+  }
+
   .disabled-element {
     position: relative;
     width: 100%;