Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import { StatusBar, View, StyleSheet, Image, AsyncStorage, Alert, } from "react-native";
- import { Container, Header, Title, Content, CardItem, Button, Left, Right, Body, Icon, Text, Card, Item, Picker, Thumbnail } from 'native-base';
- import { Col, Row, Grid } from 'react-native-easy-grid';
- import { Dimensions } from "react-native";
- import Footernya from "../../components/Footer";
- import moment from 'moment';
- import timezone from 'moment-timezone';
- import Moment from 'react-moment';
- import GlobalConfig from "../../components/GlobalConfig";
- import 'moment/locale/id';
- class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- dataDasboard: [],
- AbsenMasuk: "00:00:00",
- AbsenKeluar: "00:00:00",
- DateRealtime: new Date()
- };
- this.baseState = this.state;
- }
- static navigationOptions = {
- headerShown: false
- };
- componentDidMount() {
- this.resetState();
- setInterval(() => {
- this.setState({
- DateRealtime: new Date()
- })
- }, 900);
- this._onFocusListener = this.props.navigation.addListener(
- "didFocus",
- payload => {
- this.resetState();
- }
- )
- }
- resetState = () => {
- this.setState(this.baseState);
- AsyncStorage.getItem("dataPegawai").then(rowPegawai => {
- this.setState({
- dataDasboard: JSON.parse(rowPegawai)
- });
- });
- AsyncStorage.getItem("AbsenMasuk").then(rowAbsenMasuk => {
- this.setState({
- AbsenMasuk: JSON.parse(rowAbsenMasuk),
- });
- });
- AsyncStorage.getItem("AbsenKeluar").then(rowAbsenKeluar => {
- this.setState({
- AbsenKeluar: JSON.parse(rowAbsenKeluar),
- });
- });
- }
- // resetState = () => {
- // this.setState(initialState);
- // }
- render() {
- const uri = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGcxfdWbW21mRzk98NIssKFX_ExVo2LGnV4MizqE8gIu60-w01&s";
- const dateToFormat = moment(this.state.DateRealtime).format("dddd, D MMMM YYYY");
- const timeToFormat = moment(this.state.DateRealtime).format("HH:mm:ss");
- const dateNow = moment(this.state.DateRealtime).format("MMMM YYYY");
- const jamMasuk = moment(this.state.dataDasboard.jamKerjaMasuk, "HH:mm:ss").format("HH");
- const menitMasuk = moment(this.state.dataDasboard.jamKerjaMasuk, "HH:mm:ss").format("mm");
- const jamKeluar = moment(this.state.dataDasboard.jamKerjaPulang, "HH:mm:ss").format("HH");
- const menitKeluar = moment(this.state.dataDasboard.jamKerjaPulang, "HH:mm:ss").format("mm");
- const jamMasukAbsen = moment(this.state.AbsenMasuk, "HH:mm:ss").format("HH");
- const menitMasukAbsen = moment(this.state.AbsenMasuk, "HH:mm:ss").format("mm");
- const jamKeluarAbsen = moment(this.state.AbsenKeluar, "HH:mm:ss").format("HH");
- const menitKeluarAbsen = moment(this.state.AbsenKeluar, "HH:mm:ss").format("mm");
- return (
- <Container>
- <StatusBar backgroundColor="#3669CF" />
- <Content>
- <View style={{ backgroundColor: '#3669CF' }}>
- {/* <Text style={{ color: "white", fontSize: 14, marginLeft: 10 }}>Senin, 25 Maret 2020</Text> */}
- {/* <Text style={{ color: "white", fontSize: 14, marginLeft: 10 }}>{this.state.curTime}</Text> */}
- <Grid style={{ marginLeft: 10, marginRight: 10 }}>
- <Col>
- {/* <Text style={{ color: "white", fontSize: 14 }}>
- {moment.locale('id').tz(new Date(), 'Asia/Jakarta').format("dddd, D MMMM YYYY")
- }
- </Text> */}
- <Text tz="Asia/Jakarta" locale="id" interval={1000} style={{ color: "white", fontSize: 14 }}>{dateToFormat}</Text>
- </Col>
- <Col>
- <Text tz="Asia/Jakarta" locale="id" interval={1000} style={{ color: "white", fontSize: 14, textAlign: 'right' }}>
- {timeToFormat}
- </Text>
- </Col>
- </Grid>
- {/* <Text style={{ marginLeft: 10 }}>
- <Text style={{ color: "white", fontSize: 14 }}>
- {moment(new Date()).format("dddd, D MM YYYY")
- }
- </Text>
- <Text style={{ color: "white", fontSize: 14, textAlign: 'left' }}>
- {moment(new Date()).format("hh:mm:ss")
- }
- </Text>
- </Text> */}
- </View>
- <View style={gaya.profile}>
- <Thumbnail large source={{ uri: uri }} style={{ marginTop: 15 }} />
- <Text style={{ color: "white", fontSize: 20, fontWeight: 'bold' }}>{this.state.dataDasboard.NamaPegawai}</Text>
- <Text style={{ color: "white", fontSize: 14, marginBottom: 15 }}>{this.state.dataDasboard.NamaOPD}</Text>
- </View>
- <Card style={gaya.roundedAtasbawah}>
- <CardItem style={gaya.roundedAtasbawah} >
- <Grid>
- <Row>
- <Grid>
- <Row>
- <View style={{
- backgroundColor: "#E3E5E7", borderTopLeftRadius: 10,
- borderTopRightRadius: 10,
- borderBottomLeftRadius: 10,
- borderBottomRightRadius: 10,
- width: "100%", height: "100%",
- justifyContent: 'center',
- alignItems: 'center',
- }}>
- <Text>
- <Text style={{ fontSize: 15, color: "#5E646E" }}>Absensi Bulan </Text>
- <Text style={{ fontWeight: "bold", color: "#3472CD" }}>{dateNow}</Text>
- </Text>
- </View>
- </Row>
- <Row>
- <Col>
- <Card style={gaya.centerVH}>
- <CardItem header style={[gaya.hadirHead, gaya.centerVH]}>
- <Text style={{ color: "white" }}>Hadir</Text>
- </CardItem>
- <CardItem style={[gaya.hadirIsi, gaya.centerVH]}>
- <Text style={{ color: 'white', fontSize: 70 }}>{this.state.dataDasboard.hadir}</Text>
- </CardItem>
- </Card>
- </Col>
- <Col>
- <Card style={gaya.centerVH}>
- <CardItem header style={[gaya.tdkhadirHead, gaya.centerVH]}>
- <Text style={{ color: "white" }}>Tidak Hadir</Text>
- </CardItem>
- <CardItem style={[gaya.tdkhadirIsi, gaya.centerVH]}>
- <Text style={{ color: 'white', fontSize: 70 }}>{this.state.dataDasboard.tidak_hadir}</Text>
- </CardItem>
- </Card>
- </Col>
- </Row>
- </Grid>
- </Row>
- <Row>
- <Grid>
- <Col style={{ width: "55%", height: "100%" }}>
- <Grid>
- <Col style={{ width: "30%", height: "100%", justifyContent: 'center', alignItems: 'center' }}>
- <Image source={require('../../assets/img/jam.png')} style={{ width: 50, height: 50 }} />
- </Col>
- <Col style={{ width: "70%", height: "100%", justifyContent: 'center' }}>
- <Text>Jam Kerja</Text>
- <Text>
- <Text style={gaya.fontJam}>{jamMasuk}</Text>
- <Text>.{menitMasuk}</Text>
- <Text style={gaya.fontJam}> - </Text>
- <Text style={gaya.fontJam}>{jamKeluar}</Text>
- <Text>.{menitKeluar}</Text>
- </Text>
- </Col>
- </Grid>
- </Col>
- <Col style={{ width: "45%", height: "100%", justifyContent: 'center', alignItems: 'center', }}>
- <Button rounded success style={{ height: "30%", width: "100%", marginBottom: 10 }}>
- <Text>
- <Text style={gaya.fontJamPPtipis}>Datang: </Text>
- <Text style={gaya.fontJamPP}>{this.state.AbsenMasuk === null ? "--" : jamMasukAbsen}</Text>
- <Text style={gaya.fontJamPPtipis}>.{this.state.AbsenMasuk === null ? "--" : menitMasukAbsen}</Text>
- </Text>
- </Button>
- <Button rounded warning style={{ height: "30%", width: "100%" }}>
- <Text>
- <Text style={gaya.fontJamPPtipis}>Pulang: </Text>
- <Text style={gaya.fontJamPP}>{this.state.AbsenKeluar === null ? "--" : jamKeluarAbsen}</Text>
- <Text style={gaya.fontJamPPtipis}>.{this.state.AbsenKeluar === null ? "--" : menitKeluarAbsen}</Text>
- </Text>
- </Button>
- </Col>
- </Grid>
- </Row>
- </Grid>
- </CardItem>
- </Card>
- <View style={gaya.centerVH} >
- <Button danger rounded onPress={() => this.props.navigation.navigate("Absensi")} style={{ height: 70 }}>
- <Text>Lakukan Absensi Sekarang</Text>
- </Button>
- </View>
- </Content >
- <Footernya />
- </Container >
- );
- }
- }
- const gaya = StyleSheet.create({
- profile: {
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#3669CF',
- borderBottomLeftRadius: 50,
- borderBottomRightRadius: 50
- },
- roundedAtasbawah: {
- borderTopLeftRadius: 30,
- borderTopRightRadius: 30,
- borderBottomLeftRadius: 30,
- borderBottomRightRadius: 30
- },
- centerVH: {
- justifyContent: 'center',
- alignItems: 'center',
- },
- hadirHead: {
- backgroundColor: '#3669CF',
- height: 20,
- width: "100%"
- },
- hadirIsi: {
- backgroundColor: '#4586EC',
- width: "100%",
- },
- tdkhadirHead: {
- backgroundColor: '#C0392B',
- height: 20,
- width: "100%"
- },
- tdkhadirIsi: {
- backgroundColor: '#E74C3C',
- width: "100%",
- },
- fontJam: {
- fontSize: 20,
- fontWeight: "bold"
- },
- fontJamPP: {
- color: "white",
- fontSize: 20,
- fontWeight: "bold"
- },
- fontJamPPtipis: {
- color: "white"
- }
- });
- export default Home;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement