first commit

2021-09-14 07:31:59 +08:00
commit d0f3fccb12
35 changed files with 4191 additions and 0 deletions
--- a/src/render/components/SatelliteTableView.vue
+++ b/src/render/components/SatelliteTableView.vue
@@ -0,0 +1,107 @@
+<template>
+<div>
+  <div id="satellite-table-container" class="text-white absolute bottom-0 text-center">
+    <button @click="show = !show" class="rounded border-blue-900 bg-blue-900">
+      <svg v-if="show" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13l-7 7-7-7m14-8l-7 7-7-7" />
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
+      </svg>
+    </button>
+    <table ref="satelliteTable" v-show="show" class="text-center">
+        <thead class="text-2xl">
+          <th class="py-3 bg-blue-900 border border-gray-900"
+              v-for="label, index in ['序号', '卫星名称', '显示/隐藏', '跟踪']"
+              :key="label"
+              :style="{width: index == 1 ? '37.5vw' : '12.5vw'}">
+              {{ label }}
+          </th>
+        </thead>
+        <tbody class="text-lg odd:bg-gray-50">
+          <tr v-for="{ id, show }, index in satellites" :key="id">
+            <td class="border border-gray-900"> {{ index + 1 }} </td>
+            <td class="border border-gray-900"> {{ id }} </td>
+            <td class="border border-gray-900">
+              <input :checked="show" type="checkbox" class="w-6 h-6 cursor-pointer" @change="onSatelliteTableCheckboxChanged(id)" />
+            </td>
+            <td class="border border-gray-900">
+              <button @click="$emit('track-satellite-selected', id)">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+    </table>
+  </div>
+</div>
+</template>
+
+<script lang="ts">
+import { ref, computed, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+
+
+export default defineComponent({
+  setup: () => {
+    const show           = ref(false)
+    
+    const store          = useStore()
+    const satelliteTable = ref(null)
+    const satellites     = computed(() => {
+      if (satelliteTable.value) satelliteTable.value.scrollTop = 0
+
+      return store.state.satellites.all
+    })
+    
+    const onSatelliteTableCheckboxChanged = id => store.commit('satellites/toggleShow', id)
+    
+    return { show, satelliteTable, satellites, onSatelliteTableCheckboxChanged }
+  }
+})
+</script>
+
+<style scoped>
+#satellite-table-container {
+  left: 12.5vw;
+  right: 12.5vw;
+}
+
+table {
+  display: block;
+  height: 360px;
+  overflow: auto;
+}
+
+tr:nth-child(odd) {
+  background-color: rgb(17, 24, 39);
+}
+
+tr:nth-child(even) {
+  background-color:rgb(31, 41, 55)
+}
+
+td {
+  padding: 5px 0;
+}
+
+::-webkit-scrollbar
+{
+  width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    background-color: #1f2937;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    /* border-radius: 10px; */
+    background-color: #111827;
+}
+
+</style>>