From cf7cf19c6b6a2095849c3c3e73a6495c47937b91 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Wed, 29 Jun 2022 15:22:15 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E7=BB=9C=E8=AE=BE=E7=BD=AE=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E4=B8=BB=E6=9C=BA=E5=90=8D=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SystemSettingDialog.vue        |  52 +++--
 .../SystenSettingAdvancedNetworkDialog.vue    | 195 ++++++++++++------
 src/entities/WSProtocol.ts                    |   4 +-
 src/i18n/zh-CN/index.ts                       |   3 +
 4 files changed, 176 insertions(+), 78 deletions(-)

diff --git a/src/components/SystemSettingDialog.vue b/src/components/SystemSettingDialog.vue
index 26b45ee..4fe5e5f 100644
--- a/src/components/SystemSettingDialog.vue
+++ b/src/components/SystemSettingDialog.vue
@@ -171,7 +171,10 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
+                    <q-item
+                      class="q-pa-none"
+                      v-if="false && auto_ip != $t('enable')"
+                    >
                       <q-item-section avatar class="width_5_1">{{
                         $t("dns server") + "1:"
                       }}</q-item-section>
@@ -191,7 +194,10 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
+                    <q-item
+                      class="q-pa-none"
+                      v-if="false && auto_ip != $t('enable')"
+                    >
                       <q-item-section avatar class="width_5_1">{{
                         $t("dns server") + "2:"
                       }}</q-item-section>
