ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update request

pull/2/head
Ade Mustofa 2 years ago
parent
91b755a68a
commit
c246db4e6c
3 changed files with 181 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/containers/DefaultLayout/DefaultLayout.js
  2. 41
      src/services/base.js
  3. 277
      src/views/Map/Map_16.js

2
src/containers/DefaultLayout/DefaultLayout.js
Unescape View File

@ -152,7 +152,7 @@ class DefaultLayout extends Component {
} }
if (countErr) { if (countErr) {
if (parseInt(countErr) > 2) { if (parseInt(countErr) > 2) {
this.signOut(); // this.signOut();
} else { } else {
window.location.reload(); window.location.reload();
} }

41
src/services/base.js
Unescape View File

@ -0,0 +1,41 @@
import axios from 'axios';
export default class RequestApi {
// constructor() {
// this.Request = this.Request.bind(this);
// }
static Request() {
// axios.interceptors.request.use(function (config) {
// const token = localStorage.getItem('token')
// config.headers.Authorization = token;
// return config;
// });
const token = localStorage.getItem('token')
let instance = axios.create({
headers: {
'Content-Type': 'application/json',
"Authorization": `Bearer ${token}`
}
})
instance.interceptors.response.use(
(response) => response,
async (error) => {
// const originalRequest = error.config;
if (error.response.status === 307 || error.response.status === 403) {
console.log(error.response);
}
return Promise.reject(error);
}
);
return instance;
}
static getToken() { }
}
export const AXIOS = RequestApi.Request();

277
src/views/Map/Map_16.js
Unescape View File

@ -123,6 +123,7 @@ import * as lodash from 'lodash';
import { Pie, Line, Bar } from 'react-chartjs-2'; import { Pie, Line, Bar } from 'react-chartjs-2';
import numeral from 'numeral'; import numeral from 'numeral';
import { NotificationContainer, NotificationManager } from 'react-notifications'; import { NotificationContainer, NotificationManager } from 'react-notifications';
import { AXIOS } from '../../services/base'
import 'chartjs-plugin-zoom'; import 'chartjs-plugin-zoom';
const HEADER = { const HEADER = {
@ -547,14 +548,14 @@ const optionsChartKurvaS = {
enabled: true, enabled: true,
mode: 'xy', mode: 'xy',
limits: { limits: {
y: {min: 0, max: 100} y: { min: 0, max: 100 }
} }
}, },
pan: { pan: {
enabled: true, enabled: true,
mode: 'xy', mode: 'xy',
limits: { limits: {
y: {min: 0, max: 100} y: { min: 0, max: 100 }
} }
} }
} }
@ -779,7 +780,7 @@ class SiopasMap extends Component {
this.mapOnClick(evt); this.mapOnClick(evt);
}); });
this.setState({ mapProjection: this.olmap.getView().getProjection() }, () => console.log('mapProjection', this.state.mapProjection)); this.setState({ mapProjection: this.olmap.getView().getProjection() }, () => console.log('mapProjection', this.state.mapProjection));
// // set default to check all project // // set default to check all project
// if (this.state.projectTree && this.state.projectTree.length > 0) { // if (this.state.projectTree && this.state.projectTree.length > 0) {
// let checked = []; // let checked = [];
@ -787,7 +788,7 @@ class SiopasMap extends Component {
// console.log('checked', checked); // console.log('checked', checked);
// this.setState({checkedKeysProjectTree: checked}); // this.setState({checkedKeysProjectTree: checked});
// } // }
} }
componentDidUpdate = (prevProps, prevState) => { componentDidUpdate = (prevProps, prevState) => {
@ -1089,23 +1090,23 @@ class SiopasMap extends Component {
let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00"); let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00");
let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59"); let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59");
const payload = { const payload = {
"paging": {"start": 0, "length": -1}, "paging": { "start": 0, "length": -1 },
"columns": [ "columns": [
// {"name": "name", "logic_operator": "like", "value": search, "table_name": "m_users"}, // {"name": "name", "logic_operator": "like", "value": search, "table_name": "m_users"},
{"name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd}, { "name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd },
], ],
"joins": [{ "joins": [{
"name":"m_users", "name": "m_users",
"column_join":"user_id", "column_join": "user_id",
"column_results":[ "column_results": [
"name", "name",
"ktp_number" "ktp_number"
] ]
}], }],
"orders": {"columns": ["id"], "ascending": false} "orders": { "columns": ["id"], "ascending": false }
} }
const result = await axios const result = await axios
.post(PRESENCE_SEARCH, payload, HEADER) .post(PRESENCE_SEARCH, payload, HEADER)
.then(res => res) .then(res => res)
@ -1113,10 +1114,10 @@ class SiopasMap extends Component {
// console.log(result) // console.log(result)
if(result && result.data && result.data.code == 200) { if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data || [] let dataRes = result.data.data || []
this.setState({ presensiData: dataRes }, () => this.getPresensiFeatures()) this.setState({ presensiData: dataRes }, () => this.getPresensiFeatures())
}else{ } else {
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
} }
} }
@ -1308,7 +1309,7 @@ class SiopasMap extends Component {
// }; // };
// console.log("dataRes2", dataRes2); // console.log("dataRes2", dataRes2);
// this.setState({ dataPersentaseProyek: dataRes2 }); // this.setState({ dataPersentaseProyek: dataRes2 });
this.setState({dataCurvaS: dataRes2}); this.setState({ dataCurvaS: dataRes2 });
console.log('dataRes2-----------', dataRes2); console.log('dataRes2-----------', dataRes2);
// set status proyek for adw // set status proyek for adw
@ -1321,7 +1322,7 @@ class SiopasMap extends Component {
budgetControl.push(item.data.budget_control); budgetControl.push(item.data.budget_control);
}); });
} }
this.setState({dataStatusProyekAdw: budgetControl}); this.setState({ dataStatusProyekAdw: budgetControl });
} }
} }
else { else {
@ -2145,7 +2146,7 @@ class SiopasMap extends Component {
console.log('checkedKeysProjectTree', checkedKeysProjectTree); console.log('checkedKeysProjectTree', checkedKeysProjectTree);
// first remove projectLayer and its features // first remove projectLayer and its features
// this.removeLayerByName('routeLayer'); // this.removeLayerByName('routeLayer');
// this.removeLayerByName('projectLayer'); // this.removeLayerByName('projectLayer');
// this.removeLayerByName('waspangLayer'); // this.removeLayerByName('waspangLayer');
@ -2654,7 +2655,7 @@ class SiopasMap extends Component {
"coordinates": [] "coordinates": []
} }
for (let i=0; i < userRoute.features.length; i++) { for (let i = 0; i < userRoute.features.length; i++) {
polyline.coordinates.push(userRoute.features[i].geometry.coordinates); polyline.coordinates.push(userRoute.features[i].geometry.coordinates);
} }
@ -2868,10 +2869,10 @@ class SiopasMap extends Component {
const { kurvaSWindowMode } = this.state; const { kurvaSWindowMode } = this.state;
console.log('toggleKurvaSWindowMode', kurvaSWindowMode); console.log('toggleKurvaSWindowMode', kurvaSWindowMode);
if (kurvaSWindowMode === 'default') { if (kurvaSWindowMode === 'default') {
this.setState({kurvaSWindowMode: 'maximize'}, () => this.renderCarouselKurvaS()) this.setState({ kurvaSWindowMode: 'maximize' }, () => this.renderCarouselKurvaS())
} }
else { else {
this.setState({kurvaSWindowMode: 'default'}, () => this.renderCarouselKurvaS()); this.setState({ kurvaSWindowMode: 'default' }, () => this.renderCarouselKurvaS());
} }
} }
@ -2907,7 +2908,7 @@ class SiopasMap extends Component {
body: JSON.stringify(payload) // body data type must match "Content-Type" header body: JSON.stringify(payload) // body data type must match "Content-Type" header
} }
try { try {
const result = await fetch(url, config).then(response => response.json()).then(res => res); const result = await AXIOS.post(url, payload).then(response => response.json()).then(res => res);
return result.data || [] return result.data || []
} }
catch (e) { catch (e) {
@ -3133,11 +3134,11 @@ class SiopasMap extends Component {
if (animating) return; if (animating) return;
if ((APP_MODE === 'ADW')) { if ((APP_MODE === 'ADW')) {
const nextIndex = activeIndex === dataStatusProyekAdw.length - 1 ? 0 : activeIndex + 1; const nextIndex = activeIndex === dataStatusProyekAdw.length - 1 ? 0 : activeIndex + 1;
this.setState({activeIndex: nextIndex}); this.setState({ activeIndex: nextIndex });
} }
else { else {
const nextIndex = activeIndex === dataStatusProyek.length - 1 ? 0 : activeIndex + 1; const nextIndex = activeIndex === dataStatusProyek.length - 1 ? 0 : activeIndex + 1;
this.setState({activeIndex: nextIndex}); this.setState({ activeIndex: nextIndex });
} }
} }
@ -3145,14 +3146,14 @@ class SiopasMap extends Component {
const { animating2, activeIndex2, dataPersentaseProyek } = this.state; const { animating2, activeIndex2, dataPersentaseProyek } = this.state;
if (animating2) return; if (animating2) return;
const nextIndex = activeIndex2 === dataPersentaseProyek.length - 1 ? 0 : activeIndex2 + 1; const nextIndex = activeIndex2 === dataPersentaseProyek.length - 1 ? 0 : activeIndex2 + 1;
this.setState({activeIndex2: nextIndex}); this.setState({ activeIndex2: nextIndex });
} }
next3 = () => { next3 = () => {
const { animating3, activeIndex3, dataCostProyek } = this.state; const { animating3, activeIndex3, dataCostProyek } = this.state;
if (animating3) return; if (animating3) return;
const nextIndex = activeIndex3 === dataCostProyek.length - 1 ? 0 : activeIndex3 + 1; const nextIndex = activeIndex3 === dataCostProyek.length - 1 ? 0 : activeIndex3 + 1;
this.setState({activeIndex3: nextIndex}); this.setState({ activeIndex3: nextIndex });
} }
previous = () => { previous = () => {
@ -3160,11 +3161,11 @@ class SiopasMap extends Component {
if (animating) return; if (animating) return;
if ((APP_MODE === 'ADW')) { if ((APP_MODE === 'ADW')) {
const nextIndex = activeIndex === 0 ? dataStatusProyekAdw.length - 1 : activeIndex - 1; const nextIndex = activeIndex === 0 ? dataStatusProyekAdw.length - 1 : activeIndex - 1;
this.setState({activeIndex: nextIndex}); this.setState({ activeIndex: nextIndex });
} }
else { else {
const nextIndex = activeIndex === 0 ? dataStatusProyek.length - 1 : activeIndex - 1; const nextIndex = activeIndex === 0 ? dataStatusProyek.length - 1 : activeIndex - 1;
this.setState({activeIndex: nextIndex}); this.setState({ activeIndex: nextIndex });
} }
} }
@ -3172,47 +3173,47 @@ class SiopasMap extends Component {
const { animating2, activeIndex2, dataPersentaseProyek } = this.state; const { animating2, activeIndex2, dataPersentaseProyek } = this.state;
if (animating2) return; if (animating2) return;
const nextIndex = activeIndex2 === 0 ? dataPersentaseProyek.length - 1 : activeIndex2 - 1; const nextIndex = activeIndex2 === 0 ? dataPersentaseProyek.length - 1 : activeIndex2 - 1;
this.setState({activeIndex2: nextIndex}); this.setState({ activeIndex2: nextIndex });
} }
previous3 = () => { previous3 = () => {
const { animating3, activeIndex3, dataCostProyek } = this.state; const { animating3, activeIndex3, dataCostProyek } = this.state;
if (animating3) return; if (animating3) return;
const nextIndex = activeIndex3 === 0 ? dataCostProyek.length - 1 : activeIndex3 - 1; const nextIndex = activeIndex3 === 0 ? dataCostProyek.length - 1 : activeIndex3 - 1;
this.setState({activeIndex3: nextIndex}); this.setState({ activeIndex3: nextIndex });
} }
goToIndex = (newIndex) => { goToIndex = (newIndex) => {
const { animating } = this.state; const { animating } = this.state;
if (animating) return; if (animating) return;
this.setState({activeIndex: newIndex}) this.setState({ activeIndex: newIndex })
} }
goToIndex2 = (newIndex) => { goToIndex2 = (newIndex) => {
const { animating2 } = this.state; const { animating2 } = this.state;
if (animating2) return; if (animating2) return;
this.setState({activeIndex2: newIndex}) this.setState({ activeIndex2: newIndex })
} }
goToIndex3 = (newIndex) => { goToIndex3 = (newIndex) => {
const { animating3 } = this.state; const { animating3 } = this.state;
if (animating3) return; if (animating3) return;
this.setState({activeIndex3: newIndex}) this.setState({ activeIndex3: newIndex })
} }
renderRemainingDays = (item) => { renderRemainingDays = (item) => {
const {day_left, percentage} = item; const { day_left, percentage } = item;
if (day_left > 0 && day_left < 8) { if (day_left > 0 && day_left < 8) {
return <Col style={{textAlign: "right", color: "red", fontStyle: "italic"}}>{`${day_left} ${day_left > 1 ? 'days' : 'day'} left`}</Col> return <Col style={{ textAlign: "right", color: "red", fontStyle: "italic" }}>{`${day_left} ${day_left > 1 ? 'days' : 'day'} left`}</Col>
} }
else if (day_left === 0) { else if (day_left === 0) {
return <Col style={{textAlign: "right", color: "red", fontStyle: "italic"}}>Today</Col> return <Col style={{ textAlign: "right", color: "red", fontStyle: "italic" }}>Today</Col>
} }
else if (day_left < 0) { else if (day_left < 0) {
return <Col style={{textAlign: "right", color: "red", fontStyle: "italic"}}>Overdue {day_left} {day_left < -1 ? 'days' : 'day'} </Col> return <Col style={{ textAlign: "right", color: "red", fontStyle: "italic" }}>Overdue {day_left} {day_left < -1 ? 'days' : 'day'} </Col>
} }
else { else {
return <Col style={{textAlign: "right", color: "grey", fontStyle: "italic"}}>{`${day_left} days left`}</Col> return <Col style={{ textAlign: "right", color: "grey", fontStyle: "italic" }}>{`${day_left} days left`}</Col>
} }
} }
@ -3223,23 +3224,23 @@ class SiopasMap extends Component {
if (dataStatusProyek.length > 0) { if (dataStatusProyek.length > 0) {
return dataStatusProyek.map((item, index) => { return dataStatusProyek.map((item, index) => {
return ( return (
<ListGroup style={{marginBottom: 5}}> <ListGroup style={{ marginBottom: 5 }}>
{/* <ListGroupItem tag="div" className={`text-center text-bold`} style={{fontSize: 12, backgroundColor: "#f5f5f5"}}></ListGroupItem> */} {/* <ListGroupItem tag="div" className={`text-center text-bold`} style={{fontSize: 12, backgroundColor: "#f5f5f5"}}></ListGroupItem> */}
<ListGroupItem className="justify-content-between"> <ListGroupItem className="justify-content-between">
<div style={{textAlign: "center", fontWeight: "bold", fontSize: 12}}>{item.proyek_name}</div> <div style={{ textAlign: "center", fontWeight: "bold", fontSize: 12 }}>{item.proyek_name}</div>
<Row> <Row>
<Col><Badge pill>{ item.count_activity_done }</Badge> / <Badge pill>{ item.count_activity }</Badge> Task <br /></Col> <Col><Badge pill>{item.count_activity_done}</Badge> / <Badge pill>{item.count_activity}</Badge> Task <br /></Col>
{this.renderRemainingDays(item)} {this.renderRemainingDays(item)}
</Row> </Row>
<Progress value={item.percentage} max={100} animated color={item.percentage === 100 ? 'success' : 'primary'} style={{height: 20}}>{item.percentage}%</Progress> <Progress value={item.percentage} max={100} animated color={item.percentage === 100 ? 'success' : 'primary'} style={{ height: 20 }}>{item.percentage}%</Progress>
<div style={{fontSize: 12, color: "grey"}}>Contract: {item.total_kontrak} {item.total_kontrak > 1 ? "days" : "day"}</div> <div style={{ fontSize: 12, color: "grey" }}>Contract: {item.total_kontrak} {item.total_kontrak > 1 ? "days" : "day"}</div>
</ListGroupItem> </ListGroupItem>
</ListGroup> </ListGroup>
) )
}) })
} }
else { else {
return <div style={{textAlign: "center", marginTop: 20, color: "red"}}>No Data Found</div> return <div style={{ textAlign: "center", marginTop: 20, color: "red" }}>No Data Found</div>
} }
} }
else { else {
@ -3260,9 +3261,9 @@ class SiopasMap extends Component {
className="chart-doughnut-carousel" className="chart-doughnut-carousel"
> >
<CarouselIndicators items={dataStatusProyekAdw} activeIndex={this.state.activeIndex} onClickHandler={this.goToIndex} /> <CarouselIndicators items={dataStatusProyekAdw} activeIndex={this.state.activeIndex} onClickHandler={this.goToIndex} />
{this.renderTableStatusProyekAdw()} {this.renderTableStatusProyekAdw()}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} style={{color: 'black'}} /> <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} style={{ color: 'black' }} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} style={{color: 'black'}} /> <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} style={{ color: 'black' }} />
</Carousel> </Carousel>
) )
} }
@ -3305,8 +3306,8 @@ class SiopasMap extends Component {
return ( return (
<CarouselItem <CarouselItem
key={idx} key={idx}
onExiting={() => this.setState({animating: true}) } onExiting={() => this.setState({ animating: true })}
onExited={() => this.setState({animating: false})} onExited={() => this.setState({ animating: false })}
> >
<div className="chart-doughnut-carousel-item"> <div className="chart-doughnut-carousel-item">
<div className="chart-doughnut-caption mb-caption"> <div className="chart-doughnut-caption mb-caption">
@ -3392,7 +3393,7 @@ class SiopasMap extends Component {
} }
else { else {
return <td className="td-sp td-value-sp text-bold">{potential ? potential.toUpperCase() : '-'}</td> return <td className="td-sp td-value-sp text-bold">{potential ? potential.toUpperCase() : '-'}</td>
} }
} }
renderChartStatusProyek = (items) => { renderChartStatusProyek = (items) => {
@ -3402,14 +3403,14 @@ class SiopasMap extends Component {
return ( return (
<CarouselItem <CarouselItem
key={idx} key={idx}
onExiting={() => this.setState({animating: true}) } onExiting={() => this.setState({ animating: true })}
onExited={() => this.setState({animating: false})} onExited={() => this.setState({ animating: false })}
> >
<div className="chart-doughnut-carousel-item"> <div className="chart-doughnut-carousel-item">
<div className="chart-doughnut-caption"> <div className="chart-doughnut-caption">
<div className="text-center text-bold">Status Proyek</div> <div className="text-center text-bold">Status Proyek</div>
<div className="text-center total-luas"> <div className="text-center total-luas">
{/* <span className="total-luas-title">Luas coverage: </span> */} {/* <span className="total-luas-title">Luas coverage: </span> */}
{/* { numberWithCommas(item.total_luas_opt) } km<sup>2</sup> */} {/* { numberWithCommas(item.total_luas_opt) } km<sup>2</sup> */}
</div> </div>
</div> </div>
@ -3469,7 +3470,7 @@ class SiopasMap extends Component {
}); });
console.log('dataChart persentase', dataChart); console.log('dataChart persentase', dataChart);
return ( return (
<Carousel <Carousel
activeIndex={this.state.activeIndex2} activeIndex={this.state.activeIndex2}
@ -3479,7 +3480,7 @@ class SiopasMap extends Component {
className="chart-doughnut-carousel" className="chart-doughnut-carousel"
> >
<CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex2} onClickHandler={this.goToIndex2} /> <CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex2} onClickHandler={this.goToIndex2} />
{this.renderChartPersentaseProgress(dataChart)} {this.renderChartPersentaseProgress(dataChart)}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous2} /> <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous2} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next2} /> <CarouselControl direction="next" directionText="Next" onClickHandler={this.next2} />
</Carousel> </Carousel>
@ -3493,7 +3494,7 @@ class SiopasMap extends Component {
return this.renderEmptyData() return this.renderEmptyData()
} }
} }
renderChartPersentaseProgress = (items) => { renderChartPersentaseProgress = (items) => {
if (items.length > 0) { if (items.length > 0) {
return items.map((item, idx) => { return items.map((item, idx) => {
@ -3502,27 +3503,27 @@ class SiopasMap extends Component {
return ( return (
<CarouselItem <CarouselItem
key={idx} key={idx}
onExiting={() => this.setState({animating2: true}) } onExiting={() => this.setState({ animating2: true })}
onExited={() => this.setState({animating2: false})} onExited={() => this.setState({ animating2: false })}
> >
<div className="chart-doughnut-carousel-item"> <div className="chart-doughnut-carousel-item">
<div className="chart-doughnut-caption"> <div className="chart-doughnut-caption">
<div className="text-center text-bold" style={{fontSize: 12}}>{item.proyek_name}</div> <div className="text-center text-bold" style={{ fontSize: 12 }}>{item.proyek_name}</div>
<div className="text-center total-luas"> <div className="text-center total-luas">
{/* <span className="total-luas-title">Luas coverage: </span> */} {/* <span className="total-luas-title">Luas coverage: </span> */}
{/* { numberWithCommas(item.total_luas_opt) } km<sup>2</sup> */} {/* { numberWithCommas(item.total_luas_opt) } km<sup>2</sup> */}
</div> </div>
</div> </div>
<div className="chart-doughnut-chart"> <div className="chart-doughnut-chart">
{ {
item.labels.length > 0 ? item.labels.length > 0 ?
<Line <Line
options={optionsChartPersentaseProgress} options={optionsChartPersentaseProgress}
data={item || defaultPersentaseProyek} data={item || defaultPersentaseProyek}
handleClickChart={() => console.log('click persentase linechart')} handleClickChart={() => console.log('click persentase linechart')}
/> />
: :
<div style={{color: 'red', textAlign: 'center', marginTop: 50}}>No data found</div> <div style={{ color: 'red', textAlign: 'center', marginTop: 50 }}>No data found</div>
} }
</div> </div>
</div> </div>
@ -3579,7 +3580,7 @@ class SiopasMap extends Component {
}); });
// console.log('dataChart', dataChart); // console.log('dataChart', dataChart);
return ( return (
<Carousel <Carousel
activeIndex={this.state.activeIndex3} activeIndex={this.state.activeIndex3}
@ -3589,9 +3590,9 @@ class SiopasMap extends Component {
className="chart-doughnut-carousel" className="chart-doughnut-carousel"
> >
<CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex3} onClickHandler={this.goToIndex3} /> <CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex3} onClickHandler={this.goToIndex3} />
{this.renderChartCostProyek(dataChart)} {this.renderChartCostProyek(dataChart)}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous3} style={{color: 'black'}} /> <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous3} style={{ color: 'black' }} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next3} style={{color: 'black'}} /> <CarouselControl direction="next" directionText="Next" onClickHandler={this.next3} style={{ color: 'black' }} />
</Carousel> </Carousel>
) )
} }
@ -3610,12 +3611,12 @@ class SiopasMap extends Component {
return ( return (
<CarouselItem <CarouselItem
key={idx} key={idx}
onExiting={() => this.setState({animating3: true})} onExiting={() => this.setState({ animating3: true })}
onExited={() => this.setState({animating3: false})} onExited={() => this.setState({ animating3: false })}
> >
<div className="chart-doughnut-carousel-item"> <div className="chart-doughnut-carousel-item">
<div className="chart-doughnut-caption"> <div className="chart-doughnut-caption">
<div className="text-center text-bold" style={{fontSize: 12}}>{item.proyek_name}</div> <div className="text-center text-bold" style={{ fontSize: 12 }}>{item.proyek_name}</div>
{/* <div className="text-center total-luas"> {/* <div className="text-center total-luas">
<span className="total-luas-title">Luas coverage: </span> <span className="total-luas-title">Luas coverage: </span>
{ numberWithCommas(item.total_luas_opt) } km<sup>2</sup> { numberWithCommas(item.total_luas_opt) } km<sup>2</sup>
@ -3624,13 +3625,13 @@ class SiopasMap extends Component {
<div className="chart-doughnut-chart"> <div className="chart-doughnut-chart">
{ {
item.labels.length > 0 ? item.labels.length > 0 ?
<Line <Line
options={optionsChartCostProyek} options={optionsChartCostProyek}
data={item || defaultCostProyek} data={item || defaultCostProyek}
handleClickChart={() => console.log('click persentase linechart')} handleClickChart={() => console.log('click persentase linechart')}
/> />
: :
<div style={{color: 'red', textAlign: 'center', marginTop: 50}}>No data found</div> <div style={{ color: 'red', textAlign: 'center', marginTop: 50 }}>No data found</div>
} }
{/* <div style={{color: 'red', textAlign: 'center'}}>Test</div> */} {/* <div style={{color: 'red', textAlign: 'center'}}>Test</div> */}
</div> </div>
@ -3662,7 +3663,7 @@ class SiopasMap extends Component {
date = date ? moment(date).format('DD MMM YY') : '-' date = date ? moment(date).format('DD MMM YY') : '-'
bcwp = bcwp ? this.renderFormatRupiah(bcwp.toString(), 'Rp') : '-'; bcwp = bcwp ? this.renderFormatRupiah(bcwp.toString(), 'Rp') : '-';
acwp = acwp ? this.renderFormatRupiah(acwp.toString(), 'Rp') : '-'; acwp = acwp ? this.renderFormatRupiah(acwp.toString(), 'Rp') : '-';
return [date,bcwp,acwp] return [date, bcwp, acwp]
}) : []; }) : [];
// let valueCostPlaning = dataRes ? dataRes.map(res => res.rencana_biaya) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] // let valueCostPlaning = dataRes ? dataRes.map(res => res.rencana_biaya) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
// let valueCostPlanning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100] // let valueCostPlanning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
@ -3702,19 +3703,19 @@ class SiopasMap extends Component {
}); });
// console.log('dataChart', dataChart); // console.log('dataChart', dataChart);
return ( return (
<Carousel <Carousel
activeIndex={this.state.activeIndex3} activeIndex={this.state.activeIndex3}
next={this.next3} next={this.next3}
previous={this.previous3} previous={this.previous3}
interval={false} interval={false}
className={ this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-carousel" : "chart-doughnut-carousel-max"} className={this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-carousel" : "chart-doughnut-carousel-max"}
> >
<CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex3} onClickHandler={this.goToIndex3} /> <CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex3} onClickHandler={this.goToIndex3} />
{this.renderChartKurvaS(dataChart)} {this.renderChartKurvaS(dataChart)}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous3} style={{color: 'black'}} /> <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous3} style={{ color: 'black' }} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next3} style={{color: 'black'}} /> <CarouselControl direction="next" directionText="Next" onClickHandler={this.next3} style={{ color: 'black' }} />
</Carousel> </Carousel>
) )
} }
@ -3733,12 +3734,12 @@ class SiopasMap extends Component {
return ( return (
<CarouselItem <CarouselItem
key={idx} key={idx}
onExiting={() => this.setState({animating3: true})} onExiting={() => this.setState({ animating3: true })}
onExited={() => this.setState({animating3: false})} onExited={() => this.setState({ animating3: false })}
> >
<div className={this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-carousel-item" : "chart-doughnut-carousel-item-max"}> <div className={this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-carousel-item" : "chart-doughnut-carousel-item-max"}>
<div className="chart-doughnut-caption"> <div className="chart-doughnut-caption">
<div className="text-center text-bold" style={{fontSize: 12}}>{item.proyek_name}</div> <div className="text-center text-bold" style={{ fontSize: 12 }}>{item.proyek_name}</div>
{/* <div className="text-center total-luas"> {/* <div className="text-center total-luas">
<span className="total-luas-title">Luas coverage: </span> <span className="total-luas-title">Luas coverage: </span>
{ numberWithCommas(item.total_luas_opt) } km<sup>2</sup> { numberWithCommas(item.total_luas_opt) } km<sup>2</sup>
@ -3746,37 +3747,37 @@ class SiopasMap extends Component {
</div> </div>
{ {
this.state.kurvaSWindowMode === 'default' ? this.state.kurvaSWindowMode === 'default' ?
<div className="chart-doughnut-chart"> <div className="chart-doughnut-chart">
{ {
item.labels.length > 0 ? item.labels.length > 0 ?
<Line <Line
options={optionsChartKurvaS} options={optionsChartKurvaS}
height={null} height={null}
width={null} width={null}
data={item || defaultKurvaS} data={item || defaultKurvaS}
handleClickChart={() => console.log('click persentase linechart')} handleClickChart={() => console.log('click persentase linechart')}
redraw={true} redraw={true}
/> />
: :
<div style={{color: 'red', textAlign: 'center', marginTop: 50}}>No data found</div> <div style={{ color: 'red', textAlign: 'center', marginTop: 50 }}>No data found</div>
} }
</div> </div>
: :
<div className="chart-doughnut-chart-max"> <div className="chart-doughnut-chart-max">
{ {
item.labels.length > 0 ? item.labels.length > 0 ?
<Line <Line
options={optionsChartKurvaS} options={optionsChartKurvaS}
height={null} height={null}
width={null} width={null}
data={item || defaultKurvaS} data={item || defaultKurvaS}
handleClickChart={() => console.log('click persentase linechart')} handleClickChart={() => console.log('click persentase linechart')}
redraw={true} redraw={true}
/> />
: :
<div style={{color: 'red', textAlign: 'center', marginTop: 50}}>No data found</div> <div style={{ color: 'red', textAlign: 'center', marginTop: 50 }}>No data found</div>
} }
</div> </div>
} }
{/* <div className={this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-chart" : "chart-doughtnut-chart-max"}> {/* <div className={this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-chart" : "chart-doughtnut-chart-max"}>
{ {
@ -3974,7 +3975,7 @@ class SiopasMap extends Component {
checkedKeysAnalisa={this.state.checkedKeysAnalisa} checkedKeysAnalisa={this.state.checkedKeysAnalisa}
checkedKeysEmployeeDivision={this.state.checkedKeysEmployeeDivision} checkedKeysEmployeeDivision={this.state.checkedKeysEmployeeDivision}
checkedKeysProjectTree={this.state.checkedKeysProjectTree} checkedKeysProjectTree={this.state.checkedKeysProjectTree}
setCheckedKeysProjectTree={(data) => this.setState({checkedKeysProjectTree: data})} setCheckedKeysProjectTree={(data) => this.setState({ checkedKeysProjectTree: data })}
salesGroupTree={this.state.salesGroupTree} salesGroupTree={this.state.salesGroupTree}
employeeDivisionTree={this.state.employeeDivisionTree} employeeDivisionTree={this.state.employeeDivisionTree}
setSalesGroupTree={(data) => this.setState({ salesGroupTree: data })} setSalesGroupTree={(data) => this.setState({ salesGroupTree: data })}
@ -4033,7 +4034,7 @@ class SiopasMap extends Component {
<Row className='progress-bottom'> <Row className='progress-bottom'>
<Col md={12} style={{ paddingRight: 0, paddingLeft: 0 }}> <Col md={12} style={{ paddingRight: 0, paddingLeft: 0 }}>
{/* <Card className="remove-gap-bs-card" style={{ height: 'calc(100vh - 50px - (100vh / 2))' }}> */} {/* <Card className="remove-gap-bs-card" style={{ height: 'calc(100vh - 50px - (100vh / 2))' }}> */}
<Card className="remove-gap-bs-card" style={ this.state.kurvaSWindowMode === 'default' ? { <Card className="remove-gap-bs-card" style={this.state.kurvaSWindowMode === 'default' ? {
height: 'calc(100vh - 50px - (100vh / 2))', height: 'calc(100vh - 50px - (100vh / 2))',
top: 0, top: 0,
zIndex: 0 zIndex: 0
@ -4043,14 +4044,14 @@ class SiopasMap extends Component {
zIndex: 9999 zIndex: 9999
}}> }}>
<CardHeader className="panel-title"> <CardHeader className="panel-title">
<span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>Kurva S</span> <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>Kurva S</span>
<div style={{ marginRight: '7px', float: 'right', marginLeft: 'auto', right: 0}}> <div style={{ marginRight: '7px', float: 'right', marginLeft: 'auto', right: 0 }}>
<span onClick={() => this.toggleKurvaSWindowMode()} style={{ marginRight: '15px', cursor: 'pointer'}}> { this.state.kurvaSWindowMode === 'default' ? <i className="fa fa-expand"></i> : <i className="fa fa-compress"></i> }</span> <span onClick={() => this.toggleKurvaSWindowMode()} style={{ marginRight: '15px', cursor: 'pointer' }}> {this.state.kurvaSWindowMode === 'default' ? <i className="fa fa-expand"></i> : <i className="fa fa-compress"></i>}</span>
<span onClick={() => this.closeProggressBottom()} style={{ marginRight: '5px', cursor: 'pointer' }}>x</span> <span onClick={() => this.closeProggressBottom()} style={{ marginRight: '5px', cursor: 'pointer' }}>x</span>
</div> </div>
</CardHeader> </CardHeader>
<CardBody className="no-padding"> <CardBody className="no-padding">
{ this.renderCarouselKurvaS() } {this.renderCarouselKurvaS()}
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
@ -4068,14 +4069,14 @@ class SiopasMap extends Component {
}}> }}>
<Card className="remove-gap-bs-card" style={{ height: 306 }}> <Card className="remove-gap-bs-card" style={{ height: 306 }}>
<CardHeader className="panel-title"> <CardHeader className="panel-title">
<span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>{(APP_MODE === 'ADW') ? 'Budget Control This Period' : 'Status Proyek' }</span> <span onClick={this.closeStatusRight} style={{ float: 'right', marginLeft: 'auto', right: 0, cursor: 'pointer' }}>x</span> <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>{(APP_MODE === 'ADW') ? 'Budget Control This Period' : 'Status Proyek'}</span> <span onClick={this.closeStatusRight} style={{ float: 'right', marginLeft: 'auto', right: 0, cursor: 'pointer' }}>x</span>
</CardHeader> </CardHeader>
<CardBody className="small-padding" style={{overflow: 'auto'}}> <CardBody className="small-padding" style={{ overflow: 'auto' }}>
{ {
(APP_MODE === 'ADW') ? (APP_MODE === 'ADW') ?
this.renderCarouselStatusProyekAdw() this.renderCarouselStatusProyekAdw()
: :
this.renderCarouselStatusProyek() this.renderCarouselStatusProyek()
} }
</CardBody> </CardBody>
</Card> </Card>

Write Preview
Loading…
Cancel
Save