From 90475b988ba83202748f12b5c03f45c594c02d64 Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Mon, 15 Apr 2024 12:12:32 +0800
Subject: [PATCH] feat: Sighting and Transmitters filter feat: renamed 'data'
 button fix: wrong key on list

---
 app/satellites/SatelliteTable.tsx  | 341 ++++++++++++++++++++++++++---
 components/Icon/TablerAngle.tsx    |  10 +
 components/Icon/TablerClock.tsx    |  12 +
 components/Icon/TablerRoute.tsx    |  10 +
 components/Icon/TablerWaveSine.tsx |  10 +
 package-lock.json                  |   4 +-
 6 files changed, 360 insertions(+), 27 deletions(-)
 create mode 100644 components/Icon/TablerAngle.tsx
 create mode 100644 components/Icon/TablerClock.tsx
 create mode 100644 components/Icon/TablerRoute.tsx
 create mode 100644 components/Icon/TablerWaveSine.tsx

diff --git a/app/satellites/SatelliteTable.tsx b/app/satellites/SatelliteTable.tsx
index 955825b..cbba387 100644
--- a/app/satellites/SatelliteTable.tsx
+++ b/app/satellites/SatelliteTable.tsx
@@ -7,11 +7,15 @@ import { CSSProperties, ReactNode, useEffect, useState } from 'react'
 import { Icon } from '@iconify-icon/react'
 import { noto_sc, rubik } from '@/app/fonts'
 import { IconSpinner } from '@/components/Icon/IconSpinner'
-import { Button, SideSheet } from '@douyinfe/semi-ui'
+import { Button, Select, SideSheet, Tooltip } from '@douyinfe/semi-ui'
 import useSWR, { SWRConfig } from 'swr'
 import { ObserverLocationStore, SatelliteSighting } from '@/types/types'
 import Image from 'next/image'
 import { TransponderCard } from '@/app/satellites/TransponderCard'
+import { TablerAngle } from '@/components/Icon/TablerAngle'
+import { TablerClock } from '@/components/Icon/TablerClock'
+import { TablerWaveSine } from '@/components/Icon/TablerWaveSine'
+import { TablerRoute } from '@/components/Icon/TablerRoute'
 
 const NationalFlag = ({ countries }: { countries: string }) => {
   const countriesList = countries.split(',')
@@ -114,13 +118,229 @@ const SatelliteTableRow = ({
       ? Buffer.from(str).toString('base64')
       : window.btoa(str)
 
-  const SideLoadingPlaceholder = ({ text, className }: { text: string, className?: string }) => (
+  const SideLoadingPlaceholder = ({
+    text,
+    loading = true,
+    className,
+  }: {
+    text: string,
+    loading?: boolean
+    className?: string
+  }) => (
     <div className={ `w-full flex items-center gap-1 p-3 rounded-lg border ${ className }` }>
-      <IconSpinner/>
+      { loading && <IconSpinner/> }
       <p>{ text }</p>
     </div>
   )
 
+  const transmitterModes = [
+    {
+      'value': 90,
+      'label': '4FSK',
+    },
+    {
+      'value': 49,
+      'label': 'AFSK',
+    },
+    {
+      'value': 78,
+      'label': 'AFSK TUBiX10',
+    },
+    {
+      'value': 17,
+      'label': 'AHRPT',
+    },
+    {
+      'value': 19,
+      'label': 'AM',
+    },
+    {
+      'value': 44,
+      'label': 'APT',
+    },
+    {
+      'value': 93,
+      'label': 'ASK',
+    },
+    {
+      'value': 50,
+      'label': 'BPSK',
+    },
+    {
+      'value': 83,
+      'label': 'BPSK PMT-A3',
+    },
+    {
+      'value': 59,
+      'label': 'CERTO',
+    },
+    {
+      'value': 6,
+      'label': 'CW',
+    },
+    {
+      'value': 95,
+      'label': 'DBPSK',
+    },
+    {
+      'value': 96,
+      'label': 'DOKA',
+    },
+    {
+      'value': 97,
+      'label': 'DPSK',
+    },
+    {
+      'value': 71,
+      'label': 'DQPSK',
+    },
+    {
+      'value': 98,
+      'label': 'DSB',
+    },
+    {
+      'value': 57,
+      'label': 'DSTAR',
+    },
+    {
+      'value': 58,
+      'label': 'DUV',
+    },
+    {
+      'value': 92,
+      'label': 'DVB-S2',
+    },
+    {
+      'value': 82,
+      'label': 'FFSK',
+    },
+    {
+      'value': 1,
+      'label': 'FM',
+    },
+    {
+      'value': 7,
+      'label': 'FMN',
+    },
+    {
+      'value': 72,
+      'label': 'FSK',
+    },
+    {
+      'value': 84,
+      'label': 'FSK AX.100 Mode 5',
+    },
+    {
+      'value': 85,
+      'label': 'FSK AX.100 Mode 6',
+    },
+    {
+      'value': 88,
+      'label': 'FSK AX.25 G3RUH',
+    },
+    {
+      'value': 75,
+      'label': 'GFSK',
+    },
+    {
+      'value': 68,
+      'label': 'GFSK Rktr',
+    },
+    {
+      'value': 94,
+      'label': 'GFSK/BPSK',
+    },
+    {
+      'value': 63,
+      'label': 'GMSK',
+    },
+    {
+      'value': 91,
+      'label': 'GMSK USP',
+    },
+    {
+      'value': 45,
+      'label': 'HRPT',
+    },
+    {
+      'value': 89,
+      'label': 'LoRa',
+    },
+    {
+      'value': 53,
+      'label': 'LRPT',
+    },
+    {
+      'value': 20,
+      'label': 'LSB',
+    },
+    {
+      'value': 77,
+      'label': 'MFSK',
+    },
+    {
+      'value': 81,
+      'label': 'MSK',
+    },
+    {
+      'value': 86,
+      'label': 'MSK AX.100 Mode 5',
+    },
+    {
+      'value': 87,
+      'label': 'MSK AX.100 Mode 6',
+    },
+    {
+      'value': 61,
+      'label': 'OFDM',
+    },
+    {
+      'value': 76,
+      'label': 'OQPSK',
+    },
+    {
+      'value': 74,
+      'label': 'PSK',
+    },
+    {
+      'value': 40,
+      'label': 'PSK31',
+    },
+    {
+      'value': 41,
+      'label': 'PSK63',
+    },
+    {
+      'value': 69,
+      'label': 'QPSK',
+    },
+    {
+      'value': 42,
+      'label': 'QPSK31',
+    },
+    {
+      'value': 43,
+      'label': 'QPSK63',
+    },
+    {
+      'value': 5,
+      'label': 'SSTV',
+    },
+    {
+      'value': 9,
+      'label': 'USB',
+    },
+    {
+      'value': 64,
+      'label': 'WSJT',
+    },
+  ]
+
+  const [sightHours, setSightHours] = useState(24)
+  const [sightElevation, setSightElevation] = useState(10)
+  const [transmitterMode, setTransmitterMode] = useState(0)
+  const [transmitterService, setTransmitterService] = useState('Amateur')
+
   const {
     data: sightingData,
     isLoading: isSightingLoading,
@@ -135,8 +355,8 @@ const SatelliteTableRow = ({
         tle0: tle?.tle0,
         tle1: tle?.tle1,
         tle2: tle?.tle2,
-        hours: 24,
-        elevation_threshold: 10,
+        hours: sightHours,
+        elevation_threshold: sightElevation,
         observer: {
           lat: location?.latitude || 0,
           lon: location?.longitude || 0,
@@ -150,7 +370,7 @@ const SatelliteTableRow = ({
     data: transmittersData,
     isLoading: isTransmittersLoading,
   } = useSWR<BaseResponse<Transmitter[]>>(sidePopVisible && {
-    resource: `/api/satellite/satnogs/${ encodeURIComponent(`transmitters/?format=json&service=Amateur&sat_id=${ satellite.sat_id }`) }`,
+    resource: `/api/satellite/satnogs/${ encodeURIComponent(`transmitters/?format=json${ transmitterService === 'all' ? '' : '&service=' + transmitterService }&alive=true&satellite__norad_cat_id=${ satellite.norad_cat_id }${ transmitterMode !== 0 ? '&mode=' + transmitterMode : '' }`) }`,
   }, {
     refreshWhenHidden: false,
     refreshWhenOffline: false,
@@ -198,10 +418,10 @@ const SatelliteTableRow = ({
           <Button
             theme={ 'borderless' }
             type={ 'tertiary' }
-            icon={ <Icon icon={ 'tabler:arrows-transfer-down' } className={ 'text-lg' }/> }
+            icon={ <Icon icon={ 'tabler:info-circle' } className={ 'text-lg' }/> }
             onClick={ () => setSidePopVisible(true) }
           >
-            收发器
+            数据
           </Button>
         </TableCell>
       </tr>
@@ -280,14 +500,43 @@ const SatelliteTableRow = ({
           <SideLoadingPlaceholder className={ 'mb-2' } text={ '加载卫星过境...' }></SideLoadingPlaceholder>
           : (
             <>
-              <h1
-                className={ `text-base font-bold mb-2 ${ noto_sc.className }` }
-              >
-                <Icon icon={ 'tabler:planet' } className={ 'text-xl mr-1' } inline/>
-                <span>未来 24 小时过境</span>
-              </h1>
+              <div className={ 'flex justify-between items-center mb-2' }>
+                <h1
+                  className={ `text-base font-bold ${ noto_sc.className }` }
+                >
+                  <Icon icon={ 'tabler:planet' } className={ 'text-xl mr-1 mt-0.5' } inline/>
+                  <span>未来过境</span>
+                </h1>
+                <div className={ 'flex items-center gap-2' }>
+                  <Select
+                    defaultValue={ 24 }
+                    value={ sightHours }
+                    onChange={ value => setSightHours(value as number) }
+                    prefix={ <TablerClock className={ 'mx-2' }/> }
+                  >
+                    <Select.Option value={ 12 }>12 小时</Select.Option>
+                    <Select.Option value={ 24 }>24 小时</Select.Option>
+                    <Select.Option value={ 48 }>48 小时</Select.Option>
+                  </Select>
+                  <Tooltip content={ '仰角阈值' }>
+                    <Select
+                      defaultValue={ 10 }
+                      value={ sightElevation }
+                      onChange={ value => setSightElevation(value as number) }
+                      prefix={ <TablerAngle className={ 'mx-2' }/> }
+                    >
+                      <Select.Option value={ 0 }>0°</Select.Option>
+                      <Select.Option value={ 10 }>10°</Select.Option>
+                      <Select.Option value={ 20 }>20°</Select.Option>
+                      <Select.Option value={ 30 }>30°</Select.Option>
+                      <Select.Option value={ 40 }>40°</Select.Option>
+                      <Select.Option value={ 50 }>50°</Select.Option>
+                    </Select>
+                  </Tooltip>
+                </div>
+              </div>
               <div className={ 'grid grid-cols-1 md:grid-cols-2 gap-2 mb-6' }>
-                { (sightingData && typeof sightingData.length === 'number') && sightingData.map((sighting, index) => (
+                { (sightingData && typeof sightingData.length === 'number' && sightingData.length > 0) ? sightingData.map((sighting, index) => (
                   <div
                     key={ index }
                     className={ `w-full px-3 py-2 flex flex-col gap-2 bg-white dark:bg-neutral-800 border dark:border-neutral-700 rounded ${ rubik.className }` }
@@ -340,7 +589,9 @@ const SatelliteTableRow = ({
                       </div>
                     </div>
                   </div>
-                )) }
+                )) : (
+                  <SideLoadingPlaceholder text={ '暂无过境' } loading={ false }></SideLoadingPlaceholder>
+                ) }
               </div>
             </>
           ) }
@@ -349,16 +600,56 @@ const SatelliteTableRow = ({
           <SideLoadingPlaceholder className={ 'mb-2' } text={ '加载中继列表...' }></SideLoadingPlaceholder>
           : (
             <>
-              <h1
-                className={ `text-base font-bold mb-2 ${ noto_sc.className }` }
-              >
-                <Icon icon={ 'tabler:arrows-transfer-down' } className={ 'text-xl mr-1' } inline/>
-                <span>卫星收发器</span>
-              </h1>
+              <div className={ 'flex justify-between items-center mb-2' }>
+                <h1
+                  className={ `text-base font-bold ${ noto_sc.className }` }
+                >
+                  <Icon icon={ 'tabler:arrows-transfer-down' } className={ 'text-xl mr-1' } inline/>
+                  <span>卫星收发器</span>
+                </h1>
+                <div className={ 'flex items-center gap-2' }>
+                  <Tooltip content={ '调制模式' }>
+                    <Select
+                      optionList={ [
+                        {
+                          label: '全部',
+                          value: 0,
+                        }, ...transmitterModes,
+                      ] }
+                      defaultValue={ 0 }
+                      value={ transmitterMode }
+                      onChange={ value => setTransmitterMode(value as number) }
+                      prefix={ <TablerWaveSine className={ 'mx-2' }/> }
+                      position={ 'bottomRight' }
+                    />
+                  </Tooltip>
+                  <Tooltip content={ '业务类型' }>
+                    <Select
+                      optionList={ [
+                        {
+                          label: '业余业务',
+                          value: 'Amateur',
+                        },
+                        {
+                          label: '所有业务',
+                          value: 'all',
+                        },
+                      ] }
+                      defaultValue={ 'Amateur' }
+                      value={ transmitterService }
+                      onChange={ value => setTransmitterService(value as string) }
+                      prefix={ <TablerRoute className={ 'mx-2' }/> }
+                      position={ 'bottomRight' }
+                    />
+                  </Tooltip>
+                </div>
+              </div>
               <div className={ 'grid grid-cols-1 md:grid-cols-2 gap-2 mb-2' }>
-                { transmittersData?.data && transmittersData.data.map(transponder => (
-                  <TransponderCard transmitter={ transponder } key={ transponder.norad_cat_id || transponder.sat_id }/>
-                )) }
+                { (transmittersData?.data && transmittersData.data.length > 0) ? transmittersData.data.map(transponder => (
+                  <TransponderCard transmitter={ transponder } key={ transponder.uuid }/>
+                )) : (
+                  <SideLoadingPlaceholder text={ '没有该模式下的收发器' } loading={ false }></SideLoadingPlaceholder>
+                ) }
               </div>
             </>
           ) }
diff --git a/components/Icon/TablerAngle.tsx b/components/Icon/TablerAngle.tsx
new file mode 100644
index 0000000..60236d8
--- /dev/null
+++ b/components/Icon/TablerAngle.tsx
@@ -0,0 +1,10 @@
+import { SVGProps } from 'react'
+
+export function TablerAngle(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" { ...props }>
+      <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+            d="M21 19H3l9-15m8.615 11.171h.015m-1.115-3.4h.015m-1.815-3.1h.015m-2.315-2.7h.015"></path>
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/components/Icon/TablerClock.tsx b/components/Icon/TablerClock.tsx
new file mode 100644
index 0000000..794f59d
--- /dev/null
+++ b/components/Icon/TablerClock.tsx
@@ -0,0 +1,12 @@
+import { SVGProps } from 'react'
+
+export function TablerClock(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" { ...props }>
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
+        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0"></path>
+        <path d="M12 7v5l3 3"></path>
+      </g>
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/components/Icon/TablerRoute.tsx b/components/Icon/TablerRoute.tsx
new file mode 100644
index 0000000..1c6a140
--- /dev/null
+++ b/components/Icon/TablerRoute.tsx
@@ -0,0 +1,10 @@
+import { SVGProps } from 'react'
+
+export function TablerRoute(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" { ...props }>
+      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M3 19a2 2 0 1 0 4 0a2 2 0 0 0-4 0M19 7a2 2 0 1 0 0-4a2 2 0 0 0 0 4m-8 12h5.5a3.5 3.5 0 0 0 0-7h-8a3.5 3.5 0 0 1 0-7H13"></path>
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/components/Icon/TablerWaveSine.tsx b/components/Icon/TablerWaveSine.tsx
new file mode 100644
index 0000000..6e81dc1
--- /dev/null
+++ b/components/Icon/TablerWaveSine.tsx
@@ -0,0 +1,10 @@
+import { SVGProps } from 'react'
+
+export function TablerWaveSine(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" { ...props }>
+      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M21 12h-2c-.894 0-1.662-.857-1.761-2c-.296-3.45-.749-6-2.749-6s-2.5 3.582-2.5 8s-.5 8-2.5 8s-2.452-2.547-2.749-6c-.1-1.147-.867-2-1.763-2h-2"></path>
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e662f46..04cad2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ham-set",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ham-set",
-      "version": "0.2.0",
+      "version": "0.3.2",
       "dependencies": {
         "@douyinfe/semi-icons": "^2.54.1",
         "@douyinfe/semi-illustrations": "^2.54.1",