· 6 years ago · Feb 09, 2020, 10:52 AM
1import * as WebBrowser from "expo-web-browser";
2import { Button, Header, SearchBar } from "react-native-elements";
3import React from "react";
4import {
5 Image,
6 Platform,
7 ScrollView,
8 StyleSheet,
9 Text,
10 Dimensions,
11 AsyncStorage,
12 TouchableOpacity,
13 View,
14 BackHandler,
15 StatusBar
16} from "react-native";
17import Icon from "react-native-vector-icons/AntDesign";
18import ShimmerPlaceHolder from "react-native-shimmer-placeholder";
19import { MonoText } from "../components/StyledText";
20import { LinearGradient } from "expo-linear-gradient";
21import axios from "axios";
22export default class JadwalScreen extends React.Component {
23 constructor() {
24 super();
25 this.state = {
26 datatgls: [],
27 thisVisible2: false,
28 nama_jemaat: "kosong",
29 statx: "texx",
30 text: "",
31 };
32 }
33 async componentWillMount() {
34 const { state, navigate } = this.props.navigation;
35 const { navigation } = this.props;
36 AsyncStorage.getItem("nama_jemaat").then(
37 value =>
38 //AsyncStorage returns a promise so adding a callback to get the value
39 this.setState({ nama_jemaat: value, nama: value })
40
41 //Setting the value in Text
42 );
43
44 this.backHandler = BackHandler.addEventListener(
45 "hardwareBackPress",
46 this.handleBackPress
47 );
48 fetch("https://gkilayur.org/api/listTanggal.php?key=RdDehnuR3oJlAUXznsRq")
49 .then(response => response.json())
50 .then(res => this.setState({ datatgls: res, thisVisible2: true }));
51
52 axios({
53 method: "GET",
54 url:
55 "https://gkilayur.org/api/jadwalsearch.php?key=RdDehnuR3oJlAUXznsRq"
56 })
57 .then(response => {
58 this.setState(
59 {
60 data5: response.data
61 },
62 function() {
63 this.arrayholder = response.data;
64 }
65 ); //result=variabel api = masuk produknya
66 })
67 .catch(error => {
68 console.log(error);
69 });
70 }
71
72 componentWillUnmount() {
73 this.backHandler.remove();
74 }
75
76 verified() {
77 console.log(this.state.nama_jemaat);
78 fetch(
79 "https://gkilayur.org/api/level.php?nama_jemaat=" +
80 this.state.nama_jemaat +
81 "&key=RdDehnuR3oJlAUXznsRq"
82 )
83 .then(response => response.json())
84
85 .then(responseJson => {
86 AsyncStorage.setItem("level", responseJson);
87 console.log(responseJson);
88 this.setState({
89 level: responseJson
90 });
91 });
92 this.props.navigation.navigate("Nama");
93 }
94
95 handleBackPress = () => {
96 const { state, navigate } = this.props.navigation;
97 const { navigation } = this.props;
98
99 this.props.navigation.navigate("HomeAlt");
100 return true;
101 };
102
103 handleQueryChange = query =>
104 this.setState(state => ({ ...state, query: query || "" }));
105
106 handleSearchCancel = () => this.handleQueryChange("");
107 handleSearchClear = () => this.handleQueryChange("");
108
109 SearchFilterFunction(text) {
110 //passing the inserted text in textinput
111 const newData = this.arrayholder.filter(function(item) {
112 //applying filter for the inserted text in search bar
113 const itemData = item.nama_events
114 ? item.nama_events.toUpperCase()
115 : "".toUpperCase();
116 const textData = text.toUpperCase();
117 return itemData.indexOf(textData) > -1;
118 });
119 this.setState({
120 //setting the filtered newData on datasource
121 //After setting the data it will automatically re-render the view
122 data5: newData,
123 text: text
124 });
125 }
126
127 renderMessage(text) {
128 if (text !== "") {
129 return (
130 <ScrollView
131 style={(styles.container, { marginTop: 0 })}
132 contentContainerStyle={styles.contentContainer}
133 showsVerticalScrollIndicator={false}
134 >
135 <View
136 style={{
137 marginHorizontal: 0
138 }}
139 >
140 <ShimmerPlaceHolder
141 visible={this.state.thisVisible2}
142 style={{
143 height: height / 2,
144 width: "100%"
145 }}
146 autoRun={true}
147 />
148 </View>
149 <View
150 style={{
151 marginHorizontal: 0
152 }}
153 >
154 <ShimmerPlaceHolder
155 visible={this.state.thisVisible2}
156 style={{
157 height: 20,
158 marginBottom: 10,
159 marginTop: 20,
160 width: "80%",
161 marginHorizontal: 20,
162 borderRadius: 5
163 }}
164 autoRun={true}
165 />
166 </View>
167
168 <View>
169 <ShimmerPlaceHolder
170 visible={this.state.thisVisible2}
171 style={{
172 height: 20,
173 marginLeft: 20,
174 borderRadius: 5,
175 width: "40%"
176 }}
177 autoRun={true}
178 />
179 </View>
180 <View>
181 <ShimmerPlaceHolder
182 visible={this.state.thisVisible2}
183 style={{
184 height: 20,
185 marginTop: 10,
186 marginLeft: 20,
187 borderRadius: 5,
188 width: "40%"
189 }}
190 autoRun={true}
191 />
192 </View>
193 <View
194 style={{
195 marginHorizontal: 0
196 }}
197 >
198 <ShimmerPlaceHolder
199 visible={this.state.thisVisible2}
200 style={{
201 marginTop: 20,
202 height: height / 2,
203 width: "100%"
204 }}
205 autoRun={true}
206 />
207 </View>
208 <View
209 style={{
210 marginHorizontal: 0
211 }}
212 >
213 <ShimmerPlaceHolder
214 visible={this.state.thisVisible2}
215 style={{
216 height: 20,
217 marginBottom: 10,
218 marginTop: 20,
219 width: "80%",
220 marginHorizontal: 20,
221 borderRadius: 5
222 }}
223 autoRun={true}
224 />
225 </View>
226
227 <View>
228 <ShimmerPlaceHolder
229 visible={this.state.thisVisible2}
230 style={{
231 height: 20,
232 marginLeft: 20,
233 borderRadius: 5,
234 width: "40%"
235 }}
236 autoRun={true}
237 />
238 </View>
239 <View>
240 <ShimmerPlaceHolder
241 visible={this.state.thisVisible2}
242 style={{
243 height: 20,
244 marginTop: 10,
245 marginLeft: 20,
246 borderRadius: 5,
247 width: "40%"
248 }}
249 autoRun={true}
250 />
251 </View>
252 {this.state.data5.map((item, key) => (
253 <View
254 style={{
255 marginTop: 0
256 }}
257 >
258 <Image
259 source={{ uri: "https://gkilayur.org/" + item.image }}
260 style={{
261 height: height / 2,
262 backgroundColor: "grey"
263 }}
264 ></Image>
265
266 <View
267 style={{
268 paddingHorizontal: 20,
269 marginTop: 5
270 }}
271 >
272 <Text
273 style={{
274 fontSize: 12,
275 color: "#AEAEAE"
276 }}
277 >
278 {item.tanggal}
279 </Text>
280 </View>
281
282 <View
283 style={{
284 paddingHorizontal: 20,
285 paddingTop: 10,
286 flexWrap: "wrap"
287 }}
288 >
289 <Text
290 style={{
291 fontSize: 20,
292 fontWeight: "800",
293 flexWrap: "wrap"
294 }}
295 >
296 {item.nama_events}
297 </Text>
298 <View
299 style={{
300 flexDirection: "row",
301 marginTop: 5,
302 justifyContent: "flex-start",
303 flexWrap: "wrap"
304 }}
305 >
306 <View
307 style={{
308 backgroundColor: "#DC2E95",
309 paddingHorizontal: 10,
310 paddingVertical: 5,
311 borderRadius: 5,
312 marginRight: 5
313 }}
314 >
315 <Text
316 style={{
317 fontWeight: "800",
318 color: "white"
319 }}
320 >
321 {item.tempat}
322 </Text>
323 </View>
324 <View
325 style={{
326 backgroundColor: "#2f95dc",
327 paddingHorizontal: 10,
328 paddingVertical: 5,
329 borderRadius: 5
330 }}
331 >
332 <Text
333 style={{
334 fontWeight: "800",
335 color: "white"
336 }}
337 >
338 {item.jam}
339 </Text>
340 </View>
341 </View>
342 <View
343 style={{
344 flexDirection: "row",
345 marginTop: 5,
346 justifyContent: "flex-start",
347 flexWrap: "wrap"
348 }}
349 >
350 <View
351 style={{
352 paddingHorizontal: 10,
353 paddingVertical: 5,
354 borderRadius: 5,
355 marginBottom: 20,
356 backgroundColor: item.warnalatar
357 }}
358 >
359 <Text
360 style={{
361 fontSize: 12,
362 fontWeight: "800",
363 color: "#FFFFFF",
364 flexWrap: "wrap"
365 }}
366 >
367 {item.verified}
368 </Text>
369 </View>
370 </View>
371 </View>
372 </View>
373 ))}
374
375 {/* Footer */}
376 <View
377 style={{
378 marginVertical: 40
379 }}
380 >
381 <Text
382 style={{
383 fontSize: 12,
384 color: "#A9A9A9",
385 fontWeight: "800",
386 textAlign: "center"
387 }}
388 >
389 GKI Layur Apps, All Right Reserved
390 </Text>
391 </View>
392 </ScrollView>
393 );
394 } else {
395 return (
396 <ScrollView
397 style={styles.container}
398 contentContainerStyle={styles.contentContainer}
399 showsVerticalScrollIndicator={false}
400 >
401 <View
402 style={{
403 paddingHorizontal: 20,
404 paddingVertical: 0,
405 flexWrap: "wrap",
406 flexDirection: "row",
407 justifyContent: "space-between"
408 }}
409 >
410 <View
411 style={{
412 marginHorizontal: 0
413 }}
414 >
415 <ShimmerPlaceHolder
416 visible={this.state.thisVisible2}
417 style={{
418 marginTop: 20,
419 marginVertical: 20,
420 width: width / 3 - 20,
421 height: width / 3 - 20,
422 marginVertical: 5,
423 borderRadius: 5
424 }}
425 autoRun={true}
426 />
427 </View>
428 <View
429 style={{
430 marginHorizontal: 0
431 }}
432 >
433 <ShimmerPlaceHolder
434 visible={this.state.thisVisible2}
435 style={{
436 marginVertical: 20,
437 marginTop: 20,
438 width: width / 3 - 20,
439 height: width / 3 - 20,
440 marginVertical: 5,
441 borderRadius: 5
442 }}
443 autoRun={true}
444 />
445 </View>
446 <View
447 style={{
448 marginHorizontal: 0
449 }}
450 >
451 <ShimmerPlaceHolder
452 visible={this.state.thisVisible2}
453 style={{
454 marginVertical: 20,
455 marginTop: 20,
456 width: width / 3 - 20,
457 height: width / 3 - 20,
458 marginVertical: 5,
459 borderRadius: 5
460 }}
461 autoRun={true}
462 />
463 </View>
464 <View
465 style={{
466 marginHorizontal: 0
467 }}
468 >
469 <ShimmerPlaceHolder
470 visible={this.state.thisVisible2}
471 style={{
472 marginVertical: 20,
473 width: width / 3 - 20,
474 height: width / 3 - 20,
475 marginVertical: 5,
476 borderRadius: 5
477 }}
478 autoRun={true}
479 />
480 </View>
481 <View
482 style={{
483 marginHorizontal: 0
484 }}
485 >
486 <ShimmerPlaceHolder
487 visible={this.state.thisVisible2}
488 style={{
489 marginVertical: 20,
490 width: width / 3 - 20,
491 height: width / 3 - 20,
492 marginVertical: 5,
493 borderRadius: 5
494 }}
495 autoRun={true}
496 />
497 </View>
498 <View
499 style={{
500 marginHorizontal: 0
501 }}
502 >
503 <ShimmerPlaceHolder
504 visible={this.state.thisVisible2}
505 style={{
506 marginVertical: 20,
507 width: width / 3 - 20,
508 height: width / 3 - 20,
509 marginVertical: 5,
510 borderRadius: 5
511 }}
512 autoRun={true}
513 />
514 </View>
515 <View
516 style={{
517 marginHorizontal: 0
518 }}
519 >
520 <ShimmerPlaceHolder
521 visible={this.state.thisVisible2}
522 style={{
523 marginVertical: 20,
524 width: width / 3 - 20,
525 height: width / 3 - 20,
526 marginVertical: 5,
527 borderRadius: 5
528 }}
529 autoRun={true}
530 />
531 </View>
532 <View
533 style={{
534 marginHorizontal: 0
535 }}
536 >
537 <ShimmerPlaceHolder
538 visible={this.state.thisVisible2}
539 style={{
540 marginVertical: 20,
541 width: width / 3 - 20,
542 height: width / 3 - 20,
543 marginVertical: 5,
544 borderRadius: 5
545 }}
546 autoRun={true}
547 />
548 </View>
549 <View
550 style={{
551 marginHorizontal: 0
552 }}
553 >
554 <ShimmerPlaceHolder
555 visible={this.state.thisVisible2}
556 style={{
557 marginVertical: 20,
558 width: width / 3 - 20,
559 height: width / 3 - 20,
560 marginVertical: 5,
561 borderRadius: 5
562 }}
563 autoRun={true}
564 />
565 </View>
566 <View
567 style={{
568 marginHorizontal: 0
569 }}
570 >
571 <ShimmerPlaceHolder
572 visible={this.state.thisVisible2}
573 style={{
574 marginVertical: 20,
575 width: width / 3 - 20,
576 height: width / 3 - 20,
577 marginVertical: 5,
578 borderRadius: 5
579 }}
580 autoRun={true}
581 />
582 </View>
583 <View
584 style={{
585 marginHorizontal: 0
586 }}
587 >
588 <ShimmerPlaceHolder
589 visible={this.state.thisVisible2}
590 style={{
591 marginVertical: 20,
592 width: width / 3 - 20,
593 height: width / 3 - 20,
594 marginVertical: 5,
595 borderRadius: 5
596 }}
597 autoRun={true}
598 />
599 </View>
600 <View
601 style={{
602 marginHorizontal: 0
603 }}
604 >
605 <ShimmerPlaceHolder
606 visible={this.state.thisVisible2}
607 style={{
608 marginVertical: 20,
609 width: width / 3 - 20,
610 height: width / 3 - 20,
611 marginVertical: 5,
612 borderRadius: 5
613 }}
614 autoRun={true}
615 />
616 </View>
617 </View>
618 <View
619 style={{
620 paddingHorizontal: 20,
621 paddingVertical: 20,
622 flexWrap: "wrap",
623 flexDirection: "row",
624 justifyContent: "space-between"
625 }}
626 >
627 {this.state.datatgls.map((item, key) => (
628 <TouchableOpacity
629 onPress={() => {
630 this.props.navigation.navigate("JadwalDetail", {
631 tanggal: item.tanggal
632 });
633 }}
634 >
635 <LinearGradient
636 colors={["#2f95dc", "#4ca4e1", "#2f95dc"]}
637 style={{
638 width: width / 3 - 20,
639 height: width / 3 - 20,
640 marginVertical: 5,
641 borderRadius: 5,
642 alignItems: "center",
643 justifyContent: "center"
644 }}
645 >
646 <Text
647 style={{
648 fontSize: 35,
649 fontWeight: "800",
650 color: "white"
651 }}
652 >
653 {item.tgls}
654 </Text>
655 <Text
656 style={{
657 fontSize: 12,
658 fontWeight: "800",
659 color: "white"
660 }}
661 >
662 {item.bulan}
663 </Text>
664 </LinearGradient>
665 </TouchableOpacity>
666 ))}
667 </View>
668 {/* Footer */}
669 <View
670 style={{
671 marginVertical: 40
672 }}
673 >
674 <Text
675 style={{
676 fontSize: 12,
677 color: "#A9A9A9",
678 fontWeight: "800",
679 textAlign: "center"
680 }}
681 >
682 GKI Layur Apps, All Right Reserved
683 </Text>
684 </View>
685 </ScrollView>
686 );
687 }
688 }
689
690 render() {
691 return (
692 <View style={styles.container}>
693 <StatusBar
694 barStyle="dark-content"
695 // dark-content, light-content and default
696 hidden={false}
697 //To hide statusBar
698 translucent={true}
699 //allowing light, but not detailed shapes
700 networkActivityIndicatorVisible={true}
701 />
702 <View
703 style={{
704 paddingHorizontal: 20,
705 paddingVertical: 15,
706 flexDirection: "row",
707 justifyContent: "space-between",
708 alignItems: "center",
709 marginTop:
710 Platform.OS === "ios"
711 ? StatusBar.currentHeight
712 : StatusBar.currentHeight
713 }}
714 >
715 <TouchableOpacity
716 onPress={() => {
717 this.props.navigation.navigate("HomeAlt");
718 }}
719 style={{
720 zIndex: 2
721 }}
722 >
723 <View
724 style={{
725 borderRadius: 20
726 }}
727 >
728 <Icon name="arrowleft" size={20} />
729 </View>
730 </TouchableOpacity>
731 <View>
732 <Text
733 style={{
734 fontSize: 18,
735 fontWeight: "800"
736 }}
737 >
738 Tanggal Kegiatan
739 </Text>
740 </View>
741 </View>
742
743 <View>
744 <SearchBar
745 containerStyle={{
746 width: "100%",
747 backgroundColor: "white",
748 marginTop: -10,
749 borderTopWidth: 0,
750 borderBottomWidth: 0,
751 marginBottom: 0
752 }}
753 placeholder="Cari Kegiatan"
754 inputContainerStyle={{ backgroundColor: "#D9D9D6", fontSize: 12 }}
755 onChangeText={text => this.SearchFilterFunction(text)}
756 value={this.state.text}
757 />
758 </View>
759 {this.renderMessage(this.state.text)}
760
761 <View style={{ position: "absolute", right: 0, bottom: 0 }}>
762 <View
763 style={{
764 width: width / 6,
765 height: width / 6,
766 marginBottom: 20,
767 marginRight: 20,
768 borderColor: "white",
769 borderWidth: 4,
770 backgroundColor: "#5ed1b3",
771 justifyContent: "center",
772 alignItems: "center",
773 shadowColor: "#000",
774 shadowOffset: {
775 width: 0,
776 height: 4
777 },
778 shadowOpacity: 0.3,
779 shadowRadius: 4.65,
780
781 elevation: 8,
782 borderRadius: 40
783 }}
784 >
785 <TouchableOpacity
786 onPress={() => {
787 this.verified();
788 }}
789 >
790 <Image
791 style={{ width: width / 6 - 10, height: width / 6 - 10 }}
792 source={require("../assets/images/lapor.png")}
793 />
794 </TouchableOpacity>
795 </View>
796 </View>
797 </View>
798 );
799 }
800}
801JadwalScreen.navigationOptions = {
802 header: null
803};
804
805export const { width, height } = Dimensions.get("window");
806
807const styles = StyleSheet.create({
808 container: {
809 flex: 1,
810 backgroundColor: "#fff"
811 },
812
813 contentContainer: {
814 paddingTop: 0
815 }
816});