From def4a9a6304077d9c5297e54e6e21b90d95971ee Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 18 Jul 2022 10:35:18 +0800
Subject: [PATCH] add config for event

---
 src/locales/lang/en.ts                      |  1 +
 src/locales/lang/es.ts                      |  1 +
 src/locales/lang/zh.ts                      |  1 +
 src/views/dashboard/configuration/Event.vue | 52 +++++++++++++++++++++
 src/views/dashboard/configuration/index.ts  |  2 +
 src/views/dashboard/controls/Event.vue      |  7 +++
 6 files changed, 64 insertions(+)
 create mode 100644 src/views/dashboard/configuration/Event.vue

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 874a2ee7..b4ba6d54 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -147,6 +147,7 @@ const msg = {
   nameTip:
     "The name only supports Chinese and English, horizontal lines and underscores",
   duplicateName: "Duplicate name",
+  enableAssociate: "Enable association",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index c0118720..36abbccd 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -147,6 +147,7 @@ const msg = {
   duplicateName: "Nombre duplicado",
   nameTip:
     "Este nombre sólo admite chino e inglés, líneas cruzadas y subrayado",
+  enableAssociate: "Activar asociación",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 4c2d96a3..4c6fb607 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -143,6 +143,7 @@ const msg = {
   associateOptions: "关联选项",
   widget: "部件",
   nameTip: "该名称仅支持中文和英文、横线和下划线",
+  enableAssociate: "启用关联",
   duplicateName: "重复的名称",
   seconds: "秒",
   hourTip: "选择小时",
diff --git a/src/views/dashboard/configuration/Event.vue b/src/views/dashboard/configuration/Event.vue
new file mode 100644
index 00000000..82433732
--- /dev/null
+++ b/src/views/dashboard/configuration/Event.vue
@@ -0,0 +1,52 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+  http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div>
+    <span class="label">{{ t("enableAssociate") }}</span>
+    <el-switch
+      v-model="associate"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { ref } from "vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const associate = ref(dashboardStore.selectedGrid.associate || false);
+
+function updateConfig() {
+  dashboardStore.selectedGrid = {
+    ...dashboardStore.selectedGrid,
+    associate,
+  };
+  dashboardStore.selectWidget(dashboardStore.selectedGrid);
+}
+</script>
+<style lang="scss" scoped>
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.item {
+  margin: 10px 0;
+}
+</style>
diff --git a/src/views/dashboard/configuration/index.ts b/src/views/dashboard/configuration/index.ts
index a1359eec..6d39f192 100644
--- a/src/views/dashboard/configuration/index.ts
+++ b/src/views/dashboard/configuration/index.ts
@@ -18,9 +18,11 @@
 import Text from "./Text.vue";
 import Widget from "./Widget.vue";
 import Topology from "./Topology.vue";
+import Event from "./Event.vue";
 
 export default {
   Text,
   Widget,
   Topology,
+  Event,
 };
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index e510a138..c4cc16ac 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -25,6 +25,9 @@ limitations under the License. -->
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
         </span>
       </template>
+      <div class="tools" @click="editConfig">
+        <span>{{ t("edit") }}</span>
+      </div>
       <div class="tools" @click="removeWidget">
         <span>{{ t("delete") }}</span>
       </div>
@@ -58,6 +61,10 @@ const dashboardStore = useDashboardStore();
 function removeWidget() {
   dashboardStore.removeControls(props.data);
 }
+function editConfig() {
+  dashboardStore.setConfigPanel(true);
+  dashboardStore.selectWidget(props.data);
+}
 </script>
 <style lang="scss" scoped>
 .event-wrapper {