Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import {
- View,
- Platform,
- Image,
- Keyboard,
- TouchableOpacity,
- Alert,
- Text,
- ScrollView,
- StatusBar,
- TextInput,
- } from 'react-native';
- import { SetTopBar } from '../../Component/TopBar';
- import { SetBottomButton } from '../../Component/BottomButton';
- import { API } from '../../API';
- import { RealmData, RealmDataName } from '../../RealmData';
- import UI_Modal_Loading from '../../Modal/Loading';
- import * as JsSearch from 'js-search';
- const homePath = "../../";
- class SetSearch extends React.Component {
- state = {
- value: "",
- }
- render() {
- return (
- <View>
- <Text
- style = {{
- fontSize: 14,
- fontWeight: '700',
- color: this.props.disable ? 'lightgray' : 'gray',
- marginBottom: 7.5,
- }}
- >
- {this.props.title}
- </Text>
- <View
- style= {{
- flexDirection: 'row',
- borderBottomWidth: 1,
- borderColor: this.props.disable ? 'lightgray' : 'gray',
- paddingBottom: 7.5,
- }}
- >
- <TextInput
- style = {{
- padding: 0,
- flex: 1,
- marginBottom: -7.5,
- fontSize: 18,
- color: this.props.value == '' ? (this.props.disable ? 'lightgray' : 'gray') : 'black',
- }}
- editable = {!this.props.disable}
- onFocus = {() => this.props.Update_Search(this.state.value)}
- onBlur = {() => this.props.Update_Search(this.state.value, true)}
- placeholder = {this.props.placeholder}
- value = {this.state.value}
- onChangeText = {value => {
- this.setState({value: value});
- this.props.Update_Search(value);
- }}
- />
- {/* <TouchableOpacity
- style = {{
- marginHorizontal: 2.5,
- }}
- disabled = {this.props.disable}
- onPress= {() => {
- if(this.props.action != undefined) {
- this.props.action()
- }
- }}
- >
- <Image
- style= {{
- width: 20,
- height: 20,
- opacity: disable ? 0.5 : 1,
- }}
- source= {require(homePath + 'Resource/gray_search.png')}
- resizeMode= 'contain'
- />
- </TouchableOpacity> */}
- </View>
- </View>
- )
- }
- }
- export default class UI_Breakdown_StartTimeline extends React.Component {
- state = {
- cabang: '',
- cabangTerpilih: '',
- alat: '',
- alatTerpilih: '',
- operatorTerpilihName: '',
- operatorTerpilih: '',
- pilihanCabang: [],
- pilihanAlat: [],
- pilihanOperator: [],
- loadingTimeline: false,
- prv_id: '',
- }
- setListener(active) {
- if(active) {
- this.subs = [
- this.props.navigation.addListener('didFocus', () => this.Update()),
- ];
- } else {
- this.subs.forEach(sub => {
- sub.remove();
- });
- }
- }
- Update() {
- if(require(homePath + 'Helper/AlatQRScanner').alat != "") {
- akses = false;
- for(let i = 0; i < this.state.pilihanAlat.length; i++) {
- if(require(homePath + 'Helper/AlatQRScanner').alat == this.state.pilihanAlat[i].id) {
- this.setState({
- alatTerpilih: this.state.pilihanAlat[i].id,
- alat: this.state.pilihanAlat[i].name,
- });
- if(this.state.prv_id != "6") {
- this.setState({
- pilihanOperator: [],
- operatorTerpilih: '',
- operatorTerpilihName: '',
- });
- this.MuatOperator();
- }
- akses = true;
- break;
- }
- }
- if(akses) {
- Alert.alert("Alat Ditemukan", require(homePath + 'Helper/AlatQRScanner').alat + " Berhasil Dipilih!");
- } else {
- Alert.alert("Tidak Ada Akses Alat", "Anda Tidak Mempunyai Akses Pada " + require(homePath + 'Helper/AlatQRScanner').alat);
- }
- require(homePath + 'Helper/AlatQRScanner').alat = "";
- }
- }
- componentDidMount() {
- this.setListener(true);
- this.MuatCabang()
- Realm.open(RealmData.User).then(realm => {
- this.setState({prv_id: realm.objects(RealmDataName.User)[0].prv_id})
- })
- }
- componentWillUnmount() {
- this.setListener(false);
- }
- MuatCabang() {
- Realm.open(RealmData.User).then(realm => {
- fetch(
- API.Breakdown_Master_Cabang,
- API.Breakdown_Master_Cabang__Send(
- realm.objects(RealmDataName.User)[0].id
- )
- )
- .then(response => response.text())
- .then(responseText => {
- if(responseText[0] != "<") {
- if(JSON.parse(responseText).api_status == "1") {
- pilihanCabang = []
- for(let i = 0; i < JSON.parse(responseText).cabang.length; i++) {
- pilihanCabang.push({
- id: JSON.parse(responseText).cabang[i].kd_cabang,
- name: JSON.parse(responseText).cabang[i].nama_regional + " - " + JSON.parse(responseText).cabang[i].nama_cabang,
- })
- }
- this.setState({pilihanCabang: pilihanCabang})
- }
- }
- })
- })
- }
- MuatAlat() {
- Realm.open(RealmData.User).then(realm => {
- fetch(
- API.Breakdown_Master_Alat,
- API.PM_Master_Alat__Send(
- realm.objects(RealmDataName.User)[0].id,
- this.state.cabangTerpilih
- )
- )
- .then(response => response.text())
- .then(responseText => {
- if(responseText[0] != "<") {
- if(JSON.parse(responseText).api_status == "1") {
- pilihanAlat = []
- for(let i = 0; i < JSON.parse(responseText).alat.length; i++) {
- pilihanAlat.push({
- id: JSON.parse(responseText).alat[i].kd_alat,
- name: JSON.parse(responseText).alat[i].nama + " - " + JSON.parse(responseText).alat[i].kd_alat,
- })
- }
- this.setState({pilihanAlat: pilihanAlat});
- }
- }
- })
- })
- }
- MuatOperator() {
- Realm.open(RealmData.User).then(realm => {
- fetch(
- API.Breakdown_Master_Operator,
- API.Breakdown_Master_Operator__Send(
- realm.objects(RealmDataName.User)[0].id,
- this.state.cabangTerpilih,
- this.state.alatTerpilih,
- )
- )
- .then(response => response.text())
- .then(responseText => {
- if(responseText[0] != "<") {
- if(JSON.parse(responseText).api_status == "1") {
- pilihanOperator = [];
- for(let i = 0; i < JSON.parse(responseText).operator.length; i++) {
- pilihanOperator.push({
- id: JSON.parse(responseText).operator[i].usr_id,
- name: JSON.parse(responseText).operator[i].full_name,
- })
- }
- this.setState({pilihanOperator: pilihanOperator});
- }
- }
- })
- })
- }
- render() {
- return (
- <View
- style= {{
- flex: 1,
- backgroundColor: 'white',
- }}
- >
- <View
- style= {{
- height: Platform.OS == 'ios' ? 95 : 75,
- backgroundColor: 'black',
- }}
- >
- {Platform.OS == 'ios' ?
- <View>
- <StatusBar
- barStyle= 'light-content'
- />
- <View
- style= {{
- height: 20,
- backgroundColor: 'black',
- }}
- />
- </View>
- :
- null
- }
- {SetTopBar('Input Breakdown', () => this.props.navigation.pop())}
- </View>
- <View
- style= {{
- flex: 1,
- padding: 20,
- flexDirection: "column-reverse",
- justifyContent: "flex-end",
- }}
- >
- <Autocomplete_List
- top = {222.5}
- ref = {refs => this.autocomplete_list_operator = refs}
- pick_auto_complete = {(item) => {
- this.set_search_operator.setState({value: item.name});
- Keyboard.dismiss();
- }}
- />
- {this.state.prv_id != "6" ?
- <View
- style= {{
- opacity: this.state.pilihanOperator.length > 0 ? 1 : 0.35,
- marginTop: 20
- }}
- >
- <SetSearch
- ref = {refs => this.set_search_operator = refs}
- title = "Operator"
- action = {() => this.props.navigation.push(
- "UI_Breakdown_Search",
- {
- title: "Operator",
- list: this.state.pilihanOperator,
- // validateAction: (item) => {
- // this.setState({
- // operatorTerpilih: item.id,
- // operatorTerpilihName: item.name
- // });
- // if(this.state.prv_id != "6") {
- // this.MuatOperator();
- // }
- // }
- }
- )}
- Update_Search = {(value, close) => {
- this.Update_Operator_Search(value, close);
- }}
- value = {this.state.operatorTerpilihName}
- placeholder = "Pilih Operator"
- disable = {this.state.pilihanOperator.length == 0}
- />
- </View>
- :
- null
- }
- <Autocomplete_List
- top = {147.5}
- right = {50}
- ref = {refs => this.autocomplete_list_alat = refs}
- pick_auto_complete = {(item) => {
- if(this.set_search_alat.state.value != item.name) {
- this.set_search_alat.setState({value: item.name});
- this.setState({
- alat: item.name,
- alatTerpilih: item.id,
- pilihanOperator: [],
- operatorTerpilih: '',
- operatorTerpilihName: '',
- });
- this.MuatOperator();
- }
- Keyboard.dismiss();
- }}
- />
- <View
- style= {{
- flexDirection: "row",
- width: "100%",
- opacity: this.state.pilihanAlat.length > 0 ? 1 : 0.35,
- marginTop: 20,
- }}
- >
- <View
- style = {{
- flex: 1,
- }}
- >
- <SetSearch
- ref = {refs => this.set_search_alat = refs}
- Update_Search = {(value, close) => {
- this.Update_Alat_Search(value, close);
- }}
- title = "Alat"
- action = {() => this.props.navigation.push(
- "UI_Breakdown_Search",
- {
- title: "Alat",
- list: this.state.pilihanAlat,
- // validateAction: (item) => {
- // this.setState({
- // alatTerpilih: item.id,
- // alat: item.name,
- // });
- // if(this.state.prv_id != "6") {
- // this.MuatOperator();
- // this.setState({
- // pilihanOperator: [],
- // operatorTerpilih: '',
- // operatorTerpilihName: '',
- // });
- // }
- // }
- }
- )}
- value = {this.state.alat}
- placeholder = "Pilih Alat"
- disable = {this.state.pilihanAlat.length == 0}
- />
- </View>
- <TouchableOpacity
- style= {{
- bottom: Platform.OS == "ios" ? -15 : -20,
- marginLeft: 10,
- }}
- disabled = {this.state.pilihanAlat.length == 0}
- onPress = {() => this.props.navigation.push("UI_AlatQRScanner")}
- >
- <Image
- style = {{
- width: 40,
- height: 40,
- }}
- resizeMode = "contain"
- source = {require('../../Resource/qr-code.png')}
- />
- </TouchableOpacity>
- </View>
- <Autocomplete_List
- top = {72.5}
- ref = {refs => this.autocomplete_list_cabang = refs}
- pick_auto_complete = {(item) => {
- if(this.set_search_cabang.state.value != item.name) {
- this.set_search_cabang.setState({value: item.name});
- this.set_search_alat.setState({value: ""});
- this.setState({
- cabang: item.name,
- cabangTerpilih: item.id.toString(),
- pilihanAlat: [],
- alat: '',
- alatTerpilih: '',
- pilihanOperator: [],
- operatorTerpilih: '',
- operatorTerpilihName: '',
- });
- this.MuatAlat();
- }
- Keyboard.dismiss();
- }}
- />
- <View
- style= {{
- opacity: this.state.pilihanCabang.length > 0 ? 1 : 0.35,
- }}
- >
- <SetSearch
- title = "Cabang"
- ref = {refs => this.set_search_cabang = refs}
- Update_Search = {(value, close) => {
- this.Update_Cabang_Search(value, close);
- }}
- action = {() => this.props.navigation.push(
- "UI_Breakdown_Search",
- {
- title: "Cabang",
- list: this.state.pilihanCabang,
- // validateAction: (item) => {
- // this.setState({
- // cabang: item.name,
- // cabangTerpilih: item.id.toString(),
- // });
- // this.MuatAlat();
- // this.setState({
- // pilihanAlat: [],
- // alat: '',
- // alatTerpilih: '',
- // pilihanOperator: [],
- // operatorTerpilih: '',
- // operatorTerpilihName: '',
- // });
- // }
- }
- )}
- value = {this.state.cabang}
- placeholder = "Pilih Cabang"
- disable = {this.state.pilihanCabang.length == 0}
- />
- </View>
- </View>
- {SetBottomButton("Check Breakdown", () => this.CekTimeline(), this.state.cabangTerpilih != "" && this.state.alatTerpilih != "" && (this.state.prv_id == "6" || this.state.operatorTerpilih != "") ? "black" : "gray", this.state.cabangTerpilih == "" || this.state.alatTerpilih == "" || (this.state.prv_id != "6" && this.state.operatorTerpilih == ""))}
- <UI_Modal_Loading
- isLoading= {this.state.loadingTimeline}
- text= "Checking breakdown timeline..."
- />
- </View>
- )
- }
- CekTimeline() {
- this.setState({loadingTimeline: true});
- Realm.open(RealmData.User).then(realm => {
- fetch(
- API.Breakdown_Cek_Timeline,
- API.Breakdown_Cek_Timeline__Send(
- this.state.prv_id == "6" ?
- realm.objects(RealmDataName.User)[0].id
- :
- this.state.operatorTerpilih,
- this.state.cabangTerpilih,
- this.state.alatTerpilih,
- )
- )
- .then(response => response.text())
- .then(responseText => {
- this.setState({loadingTimeline: false});
- if(JSON.parse(responseText).api_status == "1") {
- this.props.navigation.push("UI_Breakdown_Timeline", {
- response: JSON.parse(responseText),
- prv_id: this.state.prv_id == "6" ?
- realm.objects(RealmDataName.User)[0].id
- :
- this.state.operatorTerpilih,
- kd_cabang: this.state.cabangTerpilih,
- kd_alat: this.state.alatTerpilih,
- })
- } else if(JSON.parse(responseText).api_status == "0") {
- Alert.alert("Response", JSON.parse(responseText).api_message);
- } else {
- Alert.alert("Response", responseText);
- }
- })
- })
- }
- Update_Cabang_Search(value, close) {
- let dataFound = undefined;
- for(let i = 0, cabang_length = this.state.pilihanCabang.length; i < cabang_length; i++) {
- if(value.toLowerCase() == this.state.pilihanCabang[i].name.toLowerCase()) {
- dataFound = this.state.pilihanCabang[i];
- break;
- }
- }
- if(dataFound != undefined) {
- if(this.set_search_cabang.state.value != dataFound.name) {
- this.set_search_cabang.setState({value: dataFound.name});
- this.setState({
- pilihanAlat: [],
- alat: '',
- alatTerpilih: '',
- cabang: dataFound.name,
- cabangTerpilih: dataFound.id.toString(),
- });
- if(this.state.prv_id != "6") {
- this.setState({
- pilihanOperator: [],
- operatorTerpilih: '',
- operatorTerpilihName: '',
- });
- this.set_search_operator.setState({value: ""});
- }
- this.set_search_alat.setState({value: ""});
- this.MuatAlat();
- }
- } else {
- if(close) {
- this.set_search_cabang.setState({value: ""});
- }
- this.setState({
- pilihanAlat: [],
- alat: '',
- alatTerpilih: '',
- cabang: "",
- cabangTerpilih: "",
- });
- if(this.state.prv_id != "6") {
- this.setState({
- pilihanOperator: [],
- operatorTerpilih: '',
- operatorTerpilihName: '',
- });
- this.set_search_operator.setState({value: ""});
- }
- this.set_search_alat.setState({value: ""});
- }
- if(close) {
- this.autocomplete_list_cabang.setState({list: []});
- } else {
- if(value != "") {
- this.autocomplete_list_cabang.setState({list: this.Searching(this.state.pilihanCabang).search(value)});
- } else {
- this.autocomplete_list_cabang.setState({list: this.state.pilihanCabang});
- }
- }
- }
- Update_Alat_Search(value, close) {
- let dataFound = undefined;
- for(let i = 0, alat_length = this.state.pilihanAlat.length; i < alat_length; i++) {
- if(value.toLowerCase() == this.state.pilihanAlat[i].name.toLowerCase()) {
- dataFound = this.state.pilihanAlat[i];
- break;
- }
- }
- if(dataFound != undefined) {
- if(this.set_search_alat.state.value != dataFound.name) {
- this.set_search_alat.setState({value: dataFound.name});
- this.setState({
- alat: dataFound.name,
- alatTerpilih: dataFound.id.toString(),
- });
- if(this.state.prv_id != "6") {
- this.setState({
- pilihanOperator: [],
- operatorTerpilih: '',
- operatorTerpilihName: '',
- });
- this.set_search_operator.setState({value: ""});
- this.MuatOperator();
- }
- }
- } else {
- if(close) {
- this.set_search_alat.setState({value: ""});
- }
- this.setState({
- alat: "",
- alatTerpilih: "",
- });
- if(this.state.prv_id != "6") {
- this.setState({
- pilihanOperator: [],
- operatorTerpilih: '',
- operatorTerpilihName: '',
- });
- this.set_search_operator.setState({value: ""});
- }
- }
- if(close) {
- this.autocomplete_list_alat.setState({list: []});
- } else {
- if(value != "") {
- this.autocomplete_list_alat.setState({list: this.Searching(this.state.pilihanAlat).search(value)});
- } else {
- this.autocomplete_list_alat.setState({list: this.state.pilihanAlat});
- }
- }
- }
- Update_Operator_Search() {
- }
- Searching(documents) {
- let search = new JsSearch.Search('id');
- search.indexStrategy = new JsSearch.AllSubstringsIndexStrategy();
- search.addIndex('name');
- search.addDocuments(documents);
- return search;
- }
- }
- class Autocomplete_List extends React.Component {
- state = {
- list: [],
- }
- render() {
- return (
- <View
- style = {{
- position: "absolute",
- top: this.props.top,
- right: 20 + (this.props.right != undefined ? this.props.right : 0),
- left: 20,
- }}
- >
- {this.state.list.length > 0 ?
- <ScrollView
- keyboardShouldPersistTaps = "always"
- style = {{
- maxHeight: 170,
- }}
- contentContainerStyle = {{
- padding: 10,
- backgroundColor: "whitesmoke",
- }}
- >
- {this.state.list.map((item, index) => {
- return (
- <TouchableOpacity
- key = {index.toString()}
- style = {{
- marginTop: index != 0 ? 10 : 0,
- }}
- onPress = {() => {
- this.props.pick_auto_complete(item);
- }}
- >
- <Text
- style = {{
- flex: 1,
- fontSize: 18,
- fontWeight: "400",
- color: "black",
- }}
- >
- {item.name}
- </Text>
- </TouchableOpacity>
- )
- })}
- </ScrollView>
- :
- null
- }
- </View>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement