|
|
@@ -0,0 +1,890 @@
|
|
|
+import { PageContainer, Switch, Text, View, Image } from '@tarojs/components'
|
|
|
+import './DayNightCard.scss'
|
|
|
+import { ColorType } from '@/context/themes/color'
|
|
|
+import { useEffect, useState } from 'react'
|
|
|
+import Box from '@/components/layout/Box'
|
|
|
+import Taro, { useDidShow } from '@tarojs/taro'
|
|
|
+import { clearLocation, getPerm, latestLocation, uploadPerm } from '@/services/user'
|
|
|
+import { useDispatch, useSelector } from 'react-redux'
|
|
|
+import { useTranslation } from 'react-i18next'
|
|
|
+import { TimeFormatter } from '@/utils/time_format'
|
|
|
+import { systemLocation } from '@/services/common'
|
|
|
+import { setDayRingData, showDay } from '@/store/day'
|
|
|
+import { setNightRingData, showNight, updateMember } from '@/store/night'
|
|
|
+import Modal from '@/components/layout/Modal.weapp'
|
|
|
+import { getTimezone, rpxToPx } from '@/utils/tools'
|
|
|
+import { jumpPage } from '@/features/trackTimeDuration/hooks/Common'
|
|
|
+import DayNightDetailPopup from './DayNightDetailPopup'
|
|
|
+import '@/utils/ring_card.scss';
|
|
|
+import { IconNight, IconSunrise, IconSunset } from '@/components/basic/Icons'
|
|
|
+import DayNightRing from './DayNightRing'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import DayNightStatus from './DayNightStatus'
|
|
|
+import showAlert from '@/components/basic/Alert'
|
|
|
+// import checkLocation from '@/utils/native_permission_check'
|
|
|
+
|
|
|
+let useNavigation;
|
|
|
+let Linking;
|
|
|
+if (process.env.TARO_ENV == 'rn') {
|
|
|
+ useNavigation = require("@react-navigation/native").useNavigation
|
|
|
+ Linking = require('react-native').Linking;
|
|
|
+}
|
|
|
+
|
|
|
+let locationDetail;
|
|
|
+
|
|
|
+let sunriseA = new Date()
|
|
|
+sunriseA.setHours(6)
|
|
|
+sunriseA.setMinutes(0)
|
|
|
+sunriseA.setSeconds(0)
|
|
|
+sunriseA.setMilliseconds(0)
|
|
|
+const sunsetA = new Date()
|
|
|
+sunsetA.setHours(18)
|
|
|
+sunsetA.setMinutes(0)
|
|
|
+sunsetA.setSeconds(0)
|
|
|
+sunsetA.setMilliseconds(0)
|
|
|
+
|
|
|
+const utc = require('dayjs/plugin/utc')
|
|
|
+const timezone = require('dayjs/plugin/timezone')
|
|
|
+var advanced = require("dayjs/plugin/advancedFormat")
|
|
|
+
|
|
|
+dayjs.extend(utc)
|
|
|
+dayjs.extend(timezone)
|
|
|
+dayjs.extend(advanced)
|
|
|
+
|
|
|
+
|
|
|
+let noTimestampData = false;
|
|
|
+export default function DayNightCard(props: { isNight: boolean, count: number,authInfo:any,refresh:Function }) {
|
|
|
+ const user = useSelector((state: any) => state.user);
|
|
|
+ const dayStore = useSelector((state: any) => state.day);
|
|
|
+ const nightStore = useSelector((state: any) => state.night);
|
|
|
+ const [authInfo, setAuthInfo] = useState(props.authInfo)
|
|
|
+
|
|
|
+ const [sunriseDate, setSunriseDate] = useState<any>(sunriseA)
|
|
|
+ const [sunsetDate, setSunsetDate] = useState<any>(sunsetA)
|
|
|
+
|
|
|
+
|
|
|
+ const [showDetailModal, setShowDetailModal] = useState(false)
|
|
|
+ const [showDetailPopup, setShowDetailPopup] = useState(false)
|
|
|
+
|
|
|
+ const [nightDate, setNightDate] = useState(new Date())
|
|
|
+ const [dayDate, setDayDate] = useState(new Date())
|
|
|
+ const dispatch = useDispatch();
|
|
|
+ const { t } = useTranslation()
|
|
|
+ const isMember = true;
|
|
|
+ let navigation;
|
|
|
+ if (useNavigation) {
|
|
|
+ navigation = useNavigation()
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (user.isLogin) {
|
|
|
+ } else {
|
|
|
+ setSunriseDate(sunriseA)
|
|
|
+ setSunsetDate(sunsetA)
|
|
|
+
|
|
|
+ dispatch(setDayRingData({
|
|
|
+ date: new Date().getTime(),
|
|
|
+ sunrise: '06:00',
|
|
|
+ sunset: '18:00'
|
|
|
+ }))
|
|
|
+ dispatch(setNightRingData({
|
|
|
+ date: new Date().getTime(),
|
|
|
+ sunrise: '06:00',
|
|
|
+ sunset: '18:00'
|
|
|
+ }))
|
|
|
+
|
|
|
+ setAuthInfo(null)
|
|
|
+ updateUnloginData()
|
|
|
+ }
|
|
|
+ }, [user.isLogin])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ setAuthInfo(props.authInfo)
|
|
|
+ }, [props.authInfo])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (locationDetail)
|
|
|
+ updateDate(locationDetail)
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (locationDetail) {
|
|
|
+ var detail: any = locationDetail
|
|
|
+ var now = new Date()
|
|
|
+ if (now.getHours() == 0 && now.getMinutes() == 0 && now.getSeconds() == 0) {
|
|
|
+ detail.daylights.splice(0, 1)
|
|
|
+ }
|
|
|
+ locationDetail = detail
|
|
|
+
|
|
|
+ if (detail && (detail as any).daylights) {
|
|
|
+ (detail as any).daylights.map(item => {
|
|
|
+ if (noTimestampData) {
|
|
|
+ item.sunrise_ts = new Date(item.date + 'T' + item.sunrise + ':00').getTime()
|
|
|
+ item.sunset_ts = new Date(item.date + 'T' + item.sunset + ':00').getTime()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ updateDate(detail)
|
|
|
+ }
|
|
|
+ }, [props.count])
|
|
|
+
|
|
|
+ useDidShow(() => {
|
|
|
+ if (!user.isLogin) {
|
|
|
+ Taro.setStorage({
|
|
|
+ key: 'showNightRing',
|
|
|
+ data: false
|
|
|
+ })
|
|
|
+ Taro.setStorage({
|
|
|
+ key: 'showDayRing',
|
|
|
+ data: false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ function updateDate(data) {
|
|
|
+ var today = new Date()
|
|
|
+ if (user.isLogin && authInfo && isMember && data && data.daylights && data.daylights.length > 0) {
|
|
|
+ // var sunriseObj,sunsetObj;
|
|
|
+ var list = data.daylights
|
|
|
+ for (var i = 0; i < (list.length - 1); i++) {
|
|
|
+ //夜间
|
|
|
+ if (list[i].sunset_ts < today.getTime() && list[i + 1].sunrise_ts > today.getTime()) {
|
|
|
+ if (props.isNight) {
|
|
|
+ global.nightObj = {
|
|
|
+ is_polar_night: list[i].is_polar_night,
|
|
|
+ sunrise: {
|
|
|
+ timestamp: list[i + 1].sunrise_ts,
|
|
|
+ time: list[i + 1].sunrise
|
|
|
+ },
|
|
|
+ sunset: {
|
|
|
+ timestamp: list[i].sunset_ts,
|
|
|
+ time: list[i].sunset
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ global.dayObj = {
|
|
|
+ is_polar_day: list[i + 1].is_polar_day,
|
|
|
+ sunrise: {
|
|
|
+ timestamp: list[i + 1].sunrise_ts,
|
|
|
+ time: list[i + 1].sunrise
|
|
|
+ },
|
|
|
+ sunset: {
|
|
|
+ timestamp: list[i + 1].sunset_ts,
|
|
|
+ time: list[i + 1].sunset
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //白天
|
|
|
+ else if (list[i].sunrise_ts < today.getTime() && list[i].sunset_ts > today.getTime()) {
|
|
|
+ if (props.isNight) {
|
|
|
+ global.nightObj = {
|
|
|
+ is_polar_night: list[i].is_polar_night,
|
|
|
+ sunrise: {
|
|
|
+ timestamp: list[i + 1].sunrise_ts,
|
|
|
+ time: list[i + 1].sunrise
|
|
|
+ },
|
|
|
+ sunset: {
|
|
|
+ timestamp: list[i].sunset_ts,
|
|
|
+ time: list[i].sunset
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ global.dayObj = {
|
|
|
+ is_polar_day: list[i].is_polar_day,
|
|
|
+ sunrise: {
|
|
|
+ timestamp: list[i].sunrise_ts,
|
|
|
+ time: list[i].sunrise
|
|
|
+ },
|
|
|
+ sunset: {
|
|
|
+ timestamp: list[i].sunset_ts,
|
|
|
+ time: list[i].sunset
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ locationDetail = null
|
|
|
+ setAuthInfo(null)
|
|
|
+ dispatch(updateMember({ isMember: isMember, gpsInfo: null }))
|
|
|
+
|
|
|
+ dispatch(setDayRingData({
|
|
|
+ date: sunriseDate,
|
|
|
+ sunrise: '06:00',
|
|
|
+ sunset: '18:00'
|
|
|
+ }))
|
|
|
+ dispatch(setNightRingData({
|
|
|
+ date: sunsetDate,
|
|
|
+ sunrise: '06:00',
|
|
|
+ sunset: '18:00'
|
|
|
+ }))
|
|
|
+ updateUnloginData()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateUnloginData() {
|
|
|
+ var now = new Date()
|
|
|
+ var sunriseT = 0
|
|
|
+ var sunsetT = 0
|
|
|
+ var sunriseTDay = 0
|
|
|
+ var sunsetTDay = 0
|
|
|
+ if (now.getHours() < 6) {
|
|
|
+ var temp1 = new Date(now.getTime() - 24 * 3600 * 1000)
|
|
|
+ temp1.setHours(18)
|
|
|
+ temp1.setMinutes(0)
|
|
|
+ temp1.setSeconds(0)
|
|
|
+ temp1.setMilliseconds(0)
|
|
|
+ sunsetT = temp1.getTime()
|
|
|
+ sunriseT = sunsetT + 12 * 3600 * 1000
|
|
|
+ sunriseTDay = sunriseT
|
|
|
+ sunsetTDay = sunriseTDay + 12 * 3600 * 1000
|
|
|
+ }
|
|
|
+ else if (now.getHours() < 18) {
|
|
|
+ var temp1 = new Date()
|
|
|
+ temp1.setHours(6)
|
|
|
+ temp1.setMinutes(0)
|
|
|
+ temp1.setSeconds(0)
|
|
|
+ temp1.setMilliseconds(0)
|
|
|
+
|
|
|
+ sunriseTDay = temp1.getTime()
|
|
|
+ sunsetTDay = sunriseTDay + 12 * 3600 * 1000
|
|
|
+ sunsetT = sunsetTDay
|
|
|
+ sunriseT = sunsetT + 12 * 3600 * 1000
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var temp1 = new Date()
|
|
|
+ temp1.setHours(18)
|
|
|
+ temp1.setMinutes(0)
|
|
|
+ temp1.setSeconds(0)
|
|
|
+ temp1.setMilliseconds(0)
|
|
|
+ sunsetT = temp1.getTime()
|
|
|
+ sunriseT = sunsetT + 12 * 3600 * 1000
|
|
|
+ sunriseTDay = sunriseT
|
|
|
+ sunsetTDay = sunriseTDay + 12 * 3600 * 1000
|
|
|
+ }
|
|
|
+ global.nightObj = {
|
|
|
+ sunrise: {
|
|
|
+ timestamp: sunriseT,
|
|
|
+ time: '06:00'
|
|
|
+ },
|
|
|
+ sunset: {
|
|
|
+ timestamp: sunsetT,
|
|
|
+ time: '18:00'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ global.dayObj = {
|
|
|
+ sunrise: {
|
|
|
+ timestamp: sunriseTDay,
|
|
|
+ time: '06:00'
|
|
|
+ },
|
|
|
+ sunset: {
|
|
|
+ timestamp: sunsetTDay,
|
|
|
+ time: '18:00'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function tapCard(e) {
|
|
|
+ if (!user.isLogin) {
|
|
|
+ jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ setShowDetailPopup(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function auth(e?: any) {
|
|
|
+ if (e && process.env.TARO_ENV == 'weapp') {
|
|
|
+ e.stopPropagation()
|
|
|
+ }
|
|
|
+ var today = new Date()
|
|
|
+ var yesterday = new Date(today.getTime() - 24 * 3600 * 1000)
|
|
|
+ var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000 * 5)
|
|
|
+ var strYesterday = `${yesterday.getFullYear()}-${TimeFormatter.padZero(yesterday.getMonth() + 1)}-${TimeFormatter.padZero(yesterday.getDate())}`
|
|
|
+ var strTomorrow = `${tomorrow.getFullYear()}-${TimeFormatter.padZero(tomorrow.getMonth() + 1)}-${TimeFormatter.padZero(tomorrow.getDate())}`
|
|
|
+
|
|
|
+ if (process.env.TARO_ENV == 'rn') {
|
|
|
+ Taro.getLocation({
|
|
|
+ success(res) {
|
|
|
+ systemLocation({
|
|
|
+ lat: res.latitude,
|
|
|
+ lng: res.longitude,
|
|
|
+ date_start: strYesterday,
|
|
|
+ date_end: strTomorrow,
|
|
|
+ coordinate_system_standard: 'WGS-84'
|
|
|
+ }).then(data => {
|
|
|
+ noTimestampData = false
|
|
|
+ console.log('get Location', data)
|
|
|
+ updateDate(data);
|
|
|
+ locationDetail = data;
|
|
|
+ global.locationDetail = locationDetail
|
|
|
+ setAuthInfo(data as any)
|
|
|
+ Taro.setStorage({
|
|
|
+ key: 'gps',
|
|
|
+ data: JSON.stringify(data as any)
|
|
|
+ })
|
|
|
+ dispatch(updateMember({ isMember: isMember, gpsInfo: (data as any) }))
|
|
|
+ showRing()
|
|
|
+ if (Taro.getSystemInfoSync().platform == 'android' && process.env.TARO_ENV == 'rn') {
|
|
|
+ var ToastAndroid = require('react-native').ToastAndroid;
|
|
|
+ ToastAndroid.show(t('feature.day_night.location_updated'), ToastAndroid.LONG);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ Taro.showToast({
|
|
|
+ title: t('feature.day_night.location_updated'),
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail(res) {
|
|
|
+ if (res.errMsg == 'Permissions denied!') {
|
|
|
+ showAlert({
|
|
|
+ title: t('feature.auth_sys.location_title'),
|
|
|
+ content: t('feature.auth_sys.location_desc'),
|
|
|
+ showCancel: true,
|
|
|
+ cancelText: t('feature.auth_sys.location_cancel'),
|
|
|
+ confirmText: t('feature.auth_sys.location_confirm'),
|
|
|
+ confirm: () => {
|
|
|
+ Linking.openURL('app-settings:')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (Taro.getSystemInfoSync().platform == 'android' && process.env.TARO_ENV == 'rn') {
|
|
|
+ var ToastAndroid = require('react-native').ToastAndroid;
|
|
|
+ ToastAndroid.show(t('feature.day_night.location_failed'), ToastAndroid.LONG);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ Taro.showToast({
|
|
|
+ title: t('feature.day_night.location_failed'),
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(res)
|
|
|
+ showRing()
|
|
|
+ },
|
|
|
+ complete(res) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ Taro.chooseLocation({
|
|
|
+ latitude: authInfo && authInfo.lat ? authInfo.lat : undefined,
|
|
|
+ longitude: authInfo && authInfo.lat ? authInfo.lng : undefined,
|
|
|
+ success: function (res) {
|
|
|
+
|
|
|
+ systemLocation({
|
|
|
+ lat: res.latitude,
|
|
|
+ lng: res.longitude,
|
|
|
+ name: res.name,
|
|
|
+ address: res.address,
|
|
|
+ date_start: strYesterday,
|
|
|
+ date_end: strTomorrow,
|
|
|
+ coordinate_system_standard: 'GCJ-02'
|
|
|
+ }).then(data => {
|
|
|
+ noTimestampData = false;
|
|
|
+ updateDate(data);
|
|
|
+ locationDetail = data;
|
|
|
+ global.locationDetail = locationDetail
|
|
|
+ setAuthInfo(data as any)
|
|
|
+ Taro.setStorage({
|
|
|
+ key: 'gps',
|
|
|
+ data: JSON.stringify(data as any)
|
|
|
+ })
|
|
|
+ showRing()
|
|
|
+ dispatch(updateMember({ isMember: isMember, gpsInfo: (data as any) }))
|
|
|
+
|
|
|
+ if (global.swiperDayNightRefresh) {
|
|
|
+ global.swiperDayNightRefresh()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ fail(res) {
|
|
|
+ Taro.showToast({
|
|
|
+ title: '位置修改失败!\n请重新选择就近位置',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ showRing()
|
|
|
+ },
|
|
|
+ complete(res) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function showRing() {
|
|
|
+ dispatch(showNight(true))
|
|
|
+ dispatch(showDay(true))
|
|
|
+ Taro.setStorage({
|
|
|
+ key: 'showNightRing',
|
|
|
+ data: true
|
|
|
+ })
|
|
|
+ Taro.setStorage({
|
|
|
+ key: 'showDayRing',
|
|
|
+ data: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function getLocation() {
|
|
|
+ if (!authInfo) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return `${getCity()} | ${Math.abs(parseInt(authInfo.lat))}°${parseInt(authInfo.lat) < 0 ? 'S' : 'N'} ${Math.abs(parseInt(authInfo.lng))}°${parseInt(authInfo.lng) < 0 ? 'W' : 'E'}`
|
|
|
+ }
|
|
|
+
|
|
|
+ function getCity() {
|
|
|
+ var city = ''
|
|
|
+ if (!authInfo) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ if ((authInfo as any).address) {
|
|
|
+ if ((authInfo as any).address.city.length > 0) {
|
|
|
+ city = (authInfo as any).address.city
|
|
|
+ }
|
|
|
+ else if ((authInfo as any).address.province.length > 0) {
|
|
|
+ city = (authInfo as any).address.province
|
|
|
+ }
|
|
|
+ else if ((authInfo as any).address.country.length > 0) {
|
|
|
+ city = (authInfo as any).address.country
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ city = t('feature.track_time_duration.third_ring.unknown')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ city = t('feature.track_time_duration.third_ring.unknown')
|
|
|
+ }
|
|
|
+ return city
|
|
|
+ }
|
|
|
+
|
|
|
+ function clearData() {
|
|
|
+ Taro.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确认清除位置数据?',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ clearLocation().then(res => {
|
|
|
+ props.refresh()
|
|
|
+ })
|
|
|
+ } else if (res.cancel) {
|
|
|
+ console.log('用户点击取消')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function detailModalContent() {
|
|
|
+ var timezone = getTimezone()
|
|
|
+ if (!authInfo || !(authInfo as any).lat) {
|
|
|
+ return <View style={{ height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', width: rpxToPx(750) }}>
|
|
|
+ <Text>暂无位置信息</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ return <View style={{ display: 'flex', flexDirection: 'column' }}>
|
|
|
+ {
|
|
|
+ <View className="cell_bg">
|
|
|
+ {
|
|
|
+ <View className="cell_full">
|
|
|
+ <Text className="cell_title">{t('feature.track_time_duration.third_ring.location')}</Text>
|
|
|
+ <Text className="cell_value">{authInfo ? getLocation() : t('feature.track_time_duration.third_ring.enter')}</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ <View className="cell_line" style={{ height: 1 }} />
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ <View className="cell_full" >
|
|
|
+ <Text className="cell_title">{t('feature.track_time_duration.third_ring.latitude')}</Text>
|
|
|
+
|
|
|
+ <Text className="cell_value">{(authInfo as any).lat}</Text>
|
|
|
+
|
|
|
+
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ <View className="cell_line" style={{ height: 1 }} />
|
|
|
+
|
|
|
+ <View className="cell_full">
|
|
|
+ <Text className="cell_title" >{t('feature.track_time_duration.third_ring.longitude')}</Text>
|
|
|
+
|
|
|
+ <Text className="cell_value">{(authInfo as any).lng}</Text>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className="cell_line" style={{ height: 1 }} />
|
|
|
+ <View className="cell_full">
|
|
|
+ <Text className="cell_title">{t('feature.track_time_duration.third_ring.timezone')}</Text>
|
|
|
+
|
|
|
+ <Text className="cell_value">{timezone}</Text>
|
|
|
+
|
|
|
+ </View>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </View>
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ <Text onClick={() => {
|
|
|
+ clearData()
|
|
|
+ setShowDetailModal(false)
|
|
|
+ }} style={{ width: '100%', textAlign: 'center', marginBottom: 50, color: '#fff', marginTop: 20 }}>清除位置</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function modalContent2() {
|
|
|
+ return <Modal
|
|
|
+ testInfo={null}
|
|
|
+ dismiss={() => {
|
|
|
+ setShowDetailModal(false)
|
|
|
+ }}
|
|
|
+ confirm={() => { }}>
|
|
|
+ {
|
|
|
+ detailModalContent()
|
|
|
+ }
|
|
|
+ </Modal>
|
|
|
+ }
|
|
|
+
|
|
|
+ function modalContent() {
|
|
|
+ return <Modal
|
|
|
+ testInfo={null}
|
|
|
+ dismiss={() => {
|
|
|
+ setShowDetailPopup(false)
|
|
|
+ }}
|
|
|
+ confirm={() => { }}>
|
|
|
+ <DayNightDetailPopup
|
|
|
+ isNight={props.isNight}
|
|
|
+ authInfo={authInfo}
|
|
|
+ nightDate={nightDate}
|
|
|
+ dayDate={dayDate}
|
|
|
+ updateLocation={auth}
|
|
|
+ onClose={() => { setShowDetailPopup(false) }}
|
|
|
+ />
|
|
|
+ </Modal>
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function longClick() {
|
|
|
+ if (user.isLogin && user.test_user && authInfo)
|
|
|
+ setShowDetailModal(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function showLocationAlert(e) {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ e.stopPropagation()
|
|
|
+ }
|
|
|
+ tapCard(e)
|
|
|
+ }
|
|
|
+
|
|
|
+ function nightRing() {
|
|
|
+ return <DayNightRing
|
|
|
+ isNight={true}
|
|
|
+ isThirdRing={false}
|
|
|
+ canvasId={'day_night_card_night_ring'}
|
|
|
+ authInfo={authInfo}
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ function localNow(now: Date) {
|
|
|
+ if (authInfo && authInfo.timezone) {
|
|
|
+ return new Date(TimeFormatter.transferTimestamp(now.getTime(), authInfo.timezone.gmt))
|
|
|
+ }
|
|
|
+ return now
|
|
|
+ }
|
|
|
+
|
|
|
+ function dayRing() {
|
|
|
+ return <DayNightRing
|
|
|
+ isNight={false}
|
|
|
+ isThirdRing={false}
|
|
|
+ canvasId={'day_night_card_big_day'}
|
|
|
+ authInfo={authInfo}
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ function getSunsetDuration() {
|
|
|
+
|
|
|
+ if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
|
|
|
+ global.sunsetDuration = TimeFormatter.durationFormate(authInfo.night_completed.sunrise_ts, authInfo.night_completed.sunset_ts, true)
|
|
|
+ return TimeFormatter.durationFormate(authInfo.night_completed.sunrise_ts, authInfo.night_completed.sunset_ts, true)
|
|
|
+ }
|
|
|
+
|
|
|
+ var now = new Date()
|
|
|
+ if (authInfo && global.nightObj) {
|
|
|
+ var nightObj = global.nightObj
|
|
|
+ if (nightObj.sunset.timestamp < now.getTime() && nightObj.sunrise.timestamp > now.getTime()) {
|
|
|
+ global.sunsetDuration = TimeFormatter.countdown(nightObj.sunset.timestamp, now.getTime(), true)
|
|
|
+ return TimeFormatter.countdown(nightObj.sunset.timestamp, now.getTime(), true)
|
|
|
+ }
|
|
|
+ global.sunsetDuration = TimeFormatter.calculateTimeDifference(nightObj.sunset.timestamp, nightObj.sunrise.timestamp);
|
|
|
+ return TimeFormatter.calculateTimeDifference(nightObj.sunset.timestamp, nightObj.sunrise.timestamp);
|
|
|
+ }
|
|
|
+
|
|
|
+ now = localNow(now)
|
|
|
+ if (props.isNight && sunsetDate) {
|
|
|
+ if (now.getTime() > sunsetDate.getTime()) {
|
|
|
+ global.sunsetDuration = TimeFormatter.countdown(sunsetDate.getTime(), now.getTime(), true)
|
|
|
+ return TimeFormatter.countdown(sunsetDate.getTime(), now.getTime(), true)
|
|
|
+ }
|
|
|
+ // return TimeFormatter.countdown(sunsetDate.getTime())
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ var sunRiseObj = nightStore.nightRingSunrise
|
|
|
+ var sunSetObj = nightStore.nightRingSunset
|
|
|
+ var sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
|
|
|
+ var sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
|
|
|
+ if (sunSetObj.indexOf('PM') != -1) {
|
|
|
+ sunSet += 12 * 60
|
|
|
+ }
|
|
|
+
|
|
|
+ var duration = (sunRise - sunSet) * 60 * 1000
|
|
|
+ global.sunsetDuration = TimeFormatter.calculateTimeDifference(now.getTime(), now.getTime() + duration);
|
|
|
+ return TimeFormatter.calculateTimeDifference(now.getTime(), now.getTime() + duration);
|
|
|
+ }
|
|
|
+
|
|
|
+ function getSunriseDuration() {
|
|
|
+ if (authInfo && authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
|
|
|
+ global.sunriseDuration = TimeFormatter.durationFormate(authInfo.day_completed.sunrise_ts, authInfo.day_completed.sunset_ts, true)
|
|
|
+ return TimeFormatter.durationFormate(authInfo.day_completed.sunrise_ts, authInfo.day_completed.sunset_ts, true)
|
|
|
+ }
|
|
|
+
|
|
|
+ var now = new Date()
|
|
|
+ var now = new Date()
|
|
|
+ if (global.dayObj) {
|
|
|
+ var dayObj = global.dayObj
|
|
|
+ if (dayObj.sunrise.timestamp < now.getTime() && dayObj.sunset.timestamp > now.getTime()) {
|
|
|
+ global.sunriseDuration = TimeFormatter.countdown(dayObj.sunrise.timestamp, now.getTime(), true)
|
|
|
+ return TimeFormatter.countdown(dayObj.sunrise.timestamp, now.getTime(), true)
|
|
|
+ }
|
|
|
+ global.sunriseDuration = TimeFormatter.calculateTimeDifference(dayObj.sunrise.timestamp, dayObj.sunset.timestamp, true);
|
|
|
+ return TimeFormatter.calculateTimeDifference(dayObj.sunrise.timestamp, dayObj.sunset.timestamp, true);
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ function completedDate() {
|
|
|
+ if (props.isNight) {
|
|
|
+ if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
|
|
|
+ if (localNow(new Date()).getTime() != new Date().getTime()) {
|
|
|
+ return TimeFormatter.getMonthAndDayByTimestamp(authInfo.night_completed.sunrise_ts, true)
|
|
|
+ }
|
|
|
+ return TimeFormatter.dateDescription(authInfo.night_completed.sunrise_ts, true)
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ if (authInfo && authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
|
|
|
+ if (localNow(new Date()).getTime() != new Date().getTime()) {
|
|
|
+ return TimeFormatter.getMonthAndDayByTimestamp(authInfo.day_completed.sunset_ts, true)
|
|
|
+ }
|
|
|
+ return TimeFormatter.dateDescription(authInfo.day_completed.sunset_ts, true)
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ function showArrow() {
|
|
|
+ if (props.isNight) {
|
|
|
+ if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (authInfo && authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ function currentStatus() {
|
|
|
+ if (showArrow()) {
|
|
|
+ if (props.isNight) {
|
|
|
+ if (authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
|
|
|
+ return t('feature.day_night.last_updated')
|
|
|
+ }
|
|
|
+ return t('feature.day_night.ended')
|
|
|
+ }
|
|
|
+ return t('feature.day_night.last_updated')
|
|
|
+ }
|
|
|
+ var strTime = props.isNight ? getSunsetDuration() : getSunriseDuration()
|
|
|
+ return (strTime.indexOf('小时') != -1 || strTime.indexOf('分钟') != -1) ? t('feature.day_night.upcoming') : t('feature.day_night.in_real_time')
|
|
|
+ }
|
|
|
+
|
|
|
+ function footerDesc() {
|
|
|
+ var now = new Date()
|
|
|
+ if (props.isNight) {
|
|
|
+ if (global.nightObj) {
|
|
|
+ if (now.getTime() < global.nightObj.sunset.timestamp) {
|
|
|
+ return TimeFormatter.countdown(global.nightObj.sunset.timestamp, now.getTime(), true)
|
|
|
+ }
|
|
|
+ return TimeFormatter.countdown(global.nightObj.sunrise.timestamp, now.getTime(), true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (global.dayObj) {
|
|
|
+ if (now.getTime() < global.dayObj.sunrise.timestamp) {
|
|
|
+ return TimeFormatter.countdown(global.dayObj.sunrise.timestamp, now.getTime(), true)
|
|
|
+ }
|
|
|
+ return TimeFormatter.countdown(global.dayObj.sunset.timestamp, now.getTime(), true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ function footerIcon() {
|
|
|
+ var now = new Date()
|
|
|
+ if (props.isNight) {
|
|
|
+ if (now.getTime() < sunsetDate.getTime()) {
|
|
|
+ return <IconSunset color={ColorType.white + '66'} width={rpxToPx(28)} />
|
|
|
+
|
|
|
+ }
|
|
|
+ return <IconSunrise color={ColorType.white + '66'} width={rpxToPx(28)} />
|
|
|
+ }
|
|
|
+
|
|
|
+ if (now.getTime() > sunriseDate.getTime() && now.getTime() < sunsetDate.getTime()) {
|
|
|
+
|
|
|
+ return <IconSunset color={ColorType.white + '66'} width={rpxToPx(28)} />
|
|
|
+ }
|
|
|
+ return <IconSunrise color={ColorType.white + '66'} width={rpxToPx(28)} />
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function currentTime() {
|
|
|
+ var now = new Date()
|
|
|
+ if (authInfo && authInfo.timezone) {
|
|
|
+ var t1 = TimeFormatter.tzLocalTime(now.getTime(),authInfo.timezone.id)////dayjs(now.getTime()).tz(authInfo.timezone.id)
|
|
|
+ if (now.getHours() == t1.hour() && now.getMinutes() == t1.minute()) {
|
|
|
+ return <View />
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var now2 = localNow(now)
|
|
|
+ if (now.getTime() == now2.getTime()) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ let offset = 0;
|
|
|
+ if (authInfo && authInfo.timezone) {
|
|
|
+ var current1 = dayjs()
|
|
|
+ var current = TimeFormatter.tzLocalTime(now.getTime(),authInfo.timezone.id)//dayjs().tz(authInfo.timezone.id)
|
|
|
+ offset = current.date() * 24 * 60 + current.hour() * 60 + current.minute() - current1.date() * 24 * 60 - current1.hour() * 60 - current1.minute()
|
|
|
+ }
|
|
|
+ var hour = Math.floor(Math.abs(offset) / 60)
|
|
|
+ var minute = Math.abs(offset) % 60
|
|
|
+ var time = ''
|
|
|
+ if (global.language == 'en') {
|
|
|
+ time = `${hour} h`
|
|
|
+ if (minute > 0) {
|
|
|
+ time += ` ${minute} m`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ time = `${hour}小时`
|
|
|
+ if (minute > 0) {
|
|
|
+ time += `${minute}分钟`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // const ccc = dayjs().tz('Arctic/Longyearbyen').format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ // const current = dayjs().utcOffset(offset).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ var current;
|
|
|
+ if (authInfo && authInfo.timezone) {
|
|
|
+ current = TimeFormatter.tzTimeFormateLocalTime(new Date().getTime(),authInfo.timezone.id,'HH:mm')//dayjs().tz(authInfo.timezone.id).format('HH:mm')
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ current = dayjs().format('HH:mm')
|
|
|
+ }
|
|
|
+
|
|
|
+ return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
|
+ <Text className='ring_city' numberOfLines={1}>{getCity()}</Text>
|
|
|
+ <Text className='ring_clock' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{current}</Text>
|
|
|
+ <Text className='ring_timezone'>{
|
|
|
+ offset > 0 ? t('feature.day_night.ahead_desc', { time: time }) : t('feature.day_night.behind_desc', { time: time })
|
|
|
+ }</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ function cardContent() {
|
|
|
+ return <View style={{ position: 'relative' }}>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'column', zIndex: 1 }} onClick={showLocationAlert} onLongPress={longClick}>
|
|
|
+ <View className="ring_full_container" style={{ paddingBottom: 0 }}>
|
|
|
+ <View style={{
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'row',
|
|
|
+ marginTop: 0,
|
|
|
+ marginBottom: 0,
|
|
|
+ padding: 0,
|
|
|
+ alignItems: 'center'
|
|
|
+ }}>
|
|
|
+ <View style={{ display: 'flex', position: 'relative' }}>
|
|
|
+ {
|
|
|
+ props.isNight ? nightRing() : dayRing()
|
|
|
+ }
|
|
|
+ <View style={{ color: '#fff', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center', display: 'flex' }}>{currentTime()}</View>
|
|
|
+ </View>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'column', flexShrink: 0, flex: 1, marginLeft: rpxToPx(52) }}>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
+ <Text className='ring_card_duration_title'>{props.isNight ? t('feature.common.overnight') : t('feature.common.day')}</Text>
|
|
|
+ {
|
|
|
+ !props.isNight && global.dayObj && global.dayObj.is_polar_day && <View className='polar_tag'>{t('feature.day_night.polar_day')}</View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ props.isNight && global.nightObj && global.nightObj.is_polar_night && <View className='polar_tag'>{t('feature.day_night.polar_night')}</View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <Text className='ring_card_duration_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? getSunsetDuration() : getSunriseDuration()}</Text>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className='day_card_header'>
|
|
|
+ {
|
|
|
+ props.isNight && global.nightObj && <DayNightStatus
|
|
|
+ authInfo={authInfo}
|
|
|
+ isNight={props.isNight}
|
|
|
+ sunrise_ts={global.nightObj.sunrise.timestamp}
|
|
|
+ sunset_ts={global.nightObj.sunset.timestamp}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ !props.isNight && global.dayObj && <DayNightStatus
|
|
|
+ authInfo={authInfo}
|
|
|
+ isNight={props.isNight}
|
|
|
+ sunrise_ts={global.dayObj.sunrise.timestamp}
|
|
|
+ sunset_ts={global.dayObj.sunset.timestamp}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <View className='day_night_card_footer1' style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ !showArrow() && <View className='footer_sun_icon_bg' style={{ backgroundColor: global.isDebug ? 'pink' : 'transparent' }}>
|
|
|
+ {
|
|
|
+ footerIcon()
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ <Text className='footer_desc_text' style={{ backgroundColor: global.isDebug ? 'black' : 'transparent' }}>{showArrow() ? completedDate() : footerDesc()}</Text>
|
|
|
+ <Image className="card_arrowaaa" style={{ backgroundColor: global.isDebug ? 'blue' : 'transparent' }} src={require('@/assets/images/arrow3.png')} />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ {
|
|
|
+ showDetailPopup && modalContent()
|
|
|
+ }
|
|
|
+ {
|
|
|
+ showDetailModal && modalContent2()
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ return process.env.TARO_ENV =='weapp'?<Box>{cardContent()}</Box>:
|
|
|
+ <View className='rn_card_bg'>{cardContent()}</View>
|
|
|
+}
|
