AlarmConfig.js 6.61 KB
import React, { Component } from 'react';
import { View, Text, StyleSheet,TouchableOpacity,Image } from 'react-native';
import MapView from 'react-native-daummap';
import Postcode from '../Postcode'
import AlarmItem from '../AlarmItem'
import { ScrollView } from 'react-native-gesture-handler';

import Heart from '../../assets/heart_.svg'
import Chat from '../../assets/chat_.svg'
import Home from '../../assets/home.svg'
import QR from '../../assets/qr.svg'
import Alarm from '../../assets/alarm.svg'
import AsyncStorage from '@react-native-community/async-storage'
import { TabRouter } from 'react-navigation';
import {put } from 'axios'
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state = {
        mapLoading:false,
        alarmList:[],
        notice:true,
        allAlarm:false,
    }
    componentDidMount = () => {
        AsyncStorage.getItem("AlarmList",(err,res) => {
            if(res) {
                this.setState({
                    alarmList:JSON.parse(res)
                })
            }
        })
        AsyncStorage.getItem("NoticeAlarm",(err,res) => {
            if(res) {
                this.setState({
                    notice:JSON.parse(res)
                })
            }
        })
    }
    setItem = (e,i) => {
        this.setState((prev) => ({
            alarmList:[...prev.alarmList.slice(0,i),e,...prev.alarmList.slice(i+1,prev.alarmList.length)]
        }))
    }
    HandleAllAlarmOff = () => {
        if(this.state.allAlarm == false) {
            this.setState({
                allAlarm:true
            })
            
        var tem = this.state.alarmList
        if(tem.filter((el,i) => {
            el.alarm = true
            return true
        }).length > 0) {
            AsyncStorage.setItem("AlarmList",JSON.stringify(tem))                    
        }
        this.state.alarmList.filter((e,i) => {
            var temp = e
            temp.alarm = true
            this.setItem(temp,i)
            
        })
        }
        else {
            this.setState({
                allAlarm:false
            })
            
        var tem = this.state.alarmList
        if(tem.filter((el,i) => {
            el.alarm = false
            return true
        }).length > 0) {
            AsyncStorage.setItem("AlarmList",JSON.stringify(tem))                    
        }
        this.state.alarmList.filter((e,i) => {
            var temp = e
            temp.alarm = false
            this.setItem(temp,i)
            
        })
        }
    }
    handleNoticeAlarmOff = () => {
        this.setState((prev) => ({
            notice:!prev.notice
        }),() => {
            
            AsyncStorage.setItem("NoticeAlarm",JSON.stringify(this.state.notice))
        })
    }
    render() {
        return (
            <View style={{backgroundColor:"#BDBCBC",width:"100%",height:"100%"}}>
                
                <View style={{width:"100%",flexDirection:"row",paddingTop:16,paddingBottom:16,paddingLeft:16,backgroundColor:"#615F5F"}}>
                    <TouchableOpacity onPress={() => this.props.navigation.goBack(null)}>
                        <Image source={require('../../assets/back.png')}/>
                    </TouchableOpacity>
                    <Text style={{color:"white",fontSize:16,marginLeft:16}}>
                        알림 설정
                    </Text>
                </View>
                <View style={{marginBottom:8}}>
                    <View style={{flexDirection:"row" }}>
                        <TouchableOpacity onPress={() => this.handleNoticeAlarmOff()} style={{width:"50%",backgroundColor:"white",paddingTop:8.9, paddingBottom:12,}}>
                            <Text style={[{textAlign:"center",borderRightColor:"#615F5F",borderRightWidth:1,color:"#615F5F"}]}>
                                공지사항 알림 
                                
                                {this.state.notice==false?
                                    <Text style={{fontSize:15,fontWeight:"bold",color:"#615F5F"}}>
                                        {" "}off
                                    </Text>
                                    :
                                    <Text style={{fontSize:15,fontWeight:"bold",color:"#FFD63A"}}>
                                        {" "}on
                                    </Text>}
                                
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity  onPress={() => this.HandleAllAlarmOff()}  style={{width:"50%",backgroundColor:"white",paddingTop:8.9, paddingBottom:12}}>
                            <Text style={[{textAlign:"center",color:"#615F5F"}]}>
                                모든 소식 
                                {this.state.allAlarm==false?
                                    <Text style={{fontSize:15,fontWeight:"bold",color:"#615F5F"}}>
                                        {" "}off
                                    </Text>
                                    :
                                    <Text style={{fontSize:15,fontWeight:"bold",color:"#FFD63A"}}>
                                        {" "}on
                                    </Text>}
                            </Text> 
                        </TouchableOpacity>
                    </View>
                </View>
                <ScrollView>
                {this.state.alarmList.map((e,i) => <AlarmItem config={true} item={e} i={i} setItem={this.setItem}/> )}
                </ScrollView>
                
            <View style={{
                shadowColor: "#000",
                shadowOffset: {
                    width: 0,
                    height: 6,
                },
                shadowOpacity: 0.39,
                shadowRadius: 8.30,
                
                elevation: 13,
                flexDirection:"row",justifyContent:"space-between",paddingLeft:24,paddingRight:24,paddingTop:19,paddingBottom:19,width:"100%",position:"absolute",backgroundColor:"white",bottom:0}}>
                <Home onPress={() => this.props.navigation.navigate("Main_")}/>
                <Chat onPress={() => this.props.navigation.navigate("ChatTab")}/>
                <QR onPress={() => this.props.navigation.navigate("QRTab")}/>
                <Heart onPress={() => this.props.navigation.navigate("LikeTab")}/>
                <Alarm onPress={() => this.props.navigation.navigate("AlarmTab")}/>
            </View>
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});