@@ -1125,6 +1131,7 @@ export default defineComponent({
     let dns2 = ref();
     let mac_address = ref("11:22:33:44:55:66");
     let ip_address_list: AdvancedIpAddressEntity[] = [];
+    let host_name = "player";
 
     let brightness = ref(0);
     let contrast = ref(0);
@@ -1377,9 +1384,10 @@ export default defineComponent({
       request.gateway = gateway.value;
       request.net_mask = netmask.value;
       request.mac_address = mac_address.value;
-      request.dns1 = dns1.value;
-      request.dns2 = dns2.value;
-      request.ip_address_list = ip_address_list;
+      request.dns1 = dns1.value ?? "";
+      request.dns2 = dns2.value ?? "";
+      request.ip_address_list = ip_address_list ?? [];
+      request.host_name = host_name ?? "";
 
       let success = false;
       try {
@@ -1678,6 +1686,15 @@ export default defineComponent({
       showDialog() {
         show_dialog.value = true;
 
+        GlobalData.getInstance()
+          .getCurrentClient()
+          ?.getSystemNetworkInfo()
+          .then((response) => {
+            if (response) {
+              host_name = (response.host_name ?? "player").trim();
+            }
+          });
+
         refresh_all();
       },
       resetData() {
@@ -1793,8 +1810,10 @@ export default defineComponent({
             if (info) {
               gateway.value = info.gateway || "192.168.1.1";
               netmask.value = info.net_mask || "255.255.0.0";
-              dns1.value = info.dns1 || "";
-              dns2.value = info.dns2 || "";
+              dns1.value =
+                GlobalData.getInstance()?.applicationConfig?.dns1 || "";
+              dns2.value =
+                GlobalData.getInstance()?.applicationConfig?.dns2 || "";
               mac_address.value = info.mac_address || "5A:30:C2:5A:54:Bf";
               ip_address.value = info.ip_address || "192.168.1.168";
               flag = true;
@@ -1848,15 +1867,22 @@ export default defineComponent({
         );
       },
       async onAdvanceNetwork() {
-        const _ip_address_list =
+        const result =
           await system_setting_advanced_network_dialog.value.showDialogAsync(
             GlobalData.getInstance()?.applicationConfig?.ip_list
           );
-        if (Array.isArray(_ip_address_list)) {
-          ip_address_list = _ip_address_list;
-        } else {
-          ip_address_list =
-            GlobalData.getInstance()?.applicationConfig?.ip_list || [];
+        if (result) {
+          if (Array.isArray(result.ip_address_list)) {
+            ip_address_list = result.ip_address_list;
+          } else {
+            ip_address_list =
+              GlobalData.getInstance()?.applicationConfig?.ip_list || [];
+          }
+          if (typeof result.host_name == "string") {
+            host_name = result.host_name.trim();
+          } else {
+            host_name = "player";
+          }
         }
       },
     };
diff --git a/src/components/SystenSettingAdvancedNetworkDialog.vue b/src/components/SystenSettingAdvancedNetworkDialog.vue
index 8911b1f..c56de7b 100644
--- a/src/components/SystenSettingAdvancedNetworkDialog.vue
+++ b/src/components/SystenSettingAdvancedNetworkDialog.vue
@@ -33,70 +33,100 @@
           class="scroll q-pa-xs q-ma-none"
           style="width: 60vw; height: 65vh"
         >
-          <q-card class="fit">
-            <q-card-section class="q-pa-none fit">
-              <q-table
-                class="fit"
-                ref="advance_ip_table"
-                :title="$t('ip address')"
-                :rows="advance_ip_rows"
-                :columns="advance_ip_columns"
-                row-key="uuid"
-                :hide-bottom="true"
-                :selection="'single'"
-                @row-click="
-                  (evt, row, index) => {
-                    if (advance_ip_table_selected.length) {
-                      advance_ip_table_selected =
-                        advance_ip_table_selected[0].uuid == row.uuid
-                          ? []
-                          : [row];
-                    } else {
-                      advance_ip_table_selected = [row];
-                    }
+          <q-card-section class="q-pb-none">
+            <q-card>
+              <q-card-section>
+                <q-item class="q-pa-none">
+                  <q-item-section avatar class="header_label_2 text-left">{{
+                    $t("host name") + ":"
+                  }}</q-item-section>
+                  <q-item-section>
+                    <q-input
+                      v-model="host_name"
+                      maxlength="20"
+                      :rules="[
+                        (val) =>
+                          (val && val.length > 0) ||
+                          $t('Please type something'),
+                        (val) =>
+                          isEnglishOrNum(val) ||
+                          $t(
+                            'Host names can only be numbers and letters and _-'
+                          ),
+                      ]"
+                      lazy-rules
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-card-section>
+            </q-card>
+          </q-card-section>
+          <q-card-section>
+            <q-table
+              ref="advance_ip_table"
+              class="advance-ip-table"
+              :title="$t('ip address')"
+              :rows="advance_ip_rows"
+              :columns="advance_ip_columns"
+              row-key="uuid"
+              :hide-bottom="true"
+              selection="single"
+              virtual-scroll
+              :virtual-scroll-item-size="48"
+              :virtual-scroll-sticky-size-start="48"
+              :rows-per-page-options="[0]"
+              @row-click="
+                (evt, row, index) => {
+                  if (advance_ip_table_selected.length) {
+                    advance_ip_table_selected =
+                      advance_ip_table_selected[0].uuid == row.uuid
+                        ? []
+                        : [row];
+                  } else {
+                    advance_ip_table_selected = [row];
                   }
-                "
-                v-model:selected="advance_ip_table_selected"
-              >
-                <template v-slot:top="props">
-                  <div class="col-2 q-table__title">{{ $t("ip address") }}</div>
+                }
+              "
+              v-model:selected="advance_ip_table_selected"
+            >
+              <template v-slot:top="props">
+                <div class="col-2 q-table__title">{{ $t("ip address") }}</div>
 
-                  <q-space />
+                <q-space />
 
-                  <q-btn
-                    flat
-                    color="primary"
-                    :label="$t('add row')"
-                    class="col-2"
-                    @click="advance_ip_addRow"
-                  />
-                  <q-btn
-                    :disable="advance_ip_table_selected.length == 0"
-                    flat
-                    color="primary"
-                    :label="$t('edit row')"
-                    class="col-2"
-                    @click="advance_ip_editRow"
-                  />
-                  <q-btn
-                    :disable="advance_ip_table_selected.length == 0"
-                    flat
-                    color="primary"
-                    :label="$t('delete row')"
-                    class="col-2"
-                    @click="
-                      advance_ip_table_selected.length &&
-                        (advance_ip_rows = advance_ip_rows.filter(
-                          (element) =>
-                            element && element != advance_ip_table_selected[0]
-                        )) &&
-                        (advance_ip_table_selected = [])
-                    "
-                  />
-                </template>
-              </q-table>
-            </q-card-section>
-          </q-card>
+                <q-btn
+                  flat
+                  color="primary"
+                  :label="$t('add row')"
+                  class="col-2"
+                  @click="advance_ip_addRow"
+                />
+                <q-btn
+                  :disable="advance_ip_table_selected.length == 0"
+                  flat
+                  color="primary"
+                  :label="$t('edit row')"
+                  class="col-2"
+                  @click="advance_ip_editRow"
+                />
+                <q-btn
+                  :disable="advance_ip_table_selected.length == 0"
+                  flat
+                  color="primary"
+                  :label="$t('delete row')"
+                  class="col-2"
+                  @click="
+                    advance_ip_table_selected.length &&
+                      (advance_ip_rows = advance_ip_rows.filter(
+                        (element) =>
+                          element && element != advance_ip_table_selected[0]
+                      )) &&
+                      (advance_ip_table_selected = [])
+                  "
+                />
+              </template>
+            </q-table>
+          </q-card-section>
         </q-card-section>
 
         <q-separator />
@@ -125,11 +155,32 @@
   width: 15%;
 }
 .header_label_2 {
-  width: 15%;
+  width: 20%;
   align-items: center;
 }
 </style>
 
+<style lang="sass">
+.advance-ip-table
+  /* height or max-height is important */
+  max-height: 46vh
+
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th /* bg color is important for th; just specify one */
+    background-color: #fff
+
+  thead tr th
+    position: sticky
+    z-index: 1
+  /* this will be the loading indicator */
+  thead tr:last-child th
+    /* height of all previous header rows */
+    top: 48px
+  thead tr:first-child th
+    top: 0
+</style>
+
 <script lang="ts">
 import { defineComponent, ref, Ref, reactive } from "vue";
 import { useStore } from "src/store";
@@ -152,6 +203,7 @@ export default defineComponent({
     let show_dialog = ref(false);
 
     const advance_ip_table_selected: Ref<AdvancedIpAddressEntity[]> = ref([]);
+    const host_name = ref("player");
 
     const advance_ip_columns = [
       {
@@ -206,6 +258,7 @@ export default defineComponent({
       advance_ip_columns,
       advance_ip_rows,
       advance_ip_table_selected,
+      host_name,
       loga(a: any) {
         console.log(a);
       },
@@ -217,6 +270,15 @@ export default defineComponent({
         return new Promise((resolove) => {
           _resolove = resolove;
 
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getSystemNetworkInfo()
+            .then((response) => {
+              if (response) {
+                host_name.value = (response.host_name ?? "player").trim();
+              }
+            });
+
           if (Array.isArray(_data)) {
             for (const item of _data) {
               if (item) {
@@ -236,6 +298,7 @@ export default defineComponent({
         }
         advance_ip_rows.value = [];
         advance_ip_table_selected.value = [];
+        host_name.value = "player";
       },
 
       async onSubmit() {
@@ -244,7 +307,10 @@ export default defineComponent({
         try {
           if (_resolove) {
             try {
-              _resolove(advance_ip_rows.value);
+              _resolove({
+                ip_address_list: advance_ip_rows.value,
+                host_name: host_name.value,
+              });
             } catch {
               _resolove(null);
             }
@@ -300,6 +366,9 @@ export default defineComponent({
           }
         }
       },
+      isEnglishOrNum(str: string) {
+        return /^[0-9a-zA-Z_\-]+$/.test(str);
+      },
     };
   },
 });
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index 4109eb1..a57b56a 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -1692,6 +1692,7 @@ export namespace Protocol {
     dns2: string = "";
     mac_address: string = "04:D9:F5:D3:F4:C5";
     ip_address_list: AdvancedIpAddressEntity[] = [];
+    host_name: string = "";
 
     constructor(rcp_id?: number) {
       super();
@@ -2704,9 +2705,8 @@ export namespace Protocol {
     ip_address = "192.168.1.1";
     gateway = "192.168.1.1";
     net_mask = "192.168.1.1";
-    dns1 = "";
-    dns2 = "";
     mac_address = "AA:BB:CC:DD:EE:FF";
+    host_name = "player";
   }
 
   export class SetHdmiInDecodeTypeRequestEntity extends PacketEntity {
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index b7665db..94b4267 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -592,4 +592,7 @@ export default {
   "already existed": "已经存在",
   "please input gateway": "请输入网关",
   "advanced network setting": "高级网络设置",
+  "host name": "主机名称",
+  "Host names can only be numbers and letters and _-":
+    "主机名只能由数字、字母和_-组成",
 };