\n \n
\n - \n
\n \n ![\"logo\"](\"./assets/dwr_images/logo_wo_bg.png\")
\n \n กรมทรัพยากรน้ำ\n \n \n
\n );\n\n const displayContentPC = (\n \n \n
\n );\n\n const displayContentMobile = (\n \n {displayToggleMenu}\n
\n {displayMenuPC}
\n \n
\n );\n\n return (\n \n {displayToggleMenu}\n
\n \n {displayLogo}\n
\n \n {displayMenuMobile}\n
\n \n {!mobileMode ? displayContentPC : displayContentMobile}\n
\n );\n};\n\nexport default TopMenu;\n","import React from \"react\";\n\nconst Version = () => {\n return version 1.0.40
;\n};\n\nexport default Version;\n","import React from \"react\";\nimport { Link, useHistory } from \"react-router-dom\";\nimport {\n updateProfile,\n updateUserData,\n updateUserPermissions,\n updateUserDetail,\n} from \"../redux/action/profileAction\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport Version from \"./Version\";\n\nconst Header = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n const mobileMode = useSelector((state) => state.dataReducer.mobileMode);\n const profile = useSelector((state) => state.profileReducer.profile);\n\n const onHandleLogout = () => {\n dispatch(updateProfile(\"\"));\n dispatch(updateUserData(\"\"));\n dispatch(updateUserDetail(\"\"));\n dispatch(updateUserPermissions([]));\n localStorage.setItem(\"token\", \"\");\n localStorage.setItem(\"refresh_token\", \"\");\n localStorage.setItem(\"expires_in\", \"\");\n\n history.push(\"/login\");\n };\n\n const displayContentPC = (\n \n
\n \n );\n\n return \n
\n \n
\n \n
\n \n \n เข้าสู่ระบบ{\" \"}\n \n )}\n
\n \n \n
\n\n \n \n กรมทรัพยากรน้ำ\n \n
\n \n โครงการพัฒนาเพิ่มประสิทธิภาพเครือข่ายสถานีอุทกวิทยาเพื่อรองรับการบริหารจัดการน้ำแบบบูรณาการ\n
\n\n {profile.access_token ? (\n \n ออกจากระบบ{\" \"}\n
\n ) : (\n {!mobileMode ? displayContentPC : \"\"}
;\n};\n\nexport default Header;\n","\nconst constants = {\n CLIENT_ID: \"dwr45m_web\",\n CLIENT_SECRET: 'a365b668-6b73-4239-b6ba-7e75b826eedf',\n SCOPE: 'dwr45m_api_scope offline_access',\n baseURL: 'https://imhydronetwork.amrasia.com',\n}\n\nexport default constants;","import {\n GET_IS_AUTO_VIEW,\n GET_KML_TYPE,\n GET_STATION_ID,\n GET_IS_SIDE_MENU_OPEN,\n GET_IS_MOBILE_MODE,\n GET_IS_MAP_MENU_OPEN,\n} from \"../action/dataAction\";\n\nconst initState = {\n kmlSelected: [],\n isAutoView: true,\n autoData: [],\n manualData: [],\n stationIdSelected: \"\",\n isSideMenuOpen: true,\n isMapMenuOpen: false,\n stationDetail: {},\n mobileMode: false,\n};\n\nconst dataReducer = (state = initState, action) => {\n switch (action.type) {\n case GET_IS_AUTO_VIEW:\n return {\n ...state,\n isAutoView: action.payload.isAutoView,\n };\n case GET_KML_TYPE:\n return {\n ...state,\n kmlSelected: action.payload.kmlSelected,\n };\n case GET_STATION_ID:\n return {\n ...state,\n stationIdSelected: action.payload.stationIdSelected,\n };\n case GET_IS_SIDE_MENU_OPEN:\n return {\n ...state,\n isSideMenuOpen: action.payload.isSideMenuOpen,\n };\n case GET_IS_MOBILE_MODE:\n return {\n ...state,\n mobileMode: action.payload.mobileMode,\n };\n case GET_IS_MAP_MENU_OPEN:\n return {\n ...state,\n isMapMenuOpen: action.payload.isMapMenuOpen,\n };\n\n default:\n break;\n }\n\n return state;\n};\n\nexport default dataReducer;\n","export const GET_STATION_FILTER = \"GET_STATION_FILTER\";\nexport const GET_MANUAL_MEASURE_TYPE = \"GET_MANUAL_MEASURE_TYPE\";\nexport const GET_AUTO_MEASURE_TYPE = \"GET_AUTO_MEASURE_TYPE\";\n\nexport const updateStationFilter = (data) => {\n return {\n type: GET_STATION_FILTER,\n payload: {\n stations: data,\n },\n };\n};\nexport const updateAutoMeasuerType = (data) => {\n return {\n type: GET_AUTO_MEASURE_TYPE,\n payload: {\n autoMeasureType: data,\n },\n };\n};\nexport const updateManualMeasuerType = (data) => {\n return {\n type: GET_MANUAL_MEASURE_TYPE,\n payload: {\n manualMeasureType: data,\n },\n };\n};\n","import {\n GET_STATION_FILTER,\n GET_AUTO_MEASURE_TYPE,\n GET_MANUAL_MEASURE_TYPE,\n} from \"../action/mapAction\";\n\nconst initState = {\n stations: [],\n autoMeasureType: \"hydro\",\n manualMeasureType: \"hydro\",\n};\n\nconst mapReducer = (state = initState, action) => {\n switch (action.type) {\n case GET_STATION_FILTER:\n return {\n ...state,\n stations: action.payload.stations,\n };\n case GET_AUTO_MEASURE_TYPE:\n return {\n ...state,\n autoMeasureType: action.payload.autoMeasureType,\n };\n case GET_MANUAL_MEASURE_TYPE:\n return {\n ...state,\n manualMeasureType: action.payload.manualMeasureType,\n };\n\n default:\n break;\n }\n\n return state;\n};\n\nexport default mapReducer;\n","import {\n GET_PROFILE,\n GET_USER_PERMISSIONS,\n GET_USER_DATA,\n GET_USER_DETAIL,\n} from \"../action/profileAction\";\n\nconst initState = {\n profile: \"\",\n userPermissions: [],\n userData: \"\",\n userDetail: \"\",\n};\n\nconst profileReducer = (state = initState, action) => {\n switch (action.type) {\n case GET_PROFILE:\n return {\n ...state,\n profile: action.payload.profile,\n };\n case GET_USER_PERMISSIONS:\n return {\n ...state,\n userPermissions: action.payload.userPermissions,\n };\n case GET_USER_DATA:\n return {\n ...state,\n userData: action.payload.userData,\n };\n case GET_USER_DETAIL:\n return {\n ...state,\n userDetail: action.payload.userDetail,\n };\n\n default:\n break;\n }\n\n return state;\n};\n\nexport default profileReducer;\n","import { combineReducers } from \"redux\";\nimport dataReducer from \"./dataReducer\";\nimport mapReducer from \"./mapReducer\";\nimport profileReducer from \"./profileReducer\";\n\nconst rootReducer = combineReducers({\n dataReducer,\n profileReducer,\n mapReducer,\n});\n\nexport default rootReducer;\n","import { createStore } from \"redux\";\nimport { persistStore, persistReducer } from \"redux-persist\";\nimport storage from \"redux-persist/lib/storage\";\n\nimport rootReducer from \"./reducer/rootReducer\";\n\nconst persistConfig = {\n key: \"root\",\n storage,\n whitelist: [\"profileReducer\"],\n};\n\nconst persistedReducer = persistReducer(persistConfig, rootReducer);\n\nconst configureStore = () => {\n let store = createStore(persistedReducer);\n let persistor = persistStore(store);\n return { store, persistor };\n};\n\nexport default configureStore;\n","import axios from \"axios\";\nimport constants from \"./constants\";\nimport qs from \"qs\";\nimport jwt_decode from \"jwt-decode\";\nimport configureStore from \"../redux/configureStore\";\n// import { createBrowserHistory } from 'history';\nimport {\n updateProfile,\n updateUserData,\n updateUserDetail,\n updateUserPermissions,\n} from \"../redux/action/profileAction\";\n\nlet dwrUrl = localStorage.getItem(\"dwrUrl\");\nlet authUrl = localStorage.getItem(\"authUrl\");\n//let dwrUrl = \"https://localhost:44357/api/v1\";\n//let authUrl = \"https://localhost:5001/connect/token\";\n//alert('dwrUrl : ' + dwrUrl + ' authUrl : ' + authUrl)\nvar refreshing = false;\nconst dwrApi = axios.create({\n baseURL: dwrUrl,\n headers: {\n // Authorization: `Bearer ${token}`,\n \"Content-Type\": \"application/json\",\n // ContentType: \"application/x-www-form-urlencoded\",\n },\n});\n\nasync function getRefreshToken(refresh_token) {\n refreshing = true;\n let formData = qs.stringify({\n grant_type: \"refresh_token\",\n client_id: constants.CLIENT_ID,\n client_secret: constants.CLIENT_SECRET,\n refresh_token,\n });\n\n try {\n let res = await axios.post(`${authUrl}`, formData);\n // console.log('refresh', res);\n return res;\n } catch (err) {\n console.error(err);\n if (err.response.data.status == 401) {\n localStorage.clear();\n }\n\n // location.href = '/login'\n } finally {\n refreshing = false;\n }\n}\n\ndwrApi.interceptors.request.use(\n async function (config) {\n try {\n const { store } = configureStore();\n // console.log({ store })\n const userData = store.getState().profileReducer;\n // const route = createBrowserHistory();\n // console.log({ userData, route })\n\n let refreshToken = localStorage.getItem(\"refresh_token\");\n let tokenExpireTime = localStorage.getItem(\"expires_in\");\n let accessToken = localStorage.getItem(\"token\");\n let now = new Date().getTime();\n let authConfig = config;\n\n if (\n accessToken &&\n !refreshing &&\n tokenExpireTime &&\n now > tokenExpireTime\n ) {\n console.warn(\"SESSION EXPIRED!\");\n\n const res = await getRefreshToken(refreshToken);\n if (!!res) {\n const { access_token, refresh_token, expires_in } = res.data;\n const decoded = await jwt_decode(access_token);\n\n store.dispatch(updateProfile(res.data));\n store.dispatch(updateUserData(decoded));\n\n await dwrApi\n .get(`/UserPermissions/User/${decoded.sub}`)\n .then((res) => {\n console.log(\"usepermission\", res.data);\n store.dispatch(updateUserPermissions(res.data));\n })\n .catch((error) => console.error(error));\n\n await dwrApi\n .get(`/HydroUsers/${decoded.sub}`)\n .then((res) => {\n store.dispatch(updateUserDetail(res.data));\n })\n .catch((err) => console.log(err.message));\n\n console.log({\n access_token,\n refresh_token,\n store: store.getState(),\n decoded,\n });\n\n localStorage.setItem(\"token\", access_token);\n localStorage.setItem(\"refresh_token\", refresh_token);\n localStorage.setItem(\n \"expires_in\",\n expires_in * 1000 + new Date().getTime()\n );\n\n authConfig = {\n ...config,\n headers: {\n ...config.headers,\n Authorization: `Bearer ${access_token}`,\n },\n };\n return authConfig;\n }\n } else {\n // console.log({ userData });\n\n authConfig = {\n ...config,\n headers: {\n ...config.headers,\n Authorization: `Bearer ${accessToken}`,\n },\n };\n return authConfig;\n\n // console.log({ accessToken, isExpired: tokenExpireTime && now > tokenExpireTime });\n }\n return config;\n } catch (err) {\n console.error({ REQ: err });\n // route.push('/login');\n }\n },\n function (error) {\n console.error({ error });\n // Do something with request error\n return Promise.reject(error);\n }\n);\n\nexport { dwrApi };\n","import React from \"react\";\nimport ProtectGate from \"../Tools/ProtectGate/ProtectGate\";\nimport { Link, useHistory } from \"react-router-dom\";\n\nconst SubAccordionEl = ({ list }) => {\n const { permission, path, subList, id, label } = list;\n\n const history = useHistory();\n const { pathname } = history.location;\n\n const stylesFn = (tagPath, tagPathEx) => {\n const condition1 = Boolean(pathname == tagPath);\n const condition2 = tagPathEx\n ? Boolean(pathname == tagPathEx) || Boolean(pathname.startsWith(tagPath))\n : false;\n\n return {\n backgroundColor: condition1 || condition2 ? \"rgba(0,0,0,0.1)\" : \"\",\n color: condition1 || condition2 ? \"inherit\" : \"\",\n };\n };\n\n const styles = {\n menuButton: {\n fontFamily: \"inherit\",\n fontWeight: \"bold\",\n },\n };\n return (\n \n
\n \n \n \n
\n \n \n {label}\n \n
\n \n {subList && subList.length\n ? subList.map((item, i) => {\n return (\n \n \n \n {item?.label}\n \n \n \n );\n })\n : \"\"}\n
\n \n
\n \n \n \n
\n \n \n {title || \"\"}\n \n
\n \n {list.length\n ? list.map((item, i) => {\n if (item.subList && item.subList.length) {\n return \n \n \n {item?.label}\n \n \n \n );\n }\n })\n : \"\"}\n
\n \n
\n );\n};\n\nexport default SideMenu;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaRegCommentDots } from \"react-icons/fa\";\n\nimport { useForm } from \"react-hook-form\";\nimport { kml as togeojson } from \"@tmcw/togeojson\";\nimport axios from \"axios\";\nimport { dwrApi } from \"../api/dwrApi\";\n\nconst ModalForecastFlood = () => {\n let map;\n const google = window.google;\n const mapDiv = document.getElementById(\"gmap-f\");\n const {\n register: registerFlood,\n handleSubmit: handleSubmitFlood,\n watch,\n } = useForm();\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [kmlForecast, setKmlForecast] = useState([]);\n const [selectedMapTypeId, setSelectedMapTypeId] = useState(\"satellite\");\n\n const [isLoading, setIsLoading] = useState(false);\n const [lastestZoom, setLastestZoom] = useState(6);\n const [kmlSelected, setKmlSelected] = useState(null);\n const [legendSrc, setLegendSrc] = useState(null);\n const [geoJson, setGeoJson] = useState([]);\n const [tryInit, setTryInit] = useState(0);\n const coords = [13.24, 101.2];\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n zIndex: \"1050\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n colorGuide: {\n position: \"absolute\",\n bottom: \"50px\",\n left: \"10px\",\n zIndex: \"1030\",\n },\n kmlMenu: {\n position: \"absolute\",\n top: \"50px\",\n left: \"10px\",\n zIndex: \"1030\",\n maxHeight: \"225px\",\n overflowY: \"auto\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n height: \"85vh\",\n width: \"90vw\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n // resetCs();\n };\n\n const onHandleSelectKml = (ev) => {\n const val = JSON.parse(ev.kmlForecast);\n setKmlSelected(val);\n };\n\n const displayButtonOpenModal = (\n {roleUser}
\n {menuList.map((menu, i) => {\n return \n รายการพยากรณ์แผนที่น้ำท่วม\n
\n );\n\n const getForecastConfig = async () => {\n // .get(\"/assets/config/forecastConfig.json\")\n await dwrApi\n .get(\"/ForecastMap\")\n .then((res) => {\n console.log(\"fc\", res.data);\n const list = res.data;\n\n setKmlForecast(list);\n setKmlSelected(list[0]);\n })\n .catch((err) => {\n console.log(\"err\", err);\n });\n };\n\n useEffect(() => {\n getForecastConfig();\n }, []);\n\n const displayHeader = (\n \n
\n );\n })\n : \"\"}\n \n );\n\n const displayContent = (\n \n
\n \n \n
\n \n );\n const generateGeoJson = async () => {\n if (kmlSelected) {\n await new google.maps.Data(null);\n setIsLoading(true);\n\n const { basinName, center, floodArea, folderName, legend } = kmlSelected;\n\n let targetOverlay = new google.maps.GroundOverlay(floodArea.href, {\n north: floodArea.imageBounds.north,\n south: floodArea.imageBounds.south,\n east: floodArea.imageBounds.east,\n west: floodArea.imageBounds.west,\n });\n\n targetOverlay.setMap(map);\n setLegendSrc(legend.href);\n }\n };\n\n const initMap = async () => {\n const { latitude, longitude } = kmlSelected.center;\n\n try {\n if (google) {\n // let lat = 13.736717;\n // let lng = 100.523186;\n let lat = kmlSelected ? latitude : 13.736717;\n let lng = kmlSelected ? longitude : 100.523186;\n\n map = await new google.maps.Map(mapDiv, {\n center: new google.maps.LatLng(lat, lng),\n zoom: kmlSelected ? 9 : lastestZoom,\n mapTypeId: selectedMapTypeId,\n });\n\n await generateGeoJson();\n\n await map.addListener(\"zoom_changed\", (ev) => {\n if (map && map.zoom) {\n setLastestZoom(map.zoom);\n } else {\n setLastestZoom(6);\n }\n });\n\n await map.addListener(\"maptypeid_changed\", () => {\n setSelectedMapTypeId(map.getMapTypeId());\n });\n\n setTryInit(0);\n }\n } catch (e) {\n console.log(\"init error: \" + e.message);\n setTryInit(tryInit + 1);\n }\n };\n\n useEffect(() => {\n if (modalIsOpen) {\n console.log(\"init map\");\n initMap();\n }\n }, [kmlSelected, mapDiv, modalIsOpen, tryInit]);\n\n return (\n {displayKmlMenu}
\n \n \n {displayButtonOpenModal}\n \n {displayHeader}\n {displayContent}\n {/*
\n );\n};\n\nexport default ModalForecastFlood;\n","import React, { useState, useEffect } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useForm } from \"react-hook-form\";\nimport Select from \"react-select\";\nimport {\n updateStationId,\n updateIsAutoView,\n updateKmlType,\n updateIsSideMenuOpen,\n} from \"../redux/action/dataAction\";\n\nimport {\n updateStationFilter,\n updateAutoMeasuerType,\n updateManualMeasuerType,\n} from \"../redux/action/mapAction\";\nimport ModalForecastFlood from \"./ModalForecastFlood\";\n\nconst MapMenu = () => {\n const basin22Checkbox = document.getElementById(\"basin22_checkbox\");\n const basin25Checkbox = document.getElementById(\"basin25_checkbox\");\n const subBasin25Checkbox = document.getElementById(\"subBasin25_checkbox\");\n const subBasin22Checkbox = document.getElementById(\"subBasin22_checkbox\");\n const riverMainCheckbox = document.getElementById(\"riverMain_checkbox\");\n const riverSubCheckbox = document.getElementById(\"riverSub_checkbox\");\n\n const dispatch = useDispatch();\n const [allStation, setAllStation] = useState();\n const [stationByType, setStationByType] = useState([]);\n const [stationByMeasure, setStationByMeasure] = useState([]);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [selectedStation, setSelectedStation] = useState(\"\");\n const isAutoView = useSelector((state) => state.dataReducer.isAutoView);\n const autoMeasureType = useSelector(\n (state) => state.mapReducer.autoMeasureType\n );\n const manualMeasureType = useSelector(\n (state) => state.mapReducer.manualMeasureType\n );\n const kmlSelected = useSelector((state) => state.dataReducer.kmlSelected);\n\n const defaultValues = {\n autoDataType: \"hydro\",\n manualDataType: \"hydro\",\n };\n\n const { register, handleSubmit, getValues, setValue, reset, watch } = useForm(\n {\n defaultValues,\n }\n );\n let options = [];\n const autoFormData = getValues(\"autoDataType\");\n const manualFormData = getValues(\"manualDataType\");\n\n const styles = {\n activeButton: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n border: \"none\",\n fontSize: \"16px\",\n fontFamily: \"inherit\",\n paddingInline: \"30px\",\n },\n normalButton: {\n background:\n \"transparent linear-gradient(180deg, #EBECEC 0%, #D8DADA 50%, #CBCDCE 100%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n border: \"none\",\n fontSize: \"16px\",\n fontFamily: \"inherit\",\n paddingInline: \"30px\",\n },\n optionHeader: {\n color: \"#231F20\",\n fontSize: \"16px\",\n fontWeight: \"bold\",\n },\n };\n\n const onHandleCheck = () => {\n try {\n document.getElementById(kmlSelected).checked = true;\n } catch (e) {\n console.log(e.message);\n }\n };\n\n const filterByTypeFn = (data) => {\n console.log({ isAutoView });\n if (isAutoView) {\n const autoStation = data.filter((station) => {\n return station.stationTypeId == 2 && station.active == \"Y\";\n });\n setStationByType(autoStation);\n } else if (!isAutoView) {\n const manualStation = data.filter((station) => {\n return station.stationTypeId == 1 && station.active == \"Y\";\n });\n setStationByType(manualStation);\n }\n };\n\n const filterByMeasureFn = (data) => {\n console.log(\"filteredStation\", data);\n setStationByMeasure([]);\n data.map((station) => {\n let hydroId = [];\n let meteoId = [];\n const configStationArr = station.configDataStation;\n\n configStationArr.map((stationData) => {\n if (stationData.active == \"Y\") {\n hydroId.push(stationData.hydroTypeId);\n meteoId.push(stationData.meteotypeId);\n }\n });\n\n // console.log({ hydroId, meteoId });\n\n if (station.stationTypeId == 1) {\n if (!hydroId.includes(null) && manualMeasureType === \"hydro\") {\n setStationByMeasure((stationByMeasure) => [\n ...stationByMeasure,\n station,\n ]);\n } else if (meteoId.includes(\"01\") && manualMeasureType === \"meteo_1\") {\n setStationByMeasure((stationByMeasure) => [\n ...stationByMeasure,\n station,\n ]);\n } else if (!meteoId.includes(null) && manualMeasureType === \"meteo\") {\n setStationByMeasure((stationByMeasure) => [\n ...stationByMeasure,\n station,\n ]);\n }\n } else if (station.stationTypeId == 2) {\n if (!hydroId.includes(null) && autoMeasureType === \"hydro\") {\n setStationByMeasure((stationByMeasure) => [\n ...stationByMeasure,\n station,\n ]);\n } else if (!meteoId.includes(null) && autoMeasureType === \"meteo\") {\n setStationByMeasure((stationByMeasure) => [\n ...stationByMeasure,\n station,\n ]);\n }\n }\n\n // if (\n // autoMeasureType == \"hydro\" &&\n // hydroId.includes(\"01\") &&\n // autoMeasureType !== \"meteo_1\"\n // ) {\n // setStationByMeasure((stationByMeasure) => [\n // ...stationByMeasure,\n // station,\n // ]);\n // } else if (\n // autoMeasureType == \"meteo\" &&\n // !meteoId.includes(null)\n // ) {\n\n // setStationByMeasure((stationByMeasure) => [\n // ...stationByMeasure,\n // station,\n // ]);\n // } else if (\n // autoMeasureType == \"meteo_1\" &&\n // meteoId.includes(\"01\")\n // ) {\n // setStationByMeasure((stationByMeasure) => [\n // ...stationByMeasure,\n // station,\n // ]);\n // }\n });\n };\n\n const filterStationFn = (data) => {\n filterByTypeFn(data);\n };\n\n const fetchAllStation = () => {\n dwrApi\n .get(\"/Stations?Publish=Y\")\n .then((res) => {\n setAllStation(res.data);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n\n // setAllStation(mockStations)\n };\n\n useEffect(() => {\n console.log({ stationByType });\n if (!!selectedStation) {\n filterByMeasureFn([selectedStation]);\n } else {\n filterByMeasureFn(stationByType);\n }\n }, [stationByType, autoFormData, manualFormData]);\n\n useEffect(() => {\n if (stationByMeasure) {\n const filterList = stationByMeasure.filter(\n (station) => station.configDataStation.length > 0\n );\n dispatch(updateStationFilter(stationByMeasure));\n }\n }, [stationByMeasure]);\n\n useEffect(() => {\n onHandleCheck();\n }, []);\n\n useEffect(() => {\n fetchAllStation();\n setValue(\"autoDataType\", autoMeasureType);\n setValue(\"manualDataType\", manualMeasureType);\n }, []);\n\n useEffect(() => {\n if (allStation) {\n filterStationFn(allStation);\n }\n }, [allStation, isAutoView, autoFormData, manualFormData]);\n\n if (allStation && allStation.length) {\n allStation.forEach((station) => {\n if (station.active === \"Y\" && station.configDataStation.length) {\n const list = {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh} (${station.stationId}) `,\n };\n options.push(list);\n }\n });\n }\n\n const onHandleSelectStation = (ev) => {\n // console.log({ onHandleSelectStation: ev })\n if (!ev) {\n setSearchTerm(\"\");\n setSelectedStation(\"\");\n filterStationFn(allStation);\n if (isAutoView) {\n setValue(\"autoDataType\", autoMeasureType);\n } else {\n setValue(\"manualDataType\", manualMeasureType);\n }\n } else {\n setSearchTerm(ev.value);\n dispatch(updateStationId(ev.value));\n const selectStation = allStation.filter((station) => {\n return station.stationId === ev.value;\n });\n // console.log({ selectStation })\n if (selectStation.length) {\n setSelectedStation(selectStation[0]);\n const { configDataStation } = selectStation[0];\n const firstConfigData = configDataStation.find(\n (configData) => configData.active === \"Y\"\n );\n console.log({ firstConfigData, selectStation: selectStation[0] });\n if (selectStation[0].stationTypeId == 2 && !!firstConfigData) {\n let { hydroTypeId, meteotypeId } = firstConfigData;\n dispatch(updateIsAutoView(true));\n console.warn(\"SELECT AUTO\", { hydroTypeId, meteotypeId });\n if (!!hydroTypeId) {\n // setValue('autoDataType', 'hydro');\n dispatch(updateAutoMeasuerType(\"hydro\"));\n } else if (!!meteotypeId) {\n // setValue('autoDataType', 'meteo');\n dispatch(updateAutoMeasuerType(\"meteo\"));\n }\n } else if (selectStation[0].stationTypeId == 1 && !!firstConfigData) {\n let { hydroTypeId, meteotypeId } = firstConfigData;\n dispatch(updateIsAutoView(false));\n console.warn(\"SELECT MANUAL\", { hydroTypeId, meteotypeId });\n if (!!hydroTypeId) {\n // setValue('manualDataType', 'hydro');\n dispatch(updateManualMeasuerType(\"hydro\"));\n } else if (!!meteotypeId) {\n switch (meteotypeId) {\n case \"01\":\n // setValue('manualDataType', 'meteo_1');\n dispatch(updateManualMeasuerType(\"meteo_1\"));\n break;\n default:\n // setValue('manualDataType', 'meteo');\n dispatch(updateManualMeasuerType(\"meteo\"));\n break;\n }\n }\n }\n dispatch(updateStationFilter(selectStation));\n }\n }\n };\n\n const onAutoSubmit = (ev) => {\n dispatch(updateAutoMeasuerType(ev.autoDataType));\n };\n\n const onManualSubmit = (ev) => {\n dispatch(updateAutoMeasuerType(ev.manualDataType.slice(0, 5)));\n dispatch(updateManualMeasuerType(ev.manualDataType));\n };\n\n const autoViewClick = (ev) => {\n dispatch(updateAutoMeasuerType(autoFormData));\n dispatch(updateIsAutoView(true));\n reset(defaultValues);\n };\n\n const manualViewClick = (ev) => {\n dispatch(updateAutoMeasuerType(manualFormData.slice(0, 5)));\n dispatch(updateManualMeasuerType(manualFormData));\n dispatch(updateIsAutoView(false));\n reset(defaultValues);\n };\n\n const onHandleSelectKml = async (ev) => {\n let kmlBasin25 = [];\n let kmlSubBasin25 = [];\n let kmlBasin22 = [];\n let kmlSubBasin22 = [];\n let kmlRiverMain = [];\n let kmlRiverSub = [];\n\n try {\n if (basin25Checkbox.checked) {\n kmlBasin25 = await basin25Checkbox.value.split(\",\");\n }\n if (subBasin25Checkbox.checked) {\n kmlSubBasin25 = await subBasin25Checkbox.value.split(\",\");\n }\n if (basin22Checkbox.checked) {\n kmlBasin22 = await basin22Checkbox.value.split(\",\");\n }\n if (subBasin22Checkbox.checked) {\n kmlSubBasin22 = await subBasin22Checkbox.value.split(\",\");\n }\n\n if (riverMainCheckbox.checked) {\n kmlRiverMain = await riverMainCheckbox.value.split(\",\");\n }\n\n if (riverSubCheckbox.checked) {\n kmlRiverSub = await riverSubCheckbox.value.split(\",\");\n }\n\n const kmlColect = [\n ...kmlBasin25,\n ...kmlSubBasin25,\n ...kmlBasin22,\n ...kmlSubBasin22,\n ...kmlRiverMain,\n ...kmlRiverSub,\n ];\n\n dispatch(updateKmlType(kmlColect));\n } catch (e) {\n console.log(\"e\", e);\n }\n };\n // const onHandleSelectKml = (ev) => {\n // // console.log(ev.target);\n\n // try {\n // const select = ev.kmlType.map((item) => {\n // return item.split(\",\");\n // });\n // dispatch(updateKmlType(select.flat()));\n // } catch (e) {\n // console.log(\"e\", e);\n // }\n // };\n\n const onHandleUnCheck22 = (ev) => {\n if (ev.target.checked) {\n basin22Checkbox.checked = false;\n subBasin22Checkbox.checked = false;\n }\n };\n\n const onHandleUnCheck25 = (ev) => {\n if (ev.target.checked) {\n basin25Checkbox.checked = false;\n subBasin25Checkbox.checked = false;\n }\n };\n\n const displayInput = (\n \n \n
*/}\n \n {displayColorGuide}
\n \n
\n );\n\n const displayTypeButton = (\n \n \"ไม่พบสถานี\"}\n isClearable={true}\n />\n
\n\n \n \n
\n );\n\n const displayAutoOptions = (\n \n );\n const displayManualOptions = (\n \n );\n\n return (\n \n \n อัตโนมัติ\n \n
\n \n \n ธรรมดา\n \n
\n \n
\n );\n};\n\nexport default MapMenu;\n","import React, { useEffect } from \"react\";\nimport TopMenu from \"../Components/TopMenu\";\nimport Header from \"../Components/Header\";\nimport SideMenu from \"../Components/SideMenu\";\nimport { useLocation, useHistory } from \"react-router\";\nimport { useSelector } from \"react-redux\";\nimport \"semantic-ui-css/semantic.min.css\";\nimport { Menu, Sidebar } from \"semantic-ui-react\";\nimport MapMenu from \"../Components/MapMenu\";\n\nconst MainLayout = ({ children, permission }) => {\n const location = useLocation();\n const history = useHistory();\n const { pathname } = location;\n const userPermissions = useSelector(\n (state) => state.profileReducer.userPermissions\n );\n const isSideMenuOpen = useSelector(\n (state) => state.dataReducer.isSideMenuOpen\n );\n const isMapMenuOpen = useSelector((state) => state.dataReducer.isMapMenuOpen);\n const mobileMode = useSelector((state) => state.dataReducer.mobileMode);\n\n useEffect(() => {\n if (!permission) {\n // console.log('TRIGGER LOCATION', userPermissions.includes(permission))\n } else if (\n !!permission &&\n userPermissions.length > 0 &&\n !userPermissions.includes(permission)\n ) {\n history.push(\"/\");\n }\n\n // history.location.pathname\n }, [userPermissions, history.location.pathname]);\n\n const styles = {\n header: {\n height: !mobileMode ? \"135px\" : \"\",\n },\n body: {\n position: \"absolute\",\n top: !mobileMode ? \"135px\" : \"50px\",\n bottom: 0,\n left: 0,\n right: 0,\n overflowY: \"scroll\",\n },\n sidebar: {\n position: \"absolute\",\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n overflowY: \"scroll\",\n },\n content: {\n position: \"absolute\",\n // width: `${pathname !== \"/\" && isSideMenuOpen ? \"75%\" : \"100%\"}`,\n top: 0,\n bottom: 0,\n left: 0,\n right: isSideMenuOpen ? \"350px\" : 0,\n margin: `${isSideMenuOpen ? \"\" : \"auto\"}`,\n overflowY: \"scroll\",\n },\n };\n\n const displayContent = (\n \n {displayInput}\n
\n \n {/*
\n \n \n {/*
*/}\n
*/}\n \n \n ขอบเขต 25 ลุ่มน้ำ (มาตรฐานการแบ่งกลุ่มลุ่มน้ำ 2536)\n \n
\n\n ขอบเขต 22 ลุ่มน้ำ (มาตรฐานการแบ่งกลุ่มลุ่มน้ำ 2564)\n \n
\n {/* \n
\n \n \n \n \n \n
\n );\n\n const displayContentWithMapMenu = (\n <>\n {children}
\n {displayContent}
\n \n
\n \n
\n \n {pathname === \"/map\" || pathname === \"/gmap\"\n ? displayContentWithMapMenu\n : displayContent}\n
\n \n
\n\n \n
\n \n \n {newsImage && newsImage.length\n ? newsImage.map((item) => {\n return (\n \n
\n \n \n );\n};\n\nexport default ModalNewsSlideImages;\n","import React, { useState, useEffect } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { FaRegCalendarAlt } from \"react-icons/fa\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport ModalNewsSlideImages from \"../Components/ModalNewsSlideImages\";\n\nconst NewsDetail = ({ modalNewsId }) => {\n let { newsId } = useParams();\n const [newsDetail, setNewsDetail] = useState(\"\");\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [indexImgSelected, setIndexImgSelected] = useState(0);\n let displayNewDetail;\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${date} ${monthNames[month]} ${year}`;\n };\n\n const styles = {\n imgContainer: {\n borderBottom: \"3px solid #06538A\",\n paddingBottom: \"5px\",\n },\n date: {\n color: \"#06538D\",\n fontWeight: \"bold\",\n fontSize: \"16px\",\n },\n title: {\n color: \"#06538D\",\n fontWeight: \"bold\",\n fontSize: \"16px\",\n },\n };\n\n const fetchNewsDetail = () => {\n dwrApi\n .get(`News/${newsId || modalNewsId}`)\n .then((res) => setNewsDetail(res.data))\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const openModal = (img, index) => {\n setModalIsOpen(true);\n setIndexImgSelected(index);\n };\n\n useEffect(() => {\n fetchNewsDetail();\n }, []);\n\n if (newsDetail) {\n displayNewDetail = (\n \n
\n );\n })\n : \"\"}\n \n
\n\n \n window.open(newsDetail.fileAttach)}\n style={{ cursor: \"pointer\" }}\n >\n เอกสารแนบ\n
\n )}\n \n {newsDetail.newsTitle}\n
\n {newsDetail.newsDetail}
\n \n
\n \n \n );\n }\n\n return (\n <>\n {displayNewDetail}\n \n {newsDetail?.newsImage.map((img, index) => {\n return (\n openModal(img, index)}\n >\n
\n );\n })}\n \n \n
\n );\n};\n\nexport default ModalNewsDetail;\n","import React from \"react\";\n\nconst NewsCard = ({ imgUrl, detail }) => {\n const styles = {\n text: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"-webkit-box\",\n WebkitLineClamp: \"3\",\n WebkitBoxOrient: \"vertical\",\n color: \"#06538D\",\n fontWeight: \"700\",\n },\n };\n\n return (\n \n
\n \n
\n \n \n
\n );\n};\n\nexport default NewsCard;\n","import axios from \"axios\";\n\nexport const CLIENT_ID = \"dwr45m_web\";\nexport const CLIENT_SECRET = \"a365b668-6b73-4239-b6ba-7e75b826eedf\";\nexport const SCOPE = \"dwr45m_api_scope offline_access openid\";\nlet authUrl = localStorage.getItem(\"authUrl\");\n/*alert('authUrl ' + authUrl);*/\nexport const authenticate = axios.create({\n \n baseURL: authUrl,\n //baseURL: \"https://localhost:5001/connect/token\",\n headers: {\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n },\n});\n","import React, { useState, useEffect } from \"react\";\nimport ModalNewsDetail from \"../Components/ModalNewsDetail\";\n\nimport { useForm } from \"react-hook-form\";\nimport { FaUser, FaLock, FaRegNewspaper } from \"react-icons/fa\";\nimport NewsCard from \"../Components/NewsCard\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useHistory } from \"react-router-dom\";\nimport Carousel from \"react-multi-carousel\";\nimport qs from \"qs\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { useToasts } from \"react-toast-notifications\";\nimport jwt_decode from \"jwt-decode\";\nimport CountUp from \"react-countup\";\n\nimport {\n updateProfile,\n updateUserPermissions,\n updateUserData,\n} from \"../redux/action/profileAction\";\n\nimport {\n authenticate,\n CLIENT_ID,\n CLIENT_SECRET,\n SCOPE,\n} from \"../api/authenticate\";\nimport Version from \"../Components/Version\";\n\nconst Login = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n const { addToast } = useToasts();\n const [activeSlide, setActiveSlide] = useState(\"\");\n //console.log(\"🚀 ~ file: Login.js ~ line 33 ~ Login ~ activeSlide\", activeSlide)\n const [activeNews, setActiveNews] = useState(\"\");\n const [modalNewsId, setModalNewsId] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [activeNewsDisplay, setActiveNewsDisplay] = useState([]);\n const { register, handleSubmit } = useForm();\n const [visitCounted, setVisitCounted] = useState(0);\n\n const mobileMode = useSelector((state) => state.dataReducer.mobileMode);\n const profile = useSelector((state) => state.profileReducer.profile);\n\n let displaySlide;\n let displayNews;\n\n //console.log(\"LOGIN\");\n\n const styles = {\n headerContainer: {\n backgroundColor: \"#054883\",\n boxShadow: \" 0px 3px 6px #00000029\",\n fontSize: \"22px\",\n height: \"50px\",\n textAlign: \"center\",\n },\n\n container: {\n background:\n \" transparent linear-gradient(90deg, #07225A 0%, #017BBA 100%, #0086C6 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n minHeight: window.innerHeight + \"px\",\n },\n inputStyle: {\n border: \"1px solid white\",\n background: \" transparent\",\n color: \"white\",\n fontSize: \"18px\",\n fontFamily: \"THSarabunNew\",\n },\n\n newsContainer: {\n backgroundColor: \"#8ACCED\",\n color: \"black\",\n padding: \"10px\",\n },\n button: {\n fontFamily: \"THSarabunNew\",\n fontSize: \"18px\",\n },\n };\n\n const message = {\n success: \"ล็อกอินสำเร็จ\",\n error: \"กรุณาตรวจ ชื่อเข้าใช้งาน หรือ รหัสผ่าน\",\n };\n\n function testIfValidURL(str) {\n const pattern = new RegExp(\n \"^(https?:\\\\/\\\\/)\" + // protocol\n \"((([a-z\\\\d]([a-z\\\\d-]*[a-z\\\\d])*)\\\\.)+[a-z]{2,}|\" + // domain name\n \"((\\\\d{1,3}\\\\.){3}\\\\d{1,3}))\" + // OR ip (v4) address\n \"(\\\\:\\\\d+)?(\\\\/[-a-z\\\\d%_.~+]*)*\" + // port and path\n \"(\\\\?[;&a-z\\\\d%_.~+=-]*)?\" + // query string\n \"(\\\\#[-a-z\\\\d_]*)?$\",\n \"i\"\n ); // fragment locator\n return !!pattern.test(str);\n }\n\n const onHandleClickSlide = (slide) => {\n let validUrl = testIfValidURL(slide.imageUrl);\n //console.log(\"🚀 ~ file: Login.js ~ line 99 ~ onHandleClickSlide ~ validUrl\", validUrl)\n if (validUrl) {\n window.location = slide.imageUrl;\n }\n };\n\n const fetchVisitorCount = () => {\n dwrApi\n .post(\"/VisiterCount\")\n .then((res) => {\n console.log(\"VisiterCount\", res);\n setVisitCounted(+res.data + 1);\n })\n .catch((err) => {\n console.log(err);\n });\n };\n\n const fetchSlidesActive = () => {\n dwrApi\n .get(\"/slideShows/Active\")\n .then((res) => setActiveSlide(res.data))\n .catch((error) => console.error(error, error.message, \"💥💥💥 \"));\n };\n const fetchNewsActive = () => {\n dwrApi\n .get(\"/News/Active\")\n .then((res) => setActiveNews(res.data))\n .catch((error) => console.error(error, error.message, \"💥💥💥 \"));\n };\n\n const fetchUserPermissions = async (decodeUserId) => {\n await dwrApi\n .get(`/UserPermissions/User/${decodeUserId}`)\n .then((res) => {\n console.log(\"usepermission\", res.data);\n dispatch(updateUserPermissions(res.data));\n })\n .catch((error) => console.error(error, error.message, \"💥💥💥 \"));\n };\n\n useEffect(() => {\n fetchSlidesActive();\n fetchNewsActive();\n fetchVisitorCount();\n }, []);\n\n const onLoginSubmit = (ev) => {\n setIsLoading(true);\n const data = qs.stringify({\n grant_type: \"password\",\n username: ev.username,\n password: ev.password,\n client_id: CLIENT_ID,\n client_secret: CLIENT_SECRET,\n scope: SCOPE,\n });\n //alert(data);\n authenticate\n .post(\"\", data)\n .then(async (res) => {\n const decoded = await jwt_decode(res.data.access_token);\n console.log(\n \"🚀 ~ file: Login.js ~ line 135 ~ .then ~ decoded\",\n decoded\n );\n await fetchUserPermissions(decoded.sub);\n localStorage.setItem(\"token\", res.data.access_token);\n localStorage.setItem(\"refresh_token\", res.data.refresh_token);\n localStorage.setItem(\n \"expires_in\",\n res.data.expires_in * 1000 + new Date().getTime()\n );\n dispatch(updateProfile(res.data));\n dispatch(updateUserData(decoded));\n setIsLoading(false);\n addToast(\n
\n \n 
\n
\n \n \n {detail}\n
\n {message.success}
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n history.push(\"/\");\n // history.go();\n })\n .catch((err) => {\n alert('err ' + err);\n console.error(err);\n setIsLoading(false);\n addToast({message.error}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n };\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n const displayHeader = (\n \n \n
\n \n {activeNews.length\n ? activeNewsDisplay.map((news, index) => {\n return (\n setModalNewsId(news.newsId)}\n style={{ cursor: \"pointer\" }}\n >\n
\n );\n })\n : \"\"}\n \n \n );\n }\n\n const displayForm = (\n \n
\n );\n\n const displayAppStore = (\n \n
\n \n
\n \n {mobileMode ? (\n
\n \n
\n ) : (\n \"\"\n )}\n {displaySlide}
\n \n \n *สำหรับเจ้าหน้าที่เท่านั้น\n \n {isLoading ? displaySpiner : เข้าสู่ระบบ}\n \n
\n \n
\n\n \n
\n\n \n
\n \n \n วัตถุประสงค์ของโครงการ\n \n \n นโยบายเว็บไซด์และการปฎิเสธความรับผิดชอบ\n \n \n นโยบายการคุ้มครองข้อมูลส่วนบุคคล\n \n\n \n นโยบายและความปลอดภัย\n \n
\n
\n \n
\n
\n \n Visitor Number :{\" \"}\n
\n \n \n
\n );\n\n const displayCopyRights = (\n \n
\n \n 180/3\n ถนนพระรามที่ 6 แขวงพญาไท เขตพญาไท กรุงเทพ 10400\n \n );\n\n const displayContentPC = (\n
\n
\n \n );\n\n const displayContentMobile = (\n \n
\n {activeSlide.length ? displaySlide : \"\"}
\n {displayForm}
\n \n
\n {activeNews.length ? displayNews : \"\"}
\n {displayAppStore}
\n {displayAddress}
\n {displayCopyRights}\n \n {displayForm}\n
\n );\n\n return (\n {displayAppStore}
\n {displayAddress}
\n \n {displayCopyRights}\n
\n \n {displayHeader}\n\n {!mobileMode ? displayContentPC : displayContentMobile}\n {modalNewsId && (\n
\n );\n};\n\nexport default Login;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport Modal from \"react-modal\";\nimport Carousel from \"react-multi-carousel\";\nimport Slider from \"react-slick\";\n\nconst ModalStationImage = ({\n stationImage,\n setOpenModalImage,\n indexImgSelected,\n}) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const sliderRef = useRef();\n\n const settings = {\n dots: false,\n infinite: false,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n initialSlide: indexImgSelected,\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"700px\",\n minHeight: \"500px\",\n padding: \"30px\",\n },\n overlay: {\n background: \"rgba(0, 0, 0, 0.8)\",\n zIndex: \"1005\",\n },\n };\n\n const slideCarousel = {\n desktop: {\n breakpoint: {\n max: 3000,\n min: 1024,\n },\n items: 1,\n },\n mobile: {\n breakpoint: {\n max: 464,\n min: 0,\n },\n items: 1,\n },\n tablet: {\n breakpoint: {\n max: 1024,\n min: 464,\n },\n items: 1,\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setOpenModalImage(false);\n };\n\n useEffect(() => {\n openModal();\n }, [stationImage]);\n\n const displayImage = (\n \n \n {stationImage.map((img, index) => {\n return (\n
\n );\n\n const displayImage2 = (\n <>\n \n
\n );\n })\n : \"\"}\n \n \n
\n );\n};\n\nexport default ModalStationImage;\n","import React, { useState, useEffect } from \"react\";\nimport _ from \"lodash\";\nimport ModalStationImage from \"./ModalStationImage\";\nimport { MdOutlineClose } from \"react-icons/md\";\n\nconst InfoWindowEl = ({\n station,\n stationImage,\n dataLastUpdated,\n gageData,\n isAutoView,\n}) => {\n let dataHydroMeasurements = [];\n let dataMeteoMeasurements = [];\n let hydroActiveId = [];\n let meteoActiveId = [];\n\n let dataHydro = [];\n let dataMeteo = [];\n\n let dataMeteoEl01;\n let dataMeteoEl02;\n let dataMeteoEl03;\n let dataMeteoEl04;\n let dataMeteoEl06;\n let dataMeteoEl08;\n let dataMeteoEl09;\n let dataMeteoEl11;\n let dataMeteoEl12;\n let dataMeteoEl13;\n\n if (station) {\n station.configDataStation.map((item) => {\n if (item.hydroType && item.active == \"Y\")\n dataHydroMeasurements.push(item.hydroType);\n if (item.meteotype && item.active == \"Y\")\n dataMeteoMeasurements.push(item.meteotype);\n });\n }\n\n if (dataHydroMeasurements.length) {\n dataHydroMeasurements.map((item) => {\n hydroActiveId.push(item.hydroTypeId);\n });\n }\n\n if (dataMeteoMeasurements.length) {\n dataMeteoMeasurements.map((item) => {\n meteoActiveId.push(item.meteoTypeId);\n });\n }\n\n if (dataLastUpdated) {\n dataLastUpdated.datas.map((item) => {\n if (item.dataType == \"hydro\") {\n dataHydro.push(item);\n }\n if (item.dataType == \"meteo\") {\n dataMeteo.push(item);\n }\n });\n }\n\n if (dataMeteo.length) {\n dataMeteoEl01 = dataMeteo.filter((item) => item.dataId == \"01\");\n dataMeteoEl02 = dataMeteo.filter((item) => item.dataId == \"02\");\n dataMeteoEl03 = dataMeteo.filter((item) => item.dataId == \"03\");\n dataMeteoEl04 = dataMeteo.filter((item) => item.dataId == \"04\");\n dataMeteoEl06 = dataMeteo.filter((item) => item.dataId == \"06\");\n dataMeteoEl08 = dataMeteo.filter((item) => item.dataId == \"08\");\n dataMeteoEl09 = dataMeteo.filter((item) => item.dataId == \"09\");\n dataMeteoEl11 = dataMeteo.filter((item) => item.dataId == \"11\");\n dataMeteoEl12 = dataMeteo.filter((item) => item.dataId == \"12\");\n dataMeteoEl13 = dataMeteo.filter((item) => item.dataId == \"13\");\n }\n\n const styles = {\n infoContainer: {\n borderRadius: \"0px\",\n background:\n \"transparent linear-gradient(180deg, #07225a 0%, #0086c6 100%) 0% 0% no-repeat padding-box\",\n\n fontSize: \"16px\",\n padding: \"25px\",\n position: \"relative\",\n },\n buttonModal: {\n fontSize: \"16px\",\n color: \"#000000\",\n fontFamily: \"inherit\",\n },\n closeBtn: {\n position: \"absolute\",\n top: \"5px\",\n right: \"5px\",\n },\n stationDescription: {\n fontSize: \"16px\",\n color: \"white\",\n },\n container: {\n width: \"100%\",\n },\n button: {\n backgroundColor: \"white\",\n color: \"black\",\n fontSize: \"16px\",\n fontFamily: \"inherit\",\n },\n stationHeader: {\n color: `${dataHydroMeasurements.length ? \"#D5576E\" : \"#006838\"}`,\n fontSize: \"20px\",\n textAlign: \"center\",\n fontWeight: \"bold\",\n },\n\n waterHeader: {\n backgroundColor: \"#D5576E\",\n height: \"45px\",\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n color: \"white\",\n },\n waterDetailHeader: {\n fontSize: \"16px\",\n height: \"45px\",\n textAlign: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: \"10px\",\n },\n };\n\n const displayStationDetails = (\n \n
\n {displayImage2}
\n \n \n
\n );\n\n const displayHydroEl01 = (\n \n
\n \n รหัสสถานี {station?.stationLabel} : {station?.stationTh}{\" \"}\n {station?.stationEn ? <> ({station?.stationEn}) : \"\"}\n
\n {station?.subBasin?.basin?.basinTh}
\n \n ที่ตั้ง : ต.{station?.location?.subDistrict?.subDistrictTh} อ.\n {station?.location?.subDistrict?.district?.districtTh} จ.\n {station?.location?.subDistrict?.district?.province?.provinceTh}\n
\n \n ผู้ดูแล : {station?.personName}\n เบอร์ติดต่อ : {station?.tel}\n
\n หน่วยงาน : {station?.StationCenter?.region?.regionNameTh}
\n \n \n ดูรายละเอียดสถานี\n \n {dataHydroMeasurements.length ? (\n \n ดูรายละเอียดพยากรณ์\n \n ) : (\n \"\"\n )}\n
\n \n
\n \n \n {isAutoView ? (\n \n {dataHydro[0]?.items[0]?.waterLevel || \"-\"}\n เมตร\n \n ) : (\n \n {dataHydro[0]?.items[0]?.value || \"-\"}\n เมตร\n \n )}\n\n {isAutoView ? (\n // \n // {dataHydro.length && !isNaN(+dataHydro[0]?.items[0]?.waterLevel)\n // ? _.round(\n // +dataHydro[0].items[0].waterLevel +\n // (+gageData.gageLevel || 0),\n // 2\n // ).toFixed(2)\n // : \"-\"}\n // ม.รทก.\n // \n\n \n {dataHydro.length && !!dataHydro[0]?.items[0]?.waterLevel\n ? _.round(\n dataHydro[0]?.items[0]?.waterLevel +\n (!!gageData.gageLevel ? +gageData.gageLevel : 0),\n 2\n ).toFixed(2)\n : \"-\"}{\" \"}\n ม.รทก.\n \n ) : (\n \n {dataHydro.length && !!dataHydro[0]?.items[0]?.value\n ? _.round(\n dataHydro[0]?.items[0]?.value +\n (!!gageData.gageLevel ? +gageData.gageLevel : 0),\n 2\n ).toFixed(2)\n : \"-\"}{\" \"}\n ม.รทก.\n \n // \n // {dataHydro.length && !isNaN(+dataHydro[0]?.items[0]?.value)\n // ? _.round(\n // +dataHydro[0].items[0].value + (+gageData.gageLevel || 0),\n // 2\n // ).toFixed(2)\n // : \"-\"}\n // ม.รทก.\n // \n )}\n
\n \n );\n\n const displayHydroEl02 = (\n ระดับน้ำ
\n \n \n XX ลบ.ม./วินาที\n
\n \n );\n\n const displayWaterDetailsHydro = (\n ปริมาณน้ำ
\n \n
\n );\n\n const displayMeteoEl01 = (\n ข้อมูลอุทกวิทยา
\n \n {hydroActiveId.includes(\"01\") ? displayHydroEl01 : \"\"}\n {hydroActiveId.includes(\"02\") ? displayHydroEl02 : \"\"}\n
\n \n
\n );\n\n const displayMeteoEl02 = (\n \n น้ำฝน\n
\n {isAutoView ? (\n \n {dataMeteo.length ? dataMeteoEl01[0]?.items[0]?.rainFall15 : \"-\"} มม.\n
\n ) : (\n \n {dataMeteo.length ? dataMeteoEl01[0]?.items[0]?.value : \"-\"} มม.\n
\n )}\n \n
\n );\n const displayMeteoEl03 = (\n \n ระเหย\n
\n \n {dataMeteo.length ? dataMeteoEl02[0]?.items[0]?.value : \"-\"} มม.\n
\n \n
\n );\n const displayMeteoEl04 = (\n \n อุณหภูมิน้ำ\n
\n \n {dataMeteo.length ? dataMeteoEl03[0]?.items[0]?.value : \"-\"} °C\n
\n \n
\n );\n const displayMeteoEl06 = (\n \n อุณหภูมิอากาศ\n
\n {isAutoView ? (\n \n {dataMeteo.length ? dataMeteoEl04[0]?.items[0]?.temperature : \"-\"} °C\n
\n ) : (\n \n {dataMeteo.length ? dataMeteoEl04[0]?.items[0]?.value : \"-\"} °C\n
\n )}\n \n
\n );\n\n const displayMeteoEl08 = (\n \n อุณหภูมิอากาศสูงสุด\n
\n \n {dataMeteo.length ? dataMeteoEl06[0]?.items[0]?.value : \"-\"} °C\n
\n \n
\n );\n const displayMeteoEl09 = (\n \n อุณหภูมิอากาศต่ำสุด\n
\n \n {dataMeteo.length ? dataMeteoEl08[0]?.items[0]?.value : \"-\"} °C\n
\n \n
\n );\n const displayMeteoEl11 = (\n \n ความชื้นสัมพัทธ์\n
\n \n {dataMeteo.length ? dataMeteoEl09[0]?.items[0]?.value : \"-\"} %\n
\n \n
\n );\n const displayMeteoEl12 = (\n \n ความเร็วลม\n
\n \n {dataMeteo.length ? dataMeteoEl11[0]?.items[0]?.value : \"-\"} กม./ชม.\n
\n \n
\n );\n const displayMeteoEl13 = (\n \n ความนาน แสงแดด\n
\n \n {dataMeteo.length ? dataMeteoEl12[0]?.items[0]?.value : \"-\"} ชม./วัน\n
\n \n
\n );\n\n const displayWaterDetailsMeteo = (\n \n ความเข้ม แสงแดด\n
\n \n {dataMeteo.length ? dataMeteoEl13[0]?.items[0]?.value : \"-\"} Cal/cm2\n
\n \n
\n );\n\n return (\n ข้อมูลอุตุนิยมวิทยา
\n \n
\n = 5 ? \"row-cols-5\" : \"\"}`}>\n {meteoActiveId.includes(\"01\") ? displayMeteoEl01 : \"\"}\n {meteoActiveId.includes(\"02\") ? displayMeteoEl02 : \"\"}\n {meteoActiveId.includes(\"03\") ? displayMeteoEl03 : \"\"}\n {meteoActiveId.includes(\"04\") ? displayMeteoEl04 : \"\"}\n {meteoActiveId.includes(\"06\") ? displayMeteoEl06 : \"\"}\n {meteoActiveId.includes(\"08\") ? displayMeteoEl08 : \"\"}\n {meteoActiveId.includes(\"09\") ? displayMeteoEl09 : \"\"}\n {meteoActiveId.includes(\"11\") ? displayMeteoEl11 : \"\"}\n {meteoActiveId.includes(\"12\") ? displayMeteoEl12 : \"\"}\n {meteoActiveId.includes(\"13\") ? displayMeteoEl13 : \"\"}\n
\n \n \n
\n );\n};\n\nexport default InfoWindowEl;\n","import React, { useState, useEffect } from \"react\";\nimport { Line } from \"react-chartjs-2\";\n\nconst ChartHydro = ({ stationDetail, dataHydro, gageData }) => {\n const [chartWaterData, setChartWaterData] = useState();\n const [minScale, setMinScale] = useState(0);\n // const [maxScale, setMaxScale] = useState(0);\n\n\n function maxValue(ctx, dataIndex) {\n const values = ctx.chart.data.datasets[dataIndex].data;\n return values.length ? Math.max(...values) : 0;\n }\n function minValue(ctx, dataIndex) {\n const values = ctx.chart.data.datasets[dataIndex].data;\n // console.log('minValue', values)\n return values.length ? Math.min(...values) : 0;\n }\n\n function maxIndex(ctx, dataIndex) {\n const max = maxValue(ctx, dataIndex);\n const dataset = ctx.chart.data.datasets[1];\n\n return dataset.data.indexOf(max);\n }\n\n const accessMiddle = (ctx, datasetIndex) => {\n const min = minValue(ctx, datasetIndex);\n const values = ctx?.chart?.data?.datasets[datasetIndex]?.data;\n\n return values.indexOf(min);\n };\n\n function maxLabel(ctx, dataIndex) {\n return ctx.chart.data.labels[maxIndex(ctx, dataIndex)];\n }\n\n const chartWaterGenerate = async () => {\n const dataLabels = [];\n const valueWaterLevel = [];\n const valueCrossSection = [];\n\n\n if (stationDetail.crossSection.length) {\n const latestCrossSection = [...stationDetail.crossSection].sort(\n (a, b) => {\n return (\n new Date(b.surveyDate).getTime() - new Date(a.surveyDate).getTime()\n );\n }\n )[0];\n\n const sortDataXsection = latestCrossSection.crossSectionInfo.sort(\n (a, b) => {\n return +a.wideRiverX - +b.wideRiverX;\n }\n );\n\n sortDataXsection.map((item) => {\n valueCrossSection.push(item.heightY);\n dataLabels.push(+item.wideRiverX.toFixed(0));\n });\n }\n\n if (dataLabels.length && dataHydro.length) {\n for (let i = 0; i < dataLabels.length; i++) {\n\n let value = 0;\n\n switch (stationDetail.stationTypeId) {\n case 1:\n value = dataHydro[0]?.items[0]?.value + stationDetail.gage.gageLevel || 0;\n // maxWaterLevel = dataHydro[0]?.items[0]?.max + stationDetail.gage.gageLevel || 0;\n break;\n\n case 2:\n value = dataHydro[0]?.items[0]?.waterLevel + stationDetail.gage.gageLevel || 0;\n // maxWaterLevel = dataHydro[0]?.items[0]?.waterLevelMaxInDay + stationDetail.gage.gageLevel || 0;\n break;\n\n default:\n break;\n }\n\n valueWaterLevel.push(value);\n \n // valueWaterLevel.push(\n // dataHydro[0].items[0].waterLevel +\n // (stationDetail.gage.gageLevel || 0) || dataHydro[0].items[0].value\n // );\n }\n setMinScale(valueCrossSection.length ? Math.min(...valueCrossSection) : 0);\n } else {\n setMinScale(valueCrossSection.length ? Math.min(...valueCrossSection) : 0);\n }\n\n setChartWaterData({\n labels: dataLabels,\n datasets: [\n {\n label: \"รูปตัดขวาง\",\n data: valueCrossSection,\n type: \"line\",\n backgroundColor: \"rgba(\t149\t,68\t,13, 1)\",\n borderColor: \"rgba(\t149\t,68\t,13, 1)\",\n fill: \"start\",\n pointRadius: 2,\n tension: 0.1,\n },\n {\n label: \"ระดับน้ำ / เมตร\",\n data: valueWaterLevel,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 4,\n pointRadius: 0.1,\n tension: 0.1,\n fill: \"start\",\n },\n ],\n });\n };\n\n function yValue(ctx, label) {\n const chart = ctx.chart;\n const dataset = chart.data.datasets[0];\n return dataset.data[chart.data.labels.indexOf(label)];\n }\n\n let options = {\n scales: {\n x: {\n ticks: {\n // maxTicksLimit: 10,\n maxRotation: 90,\n minRotation: 90,\n },\n },\n y: {\n min: minScale - 1,\n }\n },\n plugins: {\n zoom: {\n pan: {\n enabled: true,\n mode: \"y\",\n threshold: 10,\n },\n zoom: {\n limits: {\n minRange: 1000\n },\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: false,\n },\n mode: \"y\",\n },\n },\n\n annotation: stationDetail.WarningItem\n ? {\n annotations: {\n line1: {\n type: \"line\",\n yMin: stationDetail?.WarningItem\n ? stationDetail?.WarningItem?.cri\n : 0,\n yMax: stationDetail?.WarningItem\n ? stationDetail?.WarningItem?.cri\n : 0,\n borderColor: \"rgb(255, 99, 132)\",\n borderWidth: 2,\n label: {\n fontSize: 10,\n fontColor: \"black\",\n cornerRadius: 4,\n position: \"center\",\n yAdjust: 0,\n enabled: true,\n content: `วิกฤติน้ำท่วม ${stationDetail.WarningItem?.cri} ม.รทก`,\n },\n },\n line2: {\n type: \"line\",\n yMin: stationDetail?.WarningItem\n ? stationDetail?.WarningItem?.war\n : 0,\n yMax: stationDetail?.WarningItem\n ? stationDetail?.WarningItem?.war\n : 0,\n borderColor: \"yellow\",\n borderWidth: 2,\n label: {\n fontSize: 10,\n fontColor: \"black\",\n cornerRadius: 4,\n position: \"center\",\n yAdjust: 0,\n enabled: true,\n content: `เตือนภัยน้ำท่วม ${stationDetail.WarningItem?.war} ม.รทก`,\n },\n },\n label1: {\n type: \"label\",\n content: (ctx) => \"ระดับล่าสุด \" + maxValue(ctx, 1).toFixed(2),\n font: {\n size: 10,\n },\n position: {\n x: \"center\",\n y: \"center\",\n },\n xAdjust: 0,\n yAdjust: -20,\n xValue: (ctx) => accessMiddle(ctx, 0),\n yValue: (ctx) => maxValue(ctx, 1),\n },\n label2: {\n type: \"label\",\n\n content: \"↓\",\n font: {\n size: 15,\n },\n position: {\n x: \"center\",\n y: \"center\",\n },\n xAdjust: 0,\n yAdjust: -10,\n xValue: (ctx) => accessMiddle(ctx, 0),\n yValue: (ctx) => maxValue(ctx, 1),\n },\n label3: {\n type: \"label\",\n\n callout: {\n enabled: true,\n borderColor: \"black\",\n },\n content: \"▼\",\n font: {\n size: 12,\n },\n position: {\n x: \"center\",\n y: \"center\",\n },\n xAdjust: 0,\n yAdjust: -3,\n xValue: (ctx) => accessMiddle(ctx, 0),\n yValue: gageData.gageLevel,\n // yValue: (ctx) => minValue(ctx, 0),\n },\n },\n }\n : \"\",\n },\n };\n\n useEffect(() => {\n chartWaterGenerate();\n }, []);\n\n return (\n \n {chartWaterData ?
\n );\n};\n\nexport default ChartHydro;\n","import React, { useState, useEffect } from \"react\";\nimport { Bar, Line } from \"react-chartjs-2\";\n\n\nconst ChartMeteo = ({\n stationDetail,\n dataTransactionDatasEl,\n meteoDataType,\n}) => {\n const [chartRain, setChartRain] = useState();\n const [chartEvaporate, setChartEvaporate] = useState();\n const [chartTempWater, setChartTempWater] = useState();\n const [chartTemp, setChartTemp] = useState();\n const [chartMaxTemp, setChartMaxTemp] = useState();\n const [chartMinTemp, setChartMinTemp] = useState();\n const [chartHumidity, setChartHumidity] = useState();\n const [chartWind, setChartWind] = useState();\n const [chartSunLightPeriod, setChartSunLightPeriod] = useState();\n const [chartSunLightIntensity, setChartSunLightIntensity] = useState();\n\n let dataMeteoRain = [];\n let dataMeteoEvaporate = [];\n let dataMeteoTempWater = [];\n let dataMeteoTemp = [];\n let dataMeteoMaxTemp = [];\n let dataMeteoMinTemp = [];\n let dataMeteoHumidity = [];\n let dataMeteoWind = [];\n let dataMeteoSunLightPeriod = [];\n let dataMeteoSunLightIntensity = [];\n\n const compareDate = (a, b) => {\n\n let aTime = a.items[0]?.updateTime ? new Date(a.items[0]?.updateTime).getTime() : 0;\n let bTime = b.items[0]?.updateTime ? new Date(b.items[0]?.updateTime).getTime() : 0;\n if (aTime < bTime) {\n return -1;\n }\n if (aTime > bTime) {\n return 1;\n }\n return 0\n }\n\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}น.`;\n };\n\n if (dataTransactionDatasEl.length) {\n dataTransactionDatasEl.map((item) => {\n const meteoDataRain = item.filter((el) => {\n return el.dataId === \"01\" && el.dataType === \"meteo\";\n });\n const meteoDataEvaporate = item.filter((el) => {\n return el.dataId === \"02\" && el.dataType === \"meteo\";\n });\n const meteoDataTempWater = item.filter((el) => {\n return el.dataId === \"03\" && el.dataType === \"meteo\";\n });\n const meteoDataTemp = item.filter((el) => {\n return el.dataId === \"04\" && el.dataType === \"meteo\";\n });\n const meteoDataMaxTemp = item.filter((el) => {\n return el.dataId === \"06\" && el.dataType === \"meteo\";\n });\n const meteoDataMinTemp = item.filter((el) => {\n return el.dataId === \"08\" && el.dataType === \"meteo\";\n });\n const meteoDataHumidity = item.filter((el) => {\n return el.dataId === \"09\" && el.dataType === \"meteo\";\n });\n const meteoDataWind = item.filter((el) => {\n return el.dataId === \"11\" && el.dataType === \"meteo\";\n });\n const meteoDataSunLightPeriod = item.filter((el) => {\n return el.dataId === \"12\" && el.dataType === \"meteo\";\n });\n const meteoDataSunLightIntensity = item.filter((el) => {\n return el.dataId === \"13\" && el.dataType === \"meteo\";\n });\n\n if (meteoDataRain) dataMeteoRain.push(...meteoDataRain);\n if (meteoDataEvaporate) dataMeteoEvaporate.push(...meteoDataEvaporate);\n if (meteoDataTempWater) dataMeteoTempWater.push(...meteoDataTempWater);\n if (meteoDataTemp) dataMeteoTemp.push(...meteoDataTemp);\n if (meteoDataMaxTemp) dataMeteoMaxTemp.push(...meteoDataMaxTemp);\n if (meteoDataMinTemp) dataMeteoMinTemp.push(...meteoDataMinTemp);\n if (meteoDataHumidity) dataMeteoHumidity.push(...meteoDataHumidity);\n if (meteoDataWind) dataMeteoWind.push(...meteoDataWind);\n if (meteoDataSunLightPeriod)\n dataMeteoSunLightPeriod.push(...meteoDataSunLightPeriod);\n if (meteoDataSunLightIntensity)\n dataMeteoSunLightIntensity.push(...meteoDataSunLightIntensity);\n });\n\n dataMeteoRain.sort(compareDate);\n dataMeteoEvaporate.sort(compareDate);\n dataMeteoTempWater.sort(compareDate);\n dataMeteoTemp.sort(compareDate);\n dataMeteoMaxTemp.sort(compareDate);\n dataMeteoMinTemp.sort(compareDate);\n dataMeteoHumidity.sort(compareDate);\n dataMeteoWind.sort(compareDate);\n dataMeteoSunLightPeriod.sort(compareDate);\n dataMeteoSunLightIntensity.sort(compareDate);\n }\n\n const chartOptions = {\n title: {\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n size: 24,\n },\n },\n scales: {\n x: {\n ticks: {\n maxRotation: 90,\n minRotation: 90,\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n size: 16,\n },\n },\n },\n y: {\n // suggestedMin: 0,\n ticks: {\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n size: 16,\n },\n },\n }\n },\n plugins: {\n legend: {\n position: 'top',\n labels: {\n padding: 10\n },\n labels: {\n padding: 10,\n font: {\n size: 18,\n weight: 'bold',\n family: `THSarabunNew`,\n },\n }\n },\n }\n };\n\n const chartRainGenerate = async () => {\n\n // console.log('chartRainGenerate')\n let labels = [];\n let datas = [];\n\n if (stationDetail.stationTypeId == \"2\") {\n dataMeteoRain.slice(0, 96).map((data) => {\n labels.push(\n `${convertDate(data.items[0].updateTime)} ${convertTime(\n data.items[0].updateTime\n )} `\n );\n datas.push(data.items[0].rainFall15);\n });\n } else {\n dataMeteoRain.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(\n `${convertDate(item.updateTime)}:${convertTime(item.updateTime)}`\n );\n datas.push(item.value);\n });\n });\n }\n\n\n\n setChartRain({\n labels: labels,\n datasets: [\n {\n label: \"ปริมาณน้ำฝน\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 0,\n fill: true,\n },\n ],\n });\n };\n\n const chartTempGenerate = async () => {\n let labels = [];\n let datas = [];\n\n if (stationDetail.stationTypeId == \"2\") {\n dataMeteoTemp.slice(0, 96).map((data) => {\n // labels.push(data.items[0].updateTime);\n labels.push(\n `${convertDate(data.items[0].updateTime)}:${convertTime(\n data.items[0].updateTime\n )}`\n );\n datas.push(data.items[0].temperature);\n });\n } else {\n dataMeteoTemp.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(item.updateTime);\n datas.push(item.value);\n });\n });\n }\n\n setChartTemp({\n labels: labels,\n datasets: [\n {\n label: \"อุณหภูมิ\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n\n const chartEvaporateGenerate = async () => {\n let labels = [];\n let datas = [];\n\n dataMeteoEvaporate.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(item.updateTime);\n datas.push(item.value);\n });\n });\n\n setChartEvaporate({\n labels: labels,\n datasets: [\n {\n label: \"ระเหย\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n const chartTempWaterGenerate = async () => {\n let labels = [];\n let datas = [];\n\n dataMeteoTempWater.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(item.updateTime);\n datas.push(item.value);\n });\n });\n\n setChartTempWater({\n labels: labels,\n datasets: [\n {\n label: \"อุณหภูมิน้ำ\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n const chartMaxTempGenerate = async () => {\n let labels = [];\n let datas = [];\n\n dataMeteoMaxTemp.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(item.updateTime);\n datas.push(item.value);\n });\n });\n\n setChartMaxTemp({\n labels: labels,\n datasets: [\n {\n label: \"อุณหภูมิสูงสุด\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n const chartMinTempGenerate = async () => {\n let labels = [];\n let datas = [];\n\n dataMeteoMinTemp.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(item.updateTime);\n datas.push(item.value);\n });\n });\n\n setChartMinTemp({\n labels: labels,\n datasets: [\n {\n label: \"อุณหภูมิต่ำสุด\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n\n const chartHumidityGenerate = async () => {\n let labels = [];\n let datas = [];\n\n dataMeteoHumidity.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(convertDate(item.updateTime));\n datas.push(item.value);\n });\n });\n\n setChartHumidity({\n labels: labels,\n datasets: [\n {\n label: \"ความชื้นสัมพัทธ์\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n const chartWindGenerate = async () => {\n let labels = [];\n let datas = [];\n\n dataMeteoWind.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(item.updateTime);\n datas.push(item.value);\n });\n });\n\n setChartWind({\n labels: labels,\n datasets: [\n {\n label: \"ความเร็วลม\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n const chartSunLightPeriodGenerate = async () => {\n let labels = [];\n let datas = [];\n\n dataMeteoSunLightPeriod.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(item.updateTime);\n datas.push(item.value);\n });\n });\n\n setChartSunLightPeriod({\n labels: labels,\n datasets: [\n {\n label: \"ความนานแสงแดด\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n\n const chartSunLightIntensityGenerate = async () => {\n let labels = [];\n let datas = [];\n\n dataMeteoSunLightIntensity.slice(0, 96).map((data) => {\n const { items } = data;\n items.map((item) => {\n labels.push(item.updateTime);\n datas.push(item.value);\n });\n });\n\n setChartSunLightIntensity({\n labels: labels,\n datasets: [\n {\n label: \"ความเข้มแสงแดด\",\n data: datas,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 1,\n pointRadius: 1,\n pointHoverRadius: 2\n },\n ],\n });\n };\n\n useEffect(() => {\n chartRainGenerate();\n chartTempGenerate();\n chartEvaporateGenerate();\n chartTempWaterGenerate();\n chartMaxTempGenerate();\n chartMinTempGenerate();\n chartHumidityGenerate();\n chartWindGenerate();\n chartSunLightPeriodGenerate();\n chartSunLightIntensityGenerate();\n }, [stationDetail]);\n\n const displayChartRain = (\n {chartRain ?
\n );\n\n const displayChartEvaporate = (\n {chartEvaporate ?
\n );\n const displayChartTempWater = (\n {chartTempWater ?
\n );\n\n const displayChartTemp = (\n {chartTemp ?
\n );\n const displayChartMaxTemp = (\n {chartMaxTemp ?
\n );\n const displayChartMinTemp = (\n {chartMinTemp ?
\n );\n const displayChartHumidity = (\n {chartHumidity ?
\n );\n const displayChartWind = (\n {chartWind ?
\n );\n const displayChartSunLightPeriod = (\n {chartSunLightPeriod ?
\n );\n const displayChartSunLightIntensity = (\n \n {chartSunLightIntensity ?
\n );\n\n console.log(\"chrt\", meteoDataType);\n\n return (\n <>\n {meteoDataType?.value}
\n \n {meteoDataType && meteoDataType.value == \"01\" ? displayChartRain : \"\"}\n {meteoDataType && meteoDataType.value == \"02\"\n ? displayChartEvaporate\n : \"\"}\n {meteoDataType && meteoDataType.value == \"03\"\n ? displayChartTempWater\n : \"\"}\n {meteoDataType && meteoDataType.value == \"04\" ? displayChartTemp : \"\"}\n {meteoDataType && meteoDataType.value == \"06\"\n ? displayChartMaxTemp\n : \"\"}\n {meteoDataType && meteoDataType.value == \"08\"\n ? displayChartMinTemp\n : \"\"}\n {meteoDataType && meteoDataType.value == \"09\"\n ? displayChartHumidity\n : \"\"}\n {meteoDataType && meteoDataType.value == \"11\" ? displayChartWind : \"\"}\n {meteoDataType && meteoDataType.value == \"12\"\n ? displayChartSunLightPeriod\n : \"\"}\n {meteoDataType && meteoDataType.value == \"13\"\n ? displayChartSunLightIntensity\n : \"\"}\n
\n \n );\n};\n\nexport default ChartMeteo;\n","import React from \"react\";\nimport _ from \"lodash\";\n\nconst TableHydro = ({ stationDetail, dataHydroWaterLevel, gageData }) => {\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n return `${hour}:${minute}น.`;\n };\n\n const displayWaterLevelTable = (\n <>\n \n
\n \n ข้อมูลระดับน้ำ\n
\n | วันที่-เวลา | \nระดับน้ำ / เมตร | \nระดับน้ำ ม.รทก. | \n
|---|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.waterLevel || item.value || \"-\"} | \n\n {gageData && item.waterLevel\n ? _.round(\n (+item.waterLevel || +item.value) +\n (+stationDetail.gage.gageLevel || 0),\n 2\n ).toFixed(2)\n : \"-\"}\n | \n
{displayWaterLevelTable}
;\n};\n\nexport default TableHydro;\n","import React from \"react\";\nimport _ from \"lodash\";\n\n\nconst compareDate = (a, b) => {\n\n let aTime = a.items[0]?.updateTime ? new Date(a.items[0]?.updateTime).getTime() : 0;\n let bTime = b.items[0]?.updateTime ? new Date(b.items[0]?.updateTime).getTime() : 0;\n if (aTime < bTime) {\n return -1;\n }\n if (aTime > bTime) {\n return 1;\n }\n return 0\n}\n\n\nconst TableMeteo = ({\n stationDetail,\n dataTransactionDatasEl,\n meteoDataType,\n}) => {\n let dataMeteoRain = [];\n let dataMeteoEvaporate = [];\n let dataMeteoTempWater = [];\n let dataMeteoTemp = [];\n let dataMeteoMaxTemp = [];\n let dataMeteoMinTemp = [];\n let dataMeteoHumidity = [];\n let dataMeteoWind = [];\n let dataMeteoSunLightPeriod = [];\n let dataMeteoSunLightIntensity = [];\n\n if (dataTransactionDatasEl.length) {\n dataTransactionDatasEl.map((item) => {\n const meteoDataRain = item.filter((el) => {\n return el.dataId == \"01\" && el.dataType == \"meteo\";\n });\n const meteoDataEvaporate = item.filter((el) => {\n return el.dataId == \"02\" && el.dataType == \"meteo\";\n });\n const meteoDataTempWater = item.filter((el) => {\n return el.dataId == \"03\" && el.dataType == \"meteo\";\n });\n const meteoDataTemp = item.filter((el) => {\n return el.dataId == \"04\" && el.dataType == \"meteo\";\n });\n const meteoDataMaxTemp = item.filter((el) => {\n return el.dataId == \"06\" && el.dataType == \"meteo\";\n });\n const meteoDataMinTemp = item.filter((el) => {\n return el.dataId == \"08\" && el.dataType == \"meteo\";\n });\n const meteoDataHumidity = item.filter((el) => {\n return el.dataId == \"09\" && el.dataType == \"meteo\";\n });\n const meteoDataWind = item.filter((el) => {\n return el.dataId == \"11\" && el.dataType == \"meteo\";\n });\n const meteoDataSunLightPeriod = item.filter((el) => {\n return el.dataId == \"12\" && el.dataType == \"meteo\";\n });\n const meteoDataSunLightIntensity = item.filter((el) => {\n return el.dataId == \"13\" && el.dataType == \"meteo\";\n });\n\n if (meteoDataRain) dataMeteoRain.push(...meteoDataRain);\n if (meteoDataEvaporate) dataMeteoEvaporate.push(...meteoDataEvaporate);\n if (meteoDataTempWater) dataMeteoTempWater.push(...meteoDataTempWater);\n if (meteoDataTemp) dataMeteoTemp.push(...meteoDataTemp);\n if (meteoDataMaxTemp) dataMeteoMaxTemp.push(...meteoDataMaxTemp);\n if (meteoDataMinTemp) dataMeteoMinTemp.push(...meteoDataMinTemp);\n if (meteoDataHumidity) dataMeteoHumidity.push(...meteoDataHumidity);\n if (meteoDataWind) dataMeteoWind.push(...meteoDataWind);\n if (meteoDataSunLightPeriod)\n dataMeteoSunLightPeriod.push(...meteoDataSunLightPeriod);\n if (meteoDataSunLightIntensity)\n dataMeteoSunLightIntensity.push(...meteoDataSunLightIntensity);\n });\n\n\n\n dataMeteoRain.sort(compareDate);\n dataMeteoEvaporate.sort(compareDate);\n dataMeteoTempWater.sort(compareDate);\n dataMeteoTemp.sort(compareDate);\n dataMeteoMaxTemp.sort(compareDate);\n dataMeteoMinTemp.sort(compareDate);\n dataMeteoHumidity.sort(compareDate);\n dataMeteoWind.sort(compareDate);\n dataMeteoSunLightPeriod.sort(compareDate);\n dataMeteoSunLightIntensity.sort(compareDate);\n\n }\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}น.`;\n };\n\n const displayRainTable = (\n <>\n \n
\n \n ข้อมูลปริมาณฝน\n
\n | วันที่-เวลา | \nปริมาณน้ำฝน มม. | \n
|---|---|
| \n {convertDate(item.items[0].updateTime)}{\" \"}\n {convertTime(item.items[0].updateTime)}\n | \n{item.items[0].rainFall15 || \"-\"} | \n
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n \n ข้อมูลอุณหภูมิ\n
\n | วันที่-เวลา | \nอุณหภูมิ | \n
|---|---|
| \n {convertDate(item.items[0].updateTime)}{\" \"}\n {convertTime(item.items[0].updateTime)}\n | \n{item.items[0].temperature || \"-\"} | \n
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n \n ข้อมูลอุณหภูมิน้ำ\n
\n | วันที่-เวลา | \nอุณหภูมิน้ำ (·ซ) | \n
|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n ระเหย
\n | วันที่-เวลา | \nปริมาณระเหย | \n
|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n \n อุณหภูมิสูงสุด\n
\n | วันที่-เวลา | \nอุณหภูมิสูงสุด | \n
|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n \n อุณหภูมิต่ำสุด\n
\n | วันที่-เวลา | \nอุณหภูมิต่ำสุด | \n
|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n \n ความชื้นสัมพัทธ์\n
\n | วันที่-เวลา | \nความชื้นสัมพัทธ์ | \n
|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n ความเร็วลม
\n | วันที่-เวลา | \nความเร็วลม | \n
|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n \n ความนานแสงแดด\n
\n | วันที่-เวลา | \nความนานแสงแดด | \n
|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n
\n \n ความเข้มแสงแดด\n
\n | วันที่-เวลา | \nความเข้มแสงแดด | \n
|---|---|
| \n {convertDate(item.updateTime)}{\" \"}\n {convertTime(item.updateTime)}\n | \n{item.value || \"-\"} | \n
\n {meteoDataType && meteoDataType.value == \"01\" ? displayRainTable : \"\"}\n {meteoDataType && meteoDataType.value == \"02\"\n ? displayEvaporateTable\n : \"\"}\n {meteoDataType && meteoDataType.value == \"03\"\n ? displayTempWaterTable\n : \"\"}\n {meteoDataType && meteoDataType.value == \"04\" ? displayTempTable : \"\"}\n {meteoDataType && meteoDataType.value == \"06\" ? displayMaxTempTable : \"\"}\n {meteoDataType && meteoDataType.value == \"08\" ? displayMinTempTable : \"\"}\n {meteoDataType && meteoDataType.value == \"09\" ? displayHunidityTable : \"\"}\n {meteoDataType && meteoDataType.value == \"11\" ? displayWindTable : \"\"}\n {meteoDataType && meteoDataType.value == \"12\"\n ? displaySunLightPeriodTable\n : \"\"}\n {meteoDataType && meteoDataType.value == \"13\"\n ? displaySunLightIntensityTable\n : \"\"}\n
\n );\n};\n\nexport default TableMeteo;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { FaTimesCircle } from \"react-icons/fa\";\nimport ModalStationImage from \"./ModalStationImage\";\nimport { useSelector } from \"react-redux\";\nimport Select from \"react-select\";\nimport ChartHydro from \"./ChartHydro\";\nimport ChartMeteo from \"./ChartMeteo\";\nimport TableHydro from \"./TableHydro\";\nimport TableMeteo from \"./TableMeteo\";\n\nconst ModalStationDetail2 = ({\n stationDetail,\n stationImage,\n dataLastUpdated,\n gageData,\n dataHydroMeasurements,\n dataMeteoMeasurements,\n hydroActiveId,\n meteoActiveId,\n dataHydro,\n dataMeteo,\n isModalStationOpen,\n setIsModalStationOpen,\n}) => {\n const openModal = () => {\n setIsModalStationOpen(true);\n };\n\n const closeModal = () => {\n setIsModalStationOpen(false);\n };\n\n let optionsMeteoDataType = [];\n let dataHydroWaterLevel = [];\n let dataTransactionDatasEl = [];\n let dataMeteoRain = [];\n let dataMeteoTemp = [];\n const [chartWaterData, setCharWatertData] = useState();\n const [crossSection, setCrossSection] = useState([]);\n const [openModalImage, setOpenModalImage] = useState(false);\n const [dataTransaction, setDataTransaction] = useState([]);\n const [crossSectionUnitLow, setCrossSectionUnitLow] = useState(0);\n const [crossSectionUnitHigh, setCrossSectionUnitHigh] = useState(0);\n\n if (dataMeteo) {\n // dataMeteo.map((item) => {\n // const list = {\n // value: item.dataId,\n // label: `${item.dataNameTh} `,\n // };\n // optionsMeteoDataType.push(list);\n // });\n const list = [];\n stationDetail.configDataStation.map((item) => {\n if (item.active == \"Y\" && !!item.meteotype) {\n list.push({\n label: item.meteotype.meteoTypeTh,\n value: item.meteotype.meteoTypeId,\n });\n }\n });\n optionsMeteoDataType = list;\n }\n\n useEffect(() => {\n const list = [];\n stationDetail.configDataStation.map((item) => {\n if (item.active == \"Y\" && !!item.meteotype) {\n list.push({\n label: item.meteotype.meteoTypeTh,\n value: item.meteotype.meteoTypeId,\n });\n }\n });\n // const list = dataMeteo?.map((item) => {\n // return {\n // value: item.dataId,\n // label: `${item.dataNameTh} `,\n // };\n // });\n optionsMeteoDataType = list;\n setMeteoDataType(list[0]);\n }, [dataMeteo]);\n\n const [meteoDataType, setMeteoDataType] = useState(optionsMeteoDataType[0]);\n\n let dataMeteoEl01;\n let dataMeteoEl02;\n let dataMeteoEl03;\n let dataMeteoEl04;\n let dataMeteoEl06;\n let dataMeteoEl08;\n let dataMeteoEl09;\n let dataMeteoEl11;\n let dataMeteoEl12;\n let dataMeteoEl13;\n\n const fetchCrossSection = () => {\n dwrApi\n .get(`/CrossSections/Station/${stationDetail.stationId}`)\n .then((res) => {\n setCrossSection(res.data);\n })\n .catch((err) => {\n console.error(err.message);\n });\n };\n\n const fetchDataTransection = async () => {\n let timePeriod;\n if (stationDetail.stationTypeId == 2) {\n timePeriod = \"24\";\n } else {\n timePeriod = \"168\";\n }\n\n await dwrApi\n .get(\n `/DataTransections/Station/${stationDetail.stationId}/Hour/${timePeriod}`\n )\n .then((res) => {\n console.log(\"res\", res.data);\n setDataTransaction(res.data);\n })\n .catch((err) => {\n console.error(err.message);\n });\n };\n\n useEffect(() => {\n fetchCrossSection();\n fetchDataTransection();\n }, [stationDetail]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"40px\",\n },\n buttonModal: {\n fontSize: \"16px\",\n color: \"#000000\",\n fontFamily: \"inherit\",\n },\n tableHeader: {\n borderTop: \"2px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"1000px\",\n maxHeight: \"95vh\",\n padding: \"0\",\n },\n overlay: {\n zIndex: 1000,\n background: \"rgba(0, 0, 0, 0.6)\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}น. `;\n };\n\n if (dataTransaction) {\n dataTransaction.map((item) => {\n if (item.datas.length) {\n dataTransactionDatasEl.push(item.datas);\n }\n });\n }\n\n const compareDate = (a, b) => {\n let aTime = a.items[0]?.updateTime\n ? new Date(a.items[0]?.updateTime).getTime()\n : 0;\n let bTime = b.items[0]?.updateTime\n ? new Date(b.items[0]?.updateTime).getTime()\n : 0;\n if (aTime < bTime) {\n return -1;\n }\n if (aTime > bTime) {\n return 1;\n }\n return 0;\n };\n\n if (dataTransactionDatasEl.length) {\n dataTransactionDatasEl.map((item) => {\n const hydroData = item.filter((el) => {\n return el.dataId == \"01\" && el.dataType == \"hydro\";\n });\n // const meteoDataRain = item.filter((el) => {\n // return el.dataId == \"01\" && el.dataType == \"meteo\";\n // });\n // const meteoDataTemp = item.filter((el) => {\n // return el.dataId == \"04\" && el.dataType == \"meteo\";\n // });\n if (hydroData) dataHydroWaterLevel.push(...hydroData);\n // if (meteoDataRain) dataMeteoRain.push(...meteoDataRain);\n // if (meteoDataTemp) dataMeteoTemp.push(...meteoDataTemp);\n });\n\n dataHydroWaterLevel.sort(compareDate);\n // dataMeteoRain.sort(compareDate);\n // dataMeteoTemp.sort(compareDate);\n }\n\n if (dataMeteo.length) {\n dataMeteoEl01 = dataMeteo\n .filter((item) => item.dataId == \"01\")\n .sort(compareDate);\n dataMeteoEl02 = dataMeteo\n .filter((item) => item.dataId == \"02\")\n .sort(compareDate);\n dataMeteoEl03 = dataMeteo\n .filter((item) => item.dataId == \"03\")\n .sort(compareDate);\n dataMeteoEl04 = dataMeteo\n .filter((item) => item.dataId == \"04\")\n .sort(compareDate);\n dataMeteoEl06 = dataMeteo\n .filter((item) => item.dataId == \"06\")\n .sort(compareDate);\n dataMeteoEl08 = dataMeteo\n .filter((item) => item.dataId == \"08\")\n .sort(compareDate);\n dataMeteoEl09 = dataMeteo\n .filter((item) => item.dataId == \"09\")\n .sort(compareDate);\n dataMeteoEl11 = dataMeteo\n .filter((item) => item.dataId == \"11\")\n .sort(compareDate);\n dataMeteoEl12 = dataMeteo\n .filter((item) => item.dataId == \"12\")\n .sort(compareDate);\n dataMeteoEl13 = dataMeteo\n .filter((item) => item.dataId == \"13\")\n .sort(compareDate);\n }\n\n useEffect(() => {\n if (crossSection[0] && crossSection[0].crossSectionInfo.length) {\n const getUnitlow = [...crossSection[0].crossSectionInfo].sort(\n (a, b) => a.wideRiverX - b.wideRiverX\n )[0];\n const getUnitHigh = [...crossSection[0].crossSectionInfo].sort(\n (a, b) => b.wideRiverX - a.wideRiverX\n )[0];\n\n setCrossSectionUnitLow(getUnitlow);\n setCrossSectionUnitHigh(getUnitHigh);\n }\n }, [crossSection]);\n\n const displayCrossSectionTable = (\n | \n ข้อมูลลำน้ำ\n | \nม.รทก. | \nเมตร | \n
|---|---|---|
| ระดับตลิ่งขวา | \n\n{crossSectionUnitHigh?.heightY?.toFixed(2)} | \n\n {!!gageData?.gageLevel\n ? (+crossSectionUnitHigh.heightY - +gageData.gageLevel).toFixed(2)\n : \"-\"}\n | \n
| ระดับตลิ่งซ้าย | \n{crossSectionUnitLow?.heightY?.toFixed(2)} | \n\n {!!gageData?.gageLevel\n ? (+crossSectionUnitLow.heightY - +gageData.gageLevel).toFixed(2)\n : \"-\"}\n | \n
| ศูนย์เสาระดับ | \n{!!gageData?.gageLevel ? gageData?.gageLevel.toFixed(2) : \"\"} | \n0.00 | \n
| \n ข้อมูลอุทกวิทยา\n | \nม.รทก. | \nเมตร | \n
|---|---|---|
| \n ระดับน้ำราย 15 นาที ณ{\" \"}\n {dataHydro.length ? (\n <>\n <> {convertDate(dataHydro[0].items[0].updateTime)} {\" \"}\n <> {convertTime(dataHydro[0].items[0].updateTime)} \n \n ) : (\n \"\"\n )}\n | \n\n {dataHydro.length && gageData\n ? (\n +dataHydro[0].items[0].waterLevel + +gageData.gageLevel\n ).toFixed(2)\n : \"-\"}\n | \n{dataHydro.length ? dataHydro[0].items[0].waterLevel : \"-\"} | \n
| ระดับน้ำปัจจุบันล่าสุด | \n\n {dataHydro.length && gageData\n ? (+dataHydro[0].items[0].value + +gageData.gageLevel).toFixed(\n 2\n )\n : \"-\"}\n | \n{dataHydro.length ? dataHydro[0].items[0].value : \"-\"} | \n
| ระดับน้ำสูงสุดวันนี้ | \n\n {dataHydro.length && gageData\n ? (\n +dataHydro[0].items[0].waterLevelMaxInDay +\n +gageData.gageLevel\n ).toFixed(2)\n : \"-\"}\n | \n\n\n {dataHydro.length\n ? dataHydro[0].items[0].waterLevelMaxInDay\n : \"-\"}\n | \n
| ระดับน้ำสูงสุดวันนี้ | \n\n {dataHydro.length && gageData\n ? (+dataHydro[0].items[0].max + +gageData.gageLevel).toFixed(2)\n : \"-\"}\n | \n\n{dataHydro.length ? dataHydro[0].items[0].max : \"-\"} | \n
| ข้อมูลอุตุนิยมวิทยา | \n\n | \n |
| \n ปริมาณฝนราย15 นาที ณ{\" \"}\n {convertDate(dataMeteo[0]?.items[0]?.updateTime)}{\" \"}\n {convertTime(dataMeteo[0]?.items[0]?.updateTime)}{\" \"}\n | \n\n {dataMeteo.length && dataMeteoEl01[0]?.items.length\n ? dataMeteoEl01[0]?.items[0]?.rainFall15\n : \"-\"}\n | \nมม. | \n
| อุณหภูมิอากาศล่าสุด | \n\n {dataMeteo.length && dataMeteoEl04[0]?.items.length\n ? dataMeteoEl04[0]?.items[0]?.temperature\n : \"-\"}\n | \n(°ซ) | \n
| อุณหภูมิอากาศสูงสุดวันนี้ | \n\n {dataMeteo.length && dataMeteoEl04[0]?.items.length\n ? dataMeteoEl04[0]?.items[0]?.temperatureMaxInday\n : \"-\"}\n | \n(°ซ) | \n
| อุณหภูมิอากาศต่ำสุดวันนี้ | \n\n {dataMeteo.length && dataMeteoEl04[0]?.items.length\n ? dataMeteoEl04[0].items[0]?.temperatureMinInday\n : \"-\"}\n | \n(°ซ) | \n
| น้ำฝน | \n\n {dataMeteoEl01[0]?.items[0]?.value || \"-\"}\n | \nมม. | \n
| ระเหย | \n\n {dataMeteoEl02[0]?.items[0]?.value || \"-\"}\n | \nมม. | \n
| อุณหภูมิน้ำ | \n\n {dataMeteoEl03[0]?.items[0]?.value || \"-\"}\n | \n(·ซ) | \n
| อุณหภูมิอากาศ | \n\n {dataMeteoEl04[0]?.items[0]?.value || \"-\"}\n | \n(·ซ) | \n
| อุณหภูมิอากาศสูงสุด | \n\n {dataMeteoEl06[0]?.items[0]?.value || \"-\"}\n | \n(·ซ) | \n
| อุณหภูมิอากาศต่ำสุด | \n\n {dataMeteoEl08[0]?.items[0]?.value || \"-\"}\n | \n(·ซ) | \n
| ความชื้นสัมพัทธ์ | \n\n {dataMeteoEl09[0]?.items[0]?.value || \"-\"}\n | \n% | \n
| ความเร็วลม | \n\n {dataMeteoEl11[0]?.items[0]?.value || \"-\"}\n | \nกม/ชม. | \n
| ความนานแสงแดด | \n\n {dataMeteoEl12[0]?.items[0]?.value || \"-\"}\n | \nกม/ชม. | \n
| ความเข้มแสงแดด | \n\n {dataMeteoEl13[0]?.items[0]?.value || \"-\"}\n | \nCal/CM2 | \n
\n \n
\n
\n\n // | \n รหัสสถานี \n | \n \n {stationDetail.stationLabel} \n | \n \n รูปสถานี\n | \n
|---|---|---|
| \n {stationImage.length ? (\n | \n ) : (\n \n )}\n |
\n //
\n );\n\n const displayStationDetail = (\n \n //
\n // \n //
\n // รหัสสถานี
\n // {stationDetail.stationLabel}
\n // รูปสถานี
\n // \n //
\n // \n //
\n // ชื่อสถานี
\n // ประเภทสถานี
\n // ที่ตั้ง
\n // ข้อมูลตรวจวัด
\n // ละติจูด
\n // ลองจิจูด
\n // ผู้เดูแล
\n // เบอร์ติดต่อ
\n // หน่วยงาน
\n // \n //
\n // {stationDetail?.stationTh}
\n // \n // {!!stationDetail?.configDataStation[0]?.hydroTypeId &&\n // !stationDetail?.configDataStation[0]?.meteotypeId\n // ? \"อุทกวิทยา\"\n // : \"\"}\n // {!!stationDetail?.configDataStation[0]?.meteotypeId &&\n // !stationDetail?.configDataStation[0]?.hydroTypeId\n // ? \"อุตุนิยมวิทยา\"\n // : \"\"}\n // {stationDetail?.stationType?.stationTypeName}\n // {/* {dataHydro.length ? \"อุทกวิทยา\" : \"\"}\n // {dataMeteo.length ? \"อุตุนิยมวิทยา\" : \"\"}\n // {dataHydro.length || dataMeteo.length ? stationDetail?.stationType?.stationTypeName : '-'} */}\n //
\n // \n // ต.{stationDetail?.location?.subDistrict?.subDistrictTh} อ.\n // {stationDetail?.location?.subDistrict?.district?.districtTh} จ.\n // {\n // stationDetail?.location?.subDistrict?.district?.province\n // ?.provinceTh\n // }\n //
\n // \n // {dataHydroMeasurements.length\n // ? dataHydroMeasurements[0].hydroTypeTh\n // : \"\"}\n // {dataMeteoMeasurements.length\n // ? dataMeteoMeasurements.map((item) => {\n // return <> {item.meteoTypeTh};\n // })\n // : \"\"}\n //
\n // {stationDetail?.location?.latitudeDms || \"-\"}
\n // {stationDetail?.location?.longitudeDms || \"-\"}
\n // {stationDetail.personName || \"-\"}
\n // {stationDetail.tel || \"-\"}
\n // {stationDetail?.StationCenter?.stationCenterName || \"-\"}
\n // \n // {stationImage.length ? (\n // {\n // setOpenModalImage(true);\n // }}\n // />\n // ) : (\n // \"\"\n // )}\n // {openModalImage && (\n //
\n // \n
\n );\n\n return (\n {displayDescription}
\n {dataHydroMeasurements.length ? displayCrossSectionTable : \"\"}
\n \n {dataHydroMeasurements.length ? displayHydroTable : displayMeteoTable}\n
\n \n \n \n \n \n {stationDetail.stationTh}\n \n \n
\n \n
\n \n \n );\n};\n\nexport default ModalStationDetail2;\n","import { filter } from \"lodash\";\nimport React, { useState, useEffect } from \"react\";\nimport { Line } from \"react-chartjs-2\";\n\nconst ChartForeCastWaterLevel = ({ stationForecast }) => {\n const [chartWaterData, setCharWatertData] = useState();\n const { transections, forecasts, warningItem } = stationForecast;\n\n // const transectionsFilter = transections.filter((item) => item.valueWl);\n console.log('station', stationForecast)\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const parseLocaleDate = (dateTime, withTime = false) => {\n\n let output = `${new Date(dateTime).toLocaleDateString(\"th-TH\", {\n year: 'numeric',\n month: 'numeric',\n day: \"numeric\",\n })} ${withTime ? new Date(dateTime).toLocaleTimeString(\"th-TH\", {\n hour: 'numeric',\n minute: 'numeric'\n }) + 'น.' : ''}`\n\n return output.replace(/\\//g, '-')\n\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}`;\n };\n\n const chartWaterGenerate = async () => {\n const labelsWaterLevel = transections?.map(\n (item) => `${parseLocaleDate(item.timeStamp, true)}`\n );\n const labelsForecast = forecasts?.map(\n (item) => `${parseLocaleDate(item.timeStamp, true)}`\n );\n\n // const valueWaterLevel = transections?.map((item) => !!item.valueWl || item.valueWl == 0 ? ({ value: item.valueWl + (stationForecast.gageLevel || 0), color: \"rgb(39,145,223)\" }) : { value: null, color: null });\n // const valueForecast = forecasts?.map((item) => ({ value: item.valueWl, color: \"rgb(255,1,227)\" }));\n\n // const ValueForecastFullfill = new Array(valueWaterLevel.length - 1)\n // .fill(null)\n // .concat([40])\n // .concat(forecasts.map(item => ({value:item.valueWl, color: \"rgb(255,1,227)\"})));\n\n // const allValues = valueWaterLevel.concat(forecasts.map(item => ({value:item.valueWl, color: \"rgb(255,1,227)\"})))\n\n const waterLevelItems = transections.map(item => ({ ...item, valueWl: item.valueWl, })).concat(forecasts.map((item) => ({ ...item, valueWl: null })))\n const forecastItems = transections.map((item, i) => ({ ...item, valueWl: transections.length - 1 === i && item.valueWl !== null ? item.valueWl + stationForecast.gageLevel : null })).concat(forecasts);\n\n setCharWatertData({\n labels: labelsWaterLevel.concat(labelsForecast),\n datasets: [\n {\n label: \"ระดับน้ำตรวจวัดก่อนพยากรณ์\",\n data: waterLevelItems.map(item => !!item.valueWl || item.valueWl == 0 ? item.valueWl + (stationForecast.gageLevel || 0) : null),\n borderColor: \"rgba(39,145,223, 1)\",\n backgroundColor: \"rgba(39,145,223, 1)\",\n borderWidth: 2,\n pointRadius: 0,\n tension: 0.1,\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n },\n },\n {\n label: \"ระดับน้ำคาดการณ์\",\n data: forecastItems.map(item => item.valueWl || null),\n borderColor: \"rgb(255,1,227)\",\n backgroundColor: \"rgb(255,1,227)\",\n borderWidth: 2,\n pointRadius: 0,\n tension: 0.1,\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n },\n },\n {\n label: \"ระดับน้ำเตือนภัย\",\n data: forecastItems.map(item => warningItem?.war),\n // type: 'scatter',\n // showLine: true,\n // backgroundColor: \"red\",\n // borderColor: \"red\",\n // fill: false,\n // borderWidth: 2,\n // pointRadius: 0,\n // tension: 0.1,\n borderColor: [\"rgb(255, 99, 132)\"],\n backgroundColor: [\"rgb(255, 99, 132)\"],\n borderWidth: 3,\n pointRadius: 0,\n tension: 0.1,\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n },\n }\n ],\n });\n };\n\n\n\n let options = {\n scales: {\n x: {\n ticks: {\n // maxTicksLimit: 15,\n // autoSkip: true,\n maxRotation: 90,\n minRotation: 90,\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n size: 18,\n },\n },\n },\n y: {\n ticks: {\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n size: 18,\n },\n },\n suggestedMin: 0,\n\n }\n },\n plugins: {\n zoom: {\n zoom: {\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: true,\n },\n mode: \"x\",\n },\n pan: {\n enabled: true,\n mode: \"x\",\n speed: 1,\n threshold: 1,\n },\n },\n\n legend: {\n position: 'bottom',\n labels: {\n padding: 20,\n font: {\n size: 20,\n weight: 'bold',\n family: `THSarabunNew`,\n\n },\n }\n },\n\n tooltip: {\n enabled: true,\n displayColors: false,\n backgroundColor: 'rgba(255,255, 255, 0.65)',\n titleFont: {\n family: `THSarabunNew`,\n size: 18,\n weight: 'bold',\n },\n bodyFont: {\n family: `THSarabunNew`,\n size: 18,\n weight: 'bold',\n },\n footerFont: {\n family: `THSarabunNew`,\n size: 18,\n weight: 'bold',\n },\n borderColor: 'rgb(255,1,227)',\n borderWidth: 0,\n titleColor: 'black',\n bodyColor: 'black',\n callbacks: {\n label: function (context, data) {\n var count = context.raw\n var label = context.dataset.label + \": \"\n if (count) {\n count += ' ม.รทก.'\n }\n return label + count\n },\n }\n },\n annotation: {\n annotations: {\n // line1: {\n // type: \"line\",\n // yMin: warningItem?.war,\n // yMax: warningItem?.war,\n // borderColor: \"rgb(255, 99, 132)\",\n // borderWidth: 2,\n // },\n line2: {\n type: \"line\",\n xMin: transections.length ? transections.length - 1 : 0,\n xMax: transections.length ? transections.length - 1 : 0,\n borderColor: \"rgb(0, 0, 0)\",\n borderWidth: 2,\n borderDash: [3],\n borderDashOffset: 2,\n label: {\n enabled: (ctx) => ctx.hovered,\n color: 'black',\n backgroundColor: 'rgba(255,255,255,0.65)',\n drawTime: 'afterDatasetsDraw',\n font: {\n weight: 'bold',\n family: `THSarabunNew`,\n size: 18\n },\n content: (ctx, data) => {\n const lastItem = transections[transections.length - 1] || { valueWl: null, timeStamp: new Date().toISOString() }\n let value = (!!lastItem.valueWl || lastItem.valueWl == 0) ? { valueWl: lastItem.valueWl + (stationForecast.gageLevel || 0), timeStamp: lastItem.timeStamp } : { valueWl: null, timeStamp: lastItem.timeStamp };\n if (value.valueWl !== null) {\n return [`${parseLocaleDate(value.timeStamp, true)}`, `ระดับน้ำ(ปัจจุบัน): ${value.valueWl} ม.รทก.`]\n }\n return [`${parseLocaleDate(value.timeStamp, true)}`, `ระดับน้ำ(ปัจจุบัน): - ม.รทก.`]\n },\n position: (ctx) => ctx.hoverPosition,\n },\n\n enter(ctx, event) {\n ctx.hovered = true;\n ctx.hoverPosition = (event.x / ctx.chart.chartArea.width * 100) + '%';\n ctx.chart.update();\n },\n leave(ctx, event) {\n ctx.hovered = false;\n ctx.chart.update();\n }\n },\n // line3: {\n // type: 'label',\n // xMin: transections.length,\n // xMax: transections.length,\n // rotation: -90,\n // position: 'bottom',\n // backgroundColor: 'rgba(255,255,255, 1)',\n // content: [convertDate(new Date())],\n // font: {\n // size: 12\n // },\n // }\n },\n },\n },\n };\n\n useEffect(() => {\n if (stationForecast) chartWaterGenerate();\n }, [stationForecast]);\n\n return (\n \n {dataHydroMeasurements.length ? (\n setMeteoDataType(ev)}\n value={meteoDataType}\n className=\"select-datatype-container\"\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={false}\n />\n \n )}\n
\n \n ศูนย์เสาระดับ = {gageData.gageLevel || \"-\"} ม.รทก.\n
\n ) : (\n <>\n \n \n
\n\n \n {dataHydroMeasurements.length ? (\n
\n {displayStationDetail}
\n \n {dataHydroMeasurements.length ? (\n
\n \n {stationForecast && chartWaterData ? (\n
\n );\n};\n\nexport default ChartForeCastWaterLevel;\n","import { getDate } from \"date-fns\";\nimport React, { useState, useEffect } from \"react\";\nimport { Line } from \"react-chartjs-2\";\nimport 'chartjs-adapter-moment';\n\nconst ChartForecastFlow = ({ stationForecast }) => {\n const [chartData, setChartData] = useState();\n const { transections, forecasts, warningItem } = stationForecast;\n\n // const transectionsFilter = transections.filter((item) => item.valueQ);\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}`;\n };\n\n const parseLocaleDate = (dateTime, withTime = false) => {\n let output = `${new Date(dateTime).toLocaleDateString(\"th-TH\", {\n year: 'numeric',\n month: 'numeric',\n day: \"numeric\",\n })} ${withTime ? new Date(dateTime).toLocaleTimeString(\"th-TH\", {\n hour: 'numeric',\n minute: 'numeric'\n }) + 'น.' : ''}`\n\n return output.replace(/\\//g, '-')\n\n };\n\n const chartWaterGenerate = async () => {\n const labelsFlow = transections?.map(\n (item) => `${parseLocaleDate(item.timeStamp, true)}`\n )\n const labelsForecast = forecasts?.map(\n (item) => `${parseLocaleDate(item.timeStamp, true)}`\n )\n\n // const valueWaterLevel = transections?.map((item) => item.valueQ);\n // const valueForecast = forecasts?.map((item) => item.valueQ);\n\n // const ValueForecastFullfill = new Array(valueWaterLevel.length)\n // .fill(null)\n // .concat(valueForecast);\n\n const waterFlowItems = transections.map(item => ({ ...item, valueQ: item.valueQ, })).concat(forecasts.map((item) => ({ ...item, valueQ: null })))\n const forecastItems = transections.map((item, i) => ({ ...item, valueQ: transections.length - 1 === i && item.valueQ !== null ? item.valueQ + stationForecast.gageLevel : null })).concat(forecasts);\n\n\n setChartData({\n labels: labelsFlow.concat(labelsForecast),\n datasets: [\n {\n label: \"ปริมาณการไหลตรวจวัดก่อนพยากรณ์\",\n data: waterFlowItems.map(item => item.valueQ),\n type: 'scatter',\n showLine: true,\n borderColor: [\"rgb(39,145,223)\"],\n backgroundColor: [\"rgb(39,145,223)\"],\n borderWidth: 3,\n pointRadius: 0,\n tension: 0.1,\n fill: false,\n },\n {\n label: \"ปริมาณการไหลคาดการณ์\",\n data: forecastItems.map(item => item.valueQ || null),\n type: 'scatter',\n showLine: true,\n borderColor: [\"rgb(255,1,227)\"],\n backgroundColor: [\"rgb(255,1,227)\"],\n borderWidth: 3,\n pointRadius: 0,\n tension: 0.1,\n fill: false,\n },\n ],\n });\n };\n\n\n\n let options = {\n title: {\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n size: 24,\n },\n },\n scales: {\n x: {\n ticks: {\n maxRotation: 90,\n minRotation: 90,\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n size: 18,\n },\n },\n },\n y: {\n suggestedMin: 0,\n ticks: {\n font: {\n family: `THSarabunNew`,\n weight: 'bold',\n size: 18,\n },\n },\n }\n },\n plugins: {\n zoom: {\n zoom: {\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: true,\n },\n mode: \"x\",\n },\n pan: {\n enabled: true,\n mode: \"x\",\n speed: 1,\n threshold: 1,\n },\n },\n\n legend: {\n position: 'bottom',\n labels: {\n padding: 20\n },\n labels: {\n padding: 20,\n font: {\n size: 20,\n weight: 'bold',\n family: `THSarabunNew`,\n },\n }\n },\n\n tooltip: {\n enabled: true,\n displayColors: false,\n backgroundColor: 'rgba(255,255, 255, 0.65)',\n titleFont: {\n family: `THSarabunNew`,\n size: 18,\n weight: 'bold',\n },\n bodyFont: {\n family: `THSarabunNew`,\n size: 18,\n weight: 'bold',\n },\n footerFont: {\n family: `THSarabunNew`,\n size: 18,\n weight: 'bold',\n },\n borderColor: 'rgb(255,1,227)',\n borderWidth: 0,\n titleColor: 'black',\n bodyColor: 'black',\n callbacks: {\n label: function (context, data) {\n var count = context.raw\n var label = context.dataset.label + \": \"\n if (count) {\n count += ' ลบ ม./วินาที'\n }\n return label + count\n }\n }\n },\n\n annotation: {\n annotations: {\n // line1: {\n // type: \"line\",\n // yMin: warningItem?.war,\n // yMax: warningItem?.war,\n // borderColor: \"rgb(255, 99, 132)\",\n // borderWidth: 2,\n // },\n line2: {\n type: \"line\",\n xMin: transections.length ? transections.length - 1 : 0,\n xMax: transections.length ? transections.length - 1 : 0,\n borderColor: \"rgb(0, 0, 0)\",\n borderWidth: 2,\n borderDash: [3],\n borderDashOffset: 2,\n textAlign: 'left',\n label: {\n enabled: (ctx) => ctx.hovered,\n color: 'black',\n backgroundColor: 'rgba(255,255,255,0.65)',\n drawTime: 'afterDatasetsDraw',\n font: {\n weight: 'bold',\n family: `THSarabunNew`,\n size: 18\n },\n content: (ctx, data) => {\n const lastItem = transections[transections.length - 1] || { valueQ: null, timeStamp: new Date().toISOString() }\n let value = (!!lastItem.valueQ || lastItem.valueQ == 0) ? { valueQ: lastItem.valueQ + (stationForecast.gageLevel || 0), timeStamp: lastItem.timeStamp } : { valueQ: null, timeStamp: lastItem.timeStamp };\n console.log({ value })\n if (value.valueQ !== null) {\n return [`${parseLocaleDate(value.timeStamp, true)}`, `ปริมาณการไหล(ปัจจุบัน): ${value.valueQ} ม./วินาที`]\n }\n return [`${parseLocaleDate(value.timeStamp, true)}`, `ปริมาณการไหล(ปัจจุบัน): - ม./วินาที`]\n },\n position: (ctx) => ctx.hoverPosition,\n },\n enter(ctx, event) {\n ctx.hovered = true;\n ctx.hoverPosition = (event.x / ctx.chart.chartArea.width * 100) + '%';\n ctx.chart.update();\n },\n leave(ctx, event) {\n ctx.hovered = false;\n ctx.chart.update();\n }\n },\n // line3: {\n // type: 'label',\n // xMin: transections.length,\n // xMax: transections.length,\n // rotation: -90,\n // position: 'bottom',\n // backgroundColor: 'rgba(255,255,255, 1)',\n // content: [convertDate(new Date())],\n // font: {\n // size: 12\n // },\n // }\n },\n },\n },\n };\n useEffect(() => {\n if (stationForecast) chartWaterGenerate();\n }, [stationForecast]);\n\n return (\n \n {stationForecast && chartData ? (\n
\n );\n};\n\nexport default ChartForecastFlow;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaRegCommentDots } from \"react-icons/fa\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport ChartForeCastWaterLevel from \"./ChartForeCastWaterLevel\";\nimport ChartForecastFlow from \"./ChartForecastFlow\";\n\nconst ModalForecast2 = ({\n stationDetail,\n isModalForecastOpen,\n setIsModalForecastOpen,\n}) => {\n const [stationForecast, setStationForecast] = useState(\"\");\n const [latestForecast, setLatestForecast] = useState(\"\");\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n buttonForecast: {\n backgroundColor: \"white\",\n color: \"black\",\n fontSize: \"16px\",\n fontFamily: \"inherit\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n tableBody: {\n display: \"block\",\n height: \"500px\",\n overflowY: \" auto\",\n marginBottom: \"10px\",\n },\n leftSideChart: {\n position: \"absolute\",\n top: \"35%\",\n left: \"-20px\",\n transform: \"rotate(-90deg)\",\n fontWeight: 'bold'\n },\n leftSideDownChart: {\n position: \"absolute\",\n top: \"35%\",\n left: \"-52px\",\n transform: \"rotate(-90deg)\",\n fontWeight: 'bold'\n }\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n minHeight: \"300px\",\n minWidth: \"400px\",\n width: \"90%\",\n },\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}`;\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear() + \" (\" + (result.getFullYear() + 543) + \")\";\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${date} ${monthNames[month]} ${year}`;\n };\n\n const convertDateEng = (value, type) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n if (type === \"1\") {\n return `${year}/${month}/${date}`;\n } else {\n return `${date}/${month}/${year + 543}`;\n }\n };\n\n const getDate = convertDate(new Date());\n const getTime = convertTime(new Date());\n\n const openModal = () => {\n setIsModalForecastOpen(true);\n };\n\n const closeModal = () => {\n setIsModalForecastOpen(false);\n };\n\n const getLastestForecast = async (forecast) => {\n setLatestForecast(\"\");\n const latestResult = forecast?.transections?.sort((a, b) => {\n return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();\n })[0];\n\n setLatestForecast(latestResult);\n };\n\n const fetchForeCast = async () => {\n // await dwrApi\n // .get(`/Forecasts/Station/${stationDetail.stationId}`)\n // .then((res) => {\n // // const sortData = res.data\n // // console.log('sort', sortData.forecasts.sort((a, b) => {\n // // return new Date(b.timeStamp).getTime() - new Date(a.timeStamp).getTime()}))\n // setStationForecast(res.data);\n // getLastestForecast();\n // })\n // .catch((err) => console.log(err.message));\n\n\n\n try {\n const res = await dwrApi.get(`/ForecastData/${stationDetail.stationId}`);\n setStationForecast(res.data);\n await getLastestForecast(res.data);\n } catch (err) {\n console.error(err);\n }\n\n\n };\n\n useEffect(() => {\n fetchForeCast();\n }, [stationDetail]);\n\n const displayButtonOpenModal = (\n \n \n ดูรายละเอียดพยากรณ์\n \n
\n );\n\n const displayHeader = (\n \n
\n );\n\n const displayChartWaterLevel = (\n \n ระดับน้ำพยากรณ์สถานี {stationForecast.stationLabel}{\" \"}\n {stationForecast.stationNameTh} {stationForecast.subDistrictTh}{\" \"}\n {stationForecast.districtTh} {stationForecast.provinceTh} ณ วันที่{\" \"}\n {getDate} {getTime} น.\n
\n \n
\n );\n const displayChartFlow = (\n \n
\n ระดับน้ำ (ม.รทก.)
\n \n
\n );\n\n const displayTableDescription = (\n \n
\n ปริมาณการไหล ลบ.ม./วินาที.
\n \n
\n );\n\n const displayTable = (\n \n วันที่พยากรณ์{\" \"}\n {getDate}\n {/* {latestForecast ? convertDateEng(latestForecast.timeStamp, \"1\") : \"\"} */}\n
\n \n \n \n
\n
\n );\n\n return (\n ผลการคำนวณพยากรณ์
\n | วันที่ | \nระดับน้ำ(ม.รทก) | \nปริมาณการไหล (ลบ.ม./วินาที) | \n
|---|---|---|
| \n {convertDateEng(item.timeStamp) +\n \" \" +\n convertTime(item.timeStamp)}\n | \n{item.valueWl || '-'} | \n{item.valueQ || '-'} | \n
\n \n {displayHeader}\n
\n );\n};\n\nexport default ModalForecast2;\n","import React from \"react\";\nimport \"./SpinnerTool.css\";\n\nconst SpinnerTool = () => {\n return (\n \n
\n \n \n
\n \n {displayDescription}\n {stationForecast ? (\n
\n \n {displayChartWaterLevel}\n {displayChartFlow}\n
\n ) : (\n \"\"\n )}\n \n {displayTableDescription}\n {displayTable}\n
\n \n
\n );\n};\n\nexport default SpinnerTool;\n","import React, { useEffect, useState } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport ReactDOMServer from \"react-dom/server\";\nimport InfoWindowEl from \"./InfoWindowEl\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport ModalStationDetail2 from \"./ModalStationDetail2\";\nimport ModalForecast2 from \"./ModalForecast2\";\nimport { kml as togeojson } from \"@tmcw/togeojson\";\nimport SpinnerTool from \"../Tools/Spinner/SpinnerTool\";\nimport ModalStationImage from \"./ModalStationImage\";\n\nconst GMapJs = () => {\n const { addToast } = useToasts();\n const [isModalStationOpen, setIsModalStationOpen] = useState(false);\n const [isModalForecastOpen, setIsModalForecastOpen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [lastestZoom, setLastestZoom] = useState(6);\n const [geoJson, setGeoJson] = useState([]);\n const [mapLat, setMapLat] = useState(13);\n const [mapLng, setMapLng] = useState(100);\n\n const isAutoView = useSelector((state) => state.dataReducer.isAutoView);\n const autoMeasureType = useSelector(\n (state) => state.mapReducer.autoMeasureType\n );\n const manualMeasureType = useSelector(\n (state) => state.mapReducer.manualMeasureType\n );\n const stationsFilter = useSelector((state) => state.mapReducer.stations);\n const kmlSelected = useSelector((state) => state.dataReducer.kmlSelected);\n const [markerSelected, setMarkerSelected] = useState(null);\n const [stationSelected, setStationSelected] = useState(null);\n const [stationImage, setStationImage] = useState([]);\n const [openModalImage, setOpenModalImage] = useState(false);\n\n const [stationDetail, setStationDetail] = useState(\"\");\n const [dataLastUpdated, setDataLastUpdated] = useState(\"\");\n const [gageData, setGageData] = useState(\"\");\n const [realTime, setRealTime] = useState(new Date().getTime());\n const [activeStation, setActiveStation] = useState(0);\n const [inActiveStation, setInActiveStation] = useState(0);\n\n const google = window.google;\n let map;\n let Markers = {};\n let infowindow;\n let dataHydroMeasurements = [];\n let dataMeteoMeasurements = [];\n let hydroActiveId = [];\n let meteoActiveId = [];\n\n let dataHydro = [];\n let dataMeteo = [];\n\n // let timeConfig = 60;\n let timeConfig = 3600000;\n\n const styles = {\n mapContainer: {\n height: \"100%\",\n },\n };\n\n if (stationSelected) {\n stationSelected.configDataStation.map((item) => {\n if (item.hydroType && item.active == \"Y\")\n dataHydroMeasurements.push(item.hydroType);\n if (item.meteotype && item.active == \"Y\")\n dataMeteoMeasurements.push(item.meteotype);\n });\n }\n\n if (dataHydroMeasurements.length) {\n dataHydroMeasurements.map((item) => {\n hydroActiveId.push(item.hydroTypeId);\n });\n }\n\n if (dataMeteoMeasurements.length) {\n dataMeteoMeasurements.map((item) => {\n meteoActiveId.push(item.meteoTypeId);\n });\n }\n\n if (dataLastUpdated) {\n dataLastUpdated.datas.map((item) => {\n if (item.dataType == \"hydro\") {\n dataHydro.push(item);\n }\n if (item.dataType == \"meteo\") {\n dataMeteo.push(item);\n }\n });\n }\n\n const getDateTime = async () => {\n await dwrApi\n .get(`/DateTime`)\n .then((res) => {\n let timestamp = res.data.timestamp.split(\" \");\n let timeNow = `${timestamp[0].split(\"-\").reverse().join(\"-\")} ${\n timestamp[1]\n }`;\n setRealTime(new Date(timeNow).getTime());\n\n // setRealTime(new Date(res.data.timestamp));\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const fetchStationDetail = async (stationId) => {\n await dwrApi\n .get(`/Stations/${stationId}`)\n .then((res) => {\n setStationDetail(res.data);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const fetchStationImage = async (stationId) => {\n if (stationId) {\n return await dwrApi\n .get(`/StationImages/Station/${stationId}`)\n .then((res) => {\n setStationImage(res.data);\n\n return res.data;\n })\n .catch(() => console.error(\"can not get station image\"));\n }\n };\n\n const fetchDataLastTransaction = async (stationId) => {\n if (stationId) {\n return await dwrApi\n .get(`/DataLastUpdates/Station/${stationId}`)\n .then((res) => {\n setDataLastUpdated(res.data);\n\n return res.data;\n })\n .catch((err) => {\n let message = \"กรุณาลองใหม่\";\n if (err.response && err.response.status == 401) {\n message = \"กรุณาล็อกอิน\";\n } else if (err.response && err.response.status == 400) {\n message = \"ข้อมูลไม่ถูกต้อง\";\n }\n // addToast(\n
\n \n \n \n \n \n
\n {message}
, {\n // appearance: \"error\",\n // autoDismiss: true,\n // });\n });\n }\n };\n\n const fetchGageData = async (stationId) => {\n if (stationId) {\n return await dwrApi\n .get(`/Gages/SubGage/Station/${stationId}`)\n .then((res) => {\n setGageData(res.data);\n return res.data;\n })\n .catch(() => console.error(\"can not get GageData\"));\n }\n };\n\n // useEffect(async () => {\n // const getGageData = await fetchGageData(stationId);\n // setGageData(getGageData);\n // }, [stationId]);\n\n const generateKml = async () => {\n await new google.maps.KmlLayer(null);\n await kmlSelected.map((kml) => {\n // const kmlLink = `https://imhydronetwork.amrasia.com/assets/kml/${kml}.kml`;\n const kmlLink = `https://link2.wisdomcloud.net/14JanKML/${kml}.kml`;\n\n new google.maps.KmlLayer(kmlLink, {\n preserveViewport: false,\n map: map,\n });\n });\n };\n\n const generateGeoJson = async () => {\n if (kmlSelected.length) {\n // const ifw = await new google.maps.Data(null);\n\n setIsLoading(true);\n // setGeoJson([]);\n await kmlSelected?.map((kml, kmlIndex) => {\n const getLabel = geoJson.map((item) => item.label);\n\n if (getLabel.indexOf(kml) == -1) {\n fetch(`./assets/kml/${kml}.kml`)\n .then((res) => res.text())\n .then(async (kmlText) => {\n const parser = new DOMParser();\n const kmlData = parser.parseFromString(kmlText, \"text/xml\");\n const geoJsonFile = togeojson(kmlData);\n const getDataLayer = await map.data.addGeoJson(geoJsonFile);\n\n await map.data.setStyle((feature) => {\n return {\n fillColor: feature.getProperty(\"fill\"),\n fillOpacity: feature.getProperty(\"fill-opacity\"),\n strokeColor: feature.getProperty(\"stroke\") || \"#fff\",\n strokeOpacity: feature.getProperty(\"stroke-opacity\") || 1,\n strokeWeight: 1,\n };\n });\n\n // if (kmlIndex >= kmlSelected.length - 1) {\n // setIsLoading(false);\n // }\n\n const obg = {\n label: kml,\n geoJsonFile,\n };\n\n setGeoJson((geoJson) => [...geoJson, obg]);\n\n if (kmlIndex >= kmlSelected.length - 1) {\n setIsLoading(false);\n }\n });\n } else {\n const res = geoJson.find((item) => item.label === kml);\n\n map.data.addGeoJson(res.geoJsonFile);\n map.data.setStyle((feature) => {\n return {\n fillColor: feature.getProperty(\"fill\"),\n fillOpacity: feature.getProperty(\"fill-opacity\"),\n strokeColor: feature.getProperty(\"stroke\") || \"#fff\",\n strokeOpacity: feature.getProperty(\"stroke-opacity\") || 1,\n strokeWeight: 1,\n };\n });\n\n if (kmlIndex >= kmlSelected.length - 1) {\n setIsLoading(false);\n }\n }\n });\n } else {\n // setGeoJson([]);\n }\n };\n\n const onMarkerClick = async (marker, station) => {\n setStationSelected(station);\n setMarkerSelected(marker);\n const fGageData = await fetchGageData(station.stationId);\n\n const fStationImage = await fetchStationImage(station.stationId);\n const fDataLastTransaction = await fetchDataLastTransaction(\n station.stationId\n );\n\n const renderContent = ReactDOMServer.renderToString(\n\n
\n );\n\n useEffect(() => {\n initMap();\n }, [kmlSelected, stationsFilter]);\n\n useEffect(() => {\n getDateTime();\n }, []);\n\n return (\n <>\n {stationSelected ? (\n สถานีอัตโนมัติ
\n \n
\n \n การสื่อสารขัดข้อง {inActiveStation} สถานี\n
\n ปกติ {activeStation} สถานี
\n \n
\n );\n};\n\nexport default Home;\n","import React from \"react\";\nimport { FaRegCalendarAlt } from \"react-icons/fa\";\nimport { Link, useRouteMatch } from \"react-router-dom\";\n\nconst NewsBox = ({ imgUrl, title, date, id }) => {\n let { url } = useRouteMatch();\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${date} ${monthNames[month]} ${year}`;\n };\n\n const styles = {\n imgContainer: {\n borderBottom: \"3px solid #06538A\",\n paddingBottom: \"5px\",\n // height: \"200px\",\n // width: \"250px\",\n padding: \"5px\",\n overflow: \"hidden\",\n },\n imgCrop: {\n height: \"200px\",\n width: \"250px\",\n objectFit: \"cover\",\n },\n date: {\n color: \"#06538D\",\n fontWeight: \"bold\",\n fontSize: \"16px\",\n },\n };\n\n return (\n \n
\n );\n};\n\nexport default NewsBox;\n","import React, { useState, useEffect } from \"react\";\nimport NewsDetail from \"../Components/NewsDetail\";\nimport {\n Switch,\n Route,\n useRouteMatch,\n useHistory,\n Link,\n} from \"react-router-dom\";\nimport NewsBox from \"../Components/NewsBox\";\n\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useSelector } from \"react-redux\";\nimport { FaChevronLeft } from \"react-icons/fa\";\n\nconst News = () => {\n const route = useRouteMatch();\n const history = useHistory();\n\n const [activeNews, setActiveNews] = useState(\"\");\n const userPermissions = useSelector(\n (state) => state.profileReducer.userPermissions\n );\n\n const styles = {\n header: {\n backgroundColor: \"#06538F\",\n height: \"35px\",\n color: \"white\",\n fontSize: \"22px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n paddingInline: \"10px\",\n },\n };\n\n const fetchNewsActive = () => {\n dwrApi\n .get(\"/News/Active\")\n .then((res) => setActiveNews(res.data))\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n useEffect(() => {\n fetchNewsActive();\n }, []);\n\n const displayNewsContainer = (\n \n \n
\n \n \n
\n \n \n \n
\n \n
\n \n {title}\n
\n\n {activeNews &&\n activeNews?.map((item) => {\n return (\n
\n );\n\n return (\n \n
\n );\n })}\n \n \n \n \n \n \n \n
\n );\n};\n\nexport default News;\n","import React from \"react\";\n\nconst TitleText = ({ title, leftBtn }) => {\n const styles = {\n header: {\n backgroundColor: \"#06538F\",\n height: \"35px\",\n color: \"white\",\n fontSize: \"22px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n };\n return (\n \n \n ข่าวประชาสัมพันธ์\n \n
\n {displayNewsContainer}
\n \n \n
\n \n {leftBtn ? leftBtn : }\n
\n );\n};\n\nexport default TitleText;\n","import React, { useState, useEffect } from \"react\";\nimport Resizer from \"react-image-file-resizer\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt } from \"react-icons/fa\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport _ from \"lodash\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport { useToasts } from \"react-toast-notifications\";\nimport DatePicker from \"react-datepicker\";\n\nconst ModalCRUDNews = ({ type, setIsNewsAction, onNewsEdit }) => {\n const [modalIsOpen, setIsOpen] = useState(false);\n const [rawImages, setRawImages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [isPreloadValues, setisPreloadValues] = useState(false);\n const [fileUrlPreview, setFileUrlPreview] = useState(\"\");\n const { addToast } = useToasts();\n const defaultValues = {\n newsTitle: onNewsEdit?.newsTitle,\n newsDetail: onNewsEdit?.newsDetail,\n startDate: onNewsEdit ? new Date(onNewsEdit.newsStartDate) : null,\n stopDate: onNewsEdit ? new Date(onNewsEdit.newsStopDate) : null,\n };\n\n const { register, handleSubmit, watch, reset, control, setValue } = useForm();\n const watchFile = watch(\"attachment\");\n\n const FileListItems = (files) => {\n var b = new ClipboardEvent(\"\").clipboardData || new DataTransfer();\n for (var i = 0, len = files.length; i < len; i++) b.items.add(files[i]);\n return b.files;\n };\n\n useEffect(async () => {\n if (onNewsEdit && modalIsOpen) {\n setisPreloadValues(true);\n /// set Text and Date Value\n reset(defaultValues);\n\n /// set Images\n setRawImages([]);\n await onNewsEdit.newsImage.map((imgData) => {\n fetch(imgData.newsImagePath)\n .then((res) => res.blob())\n .then(async (blobFile) => {\n const imgFile = new File([blobFile], imgData.newsImageName, {\n type: \"image/png\",\n });\n\n const img64 = await resizeFile(imgFile);\n const list = {\n imgId: _.uniqueId(\"newsImg_\"),\n imgFile: imgFile,\n img64,\n imgData,\n };\n\n setRawImages((rawImages) => [...rawImages, list]);\n });\n });\n\n // set File\n if (onNewsEdit.fileAttach) {\n await fetch(onNewsEdit.fileAttach).then(async (res) => {\n const splitUrl = res.url.split(\"/\");\n const fileName = splitUrl[splitUrl.length - 1];\n\n const blob = await res.blob();\n const file = new File([blob], fileName);\n const fileList = await new FileListItems([file]);\n\n setFileUrlPreview(res.url);\n setValue(\"attachment\", fileList);\n });\n }\n\n setisPreloadValues(false);\n }\n }, [onNewsEdit, modalIsOpen]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const resizeFile = (file) =>\n new Promise((resolve) => {\n Resizer.imageFileResizer(\n file,\n 200,\n 200,\n \"JPEG\",\n 100,\n 0,\n (uri) => {\n resolve(uri);\n },\n \"base64\"\n );\n });\n\n const openModal = () => {\n setIsOpen(true);\n };\n\n const closeModal = () => {\n setIsOpen(false);\n setRawImages([]);\n\n reset();\n };\n\n const onHandleDeleteImage = (img) => {\n const newRawData = rawImages.filter((list) => {\n return list.imgId !== img.imgId;\n });\n setRawImages(newRawData);\n };\n\n const onHandleInputImages = (ev) => {\n const files = Array.from(ev.target.files);\n files.map(async (img) => {\n const img64 = await resizeFile(img);\n const list = {\n imgId: _.uniqueId(\"newsImg_\"),\n imgFile: img,\n img64,\n };\n\n setRawImages((rawImages) => [...rawImages, list]);\n });\n };\n\n const onSubmit = async (ev) => {\n console.log({ ev });\n setIsLoading(true);\n\n const data = new FormData();\n\n rawImages.map((img) => {\n data.append(\"files\", img.imgFile);\n });\n data.append(\"file\", ev.attachment ? ev.attachment[0] : null);\n data.append(\"NewsTitle\", ev.newsTitle);\n data.append(\"NewsDetail\", ev.newsDetail);\n data.append(\"NewsStartDate\", convertDate(ev.startDate));\n data.append(\"NewsStopDate\", convertDate(ev.stopDate));\n\n if (onNewsEdit) {\n data.append(\"NewsId\", onNewsEdit.newsId);\n await dwrApi\n .put(`/News/${onNewsEdit.newsId}`, data)\n .then(() => {\n setIsNewsAction(true);\n addToast({title}
\n \n บันทึกข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((error) =>\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n })\n )\n .finally(() => {\n setIsLoading(false);\n });\n } else {\n await dwrApi\n .post(\"/News\", data)\n .then(() => {\n setIsNewsAction(true);\n addToast(บันทึกข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((error) =>\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n })\n )\n .finally(() => {\n setIsLoading(false);\n });\n }\n };\n\n const onHandleDeleteFile = () => {\n setFileUrlPreview(\"\");\n setValue(\"attachment\", null);\n };\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n const displayHeader = (\n \n
\n );\n\n const displayPreviewImages = (\n \n
\n หัวข้อข่าว
\n \n
\n \n
\n วันที่เริ่มแสดงผล
\n \n (\n
\n \n
\n วันที่สิ้นสุดการแสดง
\n \n (\n
\n \n
\n เอกสารแนบ
\n \n \n {watchFile ? watchFile[0]?.name : \"\"}\n \n ) : (\n \"\"\n )}\n
\n \n
\n \n \n
\n \n
\n รายละเอียดข่าว
\n \n
\n \n
\n \n **ขนาดแนะนำ 640x480 px หรืออัตราส่วน 3:2 และการแสดงรูปภาพ\n จะเรียงลำดับตามไฟล์แนบ\n \n ภาพประกอบ
\n \n
\n \n \n
\n {rawImages.length > 0 && (\n เพิ่มแล้ว {rawImages.length} ภาพ\n )}\n \n
\n \n );\n\n const displayButtonGroup = (\n \n {rawImages.map((img) => {\n return (\n \n 
\n
\n );\n })}\n \n onHandleDeleteImage(img)} />\n
\n \n \n {isLoading ? displaySpiner : บันทึก}\n
\n \n ยกเลิก\n
\n \n );\n return (\n \n {type === \"add\" && (\n \n )}\n {type === \"edit\" && (\n \n {displayHeader}\n\n \n \n
\n );\n};\n\nexport default ModalCRUDNews;\n","import React from \"react\";\nimport Modal from \"react-modal\";\n\nconst ModalDeleteEl = ({\n title,\n callBackSubmit,\n modalIsOpen,\n setModalIsOpen,\n isLoading,\n item,\n}) => {\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"10px\",\n\n minWidth: \"400px\",\n },\n };\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const displayContent = (\n คุณต้องการลบ{title} ที่เลือกใช่หรือไม่
\n );\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n ลบข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n\n setOnModalDeleteOpen(false);\n })\n .catch((error) =>\n addToast(มีข้อผิดพลาดเกิดขึ้น
, {\n appearance: \"error\",\n autoDismiss: true,\n })\n )\n .finally(() => {\n setIsLoading(false);\n });\n };\n\n if (allNews) {\n filterSearch = allNews?.filter((item) => {\n return (\n item.newsTitle?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n convertDate(item.newsStartDate).includes(searchTerm.toLowerCase()) ||\n convertDate(item.newsStopDate).includes(searchTerm.toLowerCase())\n );\n });\n }\n\n const sliceResult = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n return filterSearch.slice(start, end);\n };\n\n const displayManagement = (\n <>\n| หัวข้อข่าว | \nวันที่แสดง | \nวันที่สิ้นสุด | \n\n | \n \n | \n
|---|---|---|---|---|
| {item.newsTitle} | \n{convertDate(item.newsStartDate)} | \n{convertDate(item.newsStopDate)} | \n\n | \n \n | \n
\n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n return (\n \n
\n );\n};\n\nexport default NewsManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt } from \"react-icons/fa\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useForm } from \"react-hook-form\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ModalCRUDSlide = ({ setIsSlideAction, type, slideItem }) => {\n const [modalIsOpen, setIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [fileUrlPreview, setFileUrlPreview] = useState(\"\");\n const [isPreloadValues, setisPreloadValues] = useState(false);\n\n const defaultValues = {\n slideImageUrl: slideItem && slideItem.imageUrl ? slideItem.imageUrl : \"\",\n active: slideItem && slideItem.active === \"Y\" ? true : false,\n };\n\n const {\n register,\n handleSubmit,\n formState: { errors },\n reset,\n setValue,\n watch,\n } = useForm();\n\n const watchFile = watch(\"slideImageAttchment\");\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, var(--unnamed-color-ffffff) 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n padding: \"0\",\n },\n };\n\n const FileListItems = (files) => {\n var b = new ClipboardEvent(\"\").clipboardData || new DataTransfer();\n for (var i = 0, len = files.length; i < len; i++) b.items.add(files[i]);\n return b.files;\n };\n\n useEffect(async () => {\n if (slideItem && modalIsOpen) {\n setisPreloadValues(true);\n\n reset(defaultValues);\n\n if (slideItem.imagePath) {\n await fetch(slideItem.imagePath).then(async (res) => {\n const splitUrl = res.url.split(\"/\");\n const fileName = splitUrl[splitUrl.length - 1];\n\n const blob = await res.blob();\n const file = new File([blob], fileName);\n const fileList = await new FileListItems([file]);\n\n setFileUrlPreview(res.url);\n setValue(\"slideImageAttchment\", fileList);\n });\n }\n setisPreloadValues(false);\n }\n }, [modalIsOpen, slideItem]);\n\n const openModal = () => {\n setIsOpen(true);\n };\n\n const closeModal = () => {\n setIsOpen(false);\n reset();\n };\n\n const onHandleDeleteFile = () => {\n setFileUrlPreview(\"\");\n setValue(\"slideImageAttchment\", null);\n };\n\n const onSubmitAdd = async (ev) => {\n const data = new FormData();\n data.append(\"file\", ev.slideImageAttchment[0]);\n data.append(\"Active\", ev.active === true ? \"Y\" : \"N\");\n data.append(\"ImageUrl\", ev.slideImageUrl);\n\n await dwrApi\n .post(\"SlideShows?image=\", data)\n .then(() => {\n setIsSlideAction(true);\n closeModal();\n addToast(\n
\n\n {displaylimitResults}\n \n
\n \n setSearchTerm(ev.target.value)}\n />\n \n
\n \n \n \n
\n {displayManagement}
\n {filterSearch && (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n )}\n\n บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((error) => {\n addToast(มีข้อผิดพลาดเกิดขึ้น
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n };\n\n const onSubmitEdit = async (ev) => {\n console.log(\"onSubmitEdit\");\n const { imageOrder, slideShowId } = slideItem;\n\n const data = new FormData();\n data.append(\"file\", ev.slideImageAttchment[0]);\n data.append(\"Active\", ev.active === true ? \"Y\" : \"N\");\n data.append(\"ImageUrl\", ev.slideImageUrl);\n data.append(\"ImageOrder\", imageOrder);\n data.append(\"SlideShowID\", slideShowId);\n\n await dwrApi\n .put(`SlideShows/${slideShowId}`, data)\n .then(() => {\n setIsSlideAction(true);\n closeModal();\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((error) => {\n addToast(มีข้อผิดพลาดเกิดขึ้น
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n };\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n return (\n \n {type === \"add\" && (\n \n )}\n {type === \"edit\" && (\n \n \n \n บันทึก/แก้ไข Slide show\n \n \n
\n\n {displaySpiner} กรุณารอ
\n ) : (\n \"\"\n )}\n \n \n \n \n );\n};\n\nexport default ModalCRUDSlide;\n","import React, { useState, useEffect, useLayoutEffect } from \"react\";\nimport { FaTrashAlt, FaPencilAlt } from \"react-icons/fa\";\nimport { BiUpArrow, BiDownArrow } from \"react-icons/bi\";\nimport TitleText from \"../../../Components/TitleText\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport ModalCRUDSlide from \"../../../Components/ModalCRUDSlide\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport ModalDeleteEl from \"../../../Components/ModalDeleteEl\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { useForm } from \"react-hook-form\";\n\nconst SlideShowManagement = () => {\n const [allSlide, setAllSlide] = useState(\"\");\n const [isSlideAction, setIsSlideAction] = useState(false);\n const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);\n const [itemSelected, setItemSelected] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const { register, handleSubmit, watch, setValue, reset } = useForm();\n\n const fetchAllSlide = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/SlideShows\")\n .then((res) => setAllSlide(res.data))\n .catch((error) => console.error(error.message, \"💥💥💥 \"))\n .finally(() => setIsLoading(false));\n };\n\n useEffect(() => {\n fetchAllSlide();\n return () => {\n setIsSlideAction(false);\n };\n }, [isSlideAction]);\n\n const onToggleActive = (ev, item) => {\n const data = new FormData();\n data.append(\"ImageOrder\", item.imageOrder);\n data.append(\"SlideShowID\", item.slideShowId);\n data.append(\"Active\", ev.target.checked ? \"Y\" : \"N\");\n data.append(\"ImageUrl\", item.imageUrl);\n\n dwrApi\n .put(`/SlideShows/${item.slideShowId}`, data)\n .then((res) => {\n setIsSlideAction(true);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const onSortUp = async (ev) => {\n const data = new FormData();\n data.append(\"ImageOrder\", ev.imageOrder - 1);\n data.append(\"SlideShowID\", ev.slideShowId);\n\n await dwrApi\n .put(`/SlideShows/${ev.slideShowId}`, data)\n .then((res) => {\n setIsSlideAction(true);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const onSortDown = async (ev) => {\n const data = new FormData();\n data.append(\"ImageOrder\", ev.imageOrder + 1);\n data.append(\"SlideShowID\", ev.slideShowId);\n\n await dwrApi\n .put(`/SlideShows/${ev.slideShowId}`, data)\n .then((res) => {\n setIsSlideAction(true);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const onHandleDelete = (ev) => {\n setIsLoading(true);\n dwrApi\n .delete(`/SlideShows/${ev.slideShowId}`)\n .then((res) => {\n setIsSlideAction(true);\n setIsModalDeleteOpen(false);\n setIsLoading(false);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const onDeleteClick = (item) => {\n setItemSelected(item);\n setIsModalDeleteOpen(true);\n };\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n console.log({ allSlide });\n\n useEffect(async () => {\n if (allSlide) {\n const getAllStatus = await allSlide.map((item) => {\n return {\n [`isActive${item.slideShowId}`]: item.active === \"Y\" ? true : false,\n };\n });\n\n const objAllStatus = await Object.assign(...getAllStatus, {});\n\n reset(objAllStatus);\n }\n }, [allSlide]);\n\n const displayManagement = (\n <>\n | ภาพตัวอย่าง | \nการแสดงผล | \nแก้ไข | \n||
|---|---|---|---|---|
| \n | \n \n \n {/* \n \n */}\n \n \n | \n \n | \n \n | \n \n | \n
\n
\n );\n};\n\nexport default SlideShowManagement;\n","import React from \"react\";\n\nconst TextInput = ({\n title,\n register,\n required,\n keyName,\n styleInput,\n type,\n maxlength,\n minLength,\n disabled,\n column = [4, 8],\n unit,\n}) => {\n const styles = {\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"5px\",\n top: \"10px\",\n zIndex: 9,\n },\n inputBox: {\n position: \"relative\",\n },\n };\n\n return (\n \n \n \n
\n\n {displayManagement}
\n \n
\n );\n};\n\nexport default TextInput;\n","import React from \"react\";\n\nconst InputWithUnit = ({ unit, register, keyName }) => {\n const styles = {\n inputBox: {\n position: \"relative\",\n },\n input: {\n display: \"block\",\n\n width: \"100%\",\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"5px\",\n top: \"10px\",\n zIndex: 9,\n },\n };\n\n return (\n {title}
\n \n
\n \n {unit && {unit}}\n\n
\n \n {unit}\n
\n );\n};\n\nexport default InputWithUnit;\n","import React, { useEffect, useState } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimes, FaPencilAlt } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport TextInput from \"./TextInput\";\nimport Select from \"react-select\";\nimport { FaEye, FaEyeSlash } from \"react-icons/fa\";\nimport InputWithUnit from \"./InputWithUnit\";\n\nconst ModalCrudUser = ({\n userState,\n setIsAction,\n modalIsOpen,\n setModalIsOpen,\n}) => {\n const subRole = Array.from(document.querySelectorAll(\"#sub-role\"));\n const [userData, setUserData] = useState(\"\");\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [roleResponse, setRoleResponse] = useState([]);\n const [roleCenter, setRoleCenter] = useState([]);\n const [roleRegion, setRoleRegion] = useState([]);\n const [roleInternal, setRoleInternal] = useState([]);\n const [roleExternal, setRoleExternal] = useState([]);\n const [optionsStationCenter, setOptionsStationCenter] = useState([]);\n const [optionsStation, setOptionsStation] = useState([]);\n const [getRolesValue, setGetRolesValue] = useState([]);\n const [stationIdSelected, setStationIdSelected] = useState(\"\");\n const [stationCenterIdSelected, setStationCenterIdSelected] = useState(\"\");\n const [isShowPassword, setIsShowPassword] = useState(\"\");\n\n // console.log({ userData });\n\n useEffect(() => {\n const getRolesV =\n userData && !userData.isAdmin\n ? userData.hydroUserRole.map((item) => item.roleId.toString())\n : [];\n\n setGetRolesValue(getRolesV);\n }, [userData]);\n\n const blankValues = {\n active: false,\n confirmPassword: \"\",\n fullName: \"\",\n isAdmin: false,\n password: \"\",\n roles: [],\n userName: \"\",\n section: \"\",\n };\n\n const defaultValues = {\n active: userData?.active?.toString(),\n confirmPassword: userData.confirmPassword,\n fullName: userData.fullName,\n email: userData.email,\n isAdmin: userData.isAdmin,\n password: userData.password,\n roles: getRolesValue,\n userName: userData.userName,\n section:\n userData && !userData.isAdmin && userData.hydroUserRole.length\n ? userData.hydroUserRole[0].role.roleType.toString()\n : \"\",\n };\n // useEffect(() => {\n // subRole.map((item) => {\n // if (getRolesValue.indexOf(item.value) !== -1) {\n // item.checked = true;\n // }\n // });\n // }, [userData]);\n\n const {\n register,\n handleSubmit,\n watch,\n reset,\n setValue,\n getValues,\n setError,\n clearErrors,\n formState: { errors },\n } = useForm();\n\n const watchIsAdmin = watch(\"isAdmin\");\n const watchRoles = watch(\"roles\");\n const watchSection = watch(\"section\");\n let anyError = Object.keys(errors).length;\n let someError = Boolean(watchIsAdmin || (watchRoles && watchRoles.length));\n\n const isValid = (ev) => {\n if (watchIsAdmin) {\n return true;\n } else {\n switch (watchSection) {\n case 1:\n return watchRoles && watchRoles.length;\n case 2:\n return watchRoles && watchRoles.length;\n case 3:\n return true;\n case 4:\n return true;\n default:\n return false;\n }\n }\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n padding: \"0\",\n maxHeight: \"80vh\",\n },\n };\n\n const styles = {\n container: {\n fontSize: \"18px\",\n width: \"100%\",\n },\n header: {\n backgroundColor: \"#065389\",\n height: \"35px\",\n color: \"white\",\n fontSize: \"18px\",\n marginBottom: \"5px\",\n },\n input: {\n height: \"30px\",\n fontSize: \"12px\",\n fontWeight: \"normal\",\n width: \"380px\",\n },\n addUserButton: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n useEffect(() => {\n if (roleCenter && roleRegion && roleInternal && roleExternal && userData) {\n reset(defaultValues);\n }\n }, [roleCenter, roleRegion, roleInternal, roleExternal, userData]);\n\n useEffect(() => {\n if (!modalIsOpen) {\n setStationIdSelected(\"\");\n setStationCenterIdSelected(\"\");\n }\n }, [modalIsOpen]);\n\n useEffect(() => {\n const getStationCenterId = optionsStationCenter.find(\n (item) => item.value == userData.stationCenterId\n );\n setStationCenterIdSelected(getStationCenterId);\n }, [userData]);\n\n useEffect(() => {\n const getStationId = optionsStation.find(\n (item) => item.value == userData.stationId\n );\n // console.log({ getStationId, optionsStation })\n if (!!getStationId) {\n setStationIdSelected(getStationId);\n } else {\n setStationIdSelected(\"\");\n }\n }, [stationCenterIdSelected, optionsStation]);\n\n useEffect(() => {\n console.log({ getRolesValue });\n if (!!getRolesValue && !getRolesValue.includes(\"12\")) {\n setStationIdSelected(\"\");\n }\n }, [getRolesValue]);\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n console.log(\"CLOSE USER CRUD\");\n reset({});\n setUserData(\"\");\n setModalIsOpen(false);\n setIsAction(true);\n reset(blankValues);\n setUserData(\"\");\n };\n\n const fetchUser = () => {\n setIsLoading(true);\n dwrApi\n .get(`/HydroUsers/${userState.userId}/Manage`)\n .then((res) => {\n setUserData(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n })\n .finally(() => {\n setIsAction(false);\n setIsLoading(false);\n });\n };\n\n const fetchRole = async () => {\n await dwrApi\n .get(\"/Roles\")\n .then(async (res) => {\n setRoleResponse(res.data);\n\n const res1 = await res.data\n .filter((item) => item.roleType === 1)\n .sort((a, b) => a.rolePriority - b.rolePriority);\n const res2 = await res.data\n .filter((item) => item.roleType === 2)\n .sort((a, b) => a.rolePriority - b.rolePriority);\n const res3 = await res.data\n .filter((item) => item.roleType === 3)\n .sort((a, b) => a.rolePriority - b.rolePriority);\n const res4 = await res.data\n .filter((item) => item.roleType === 4)\n .sort((a, b) => a.rolePriority - b.rolePriority);\n\n setRoleCenter(res1);\n setRoleRegion(res2);\n setRoleInternal(res4);\n setRoleExternal(res3);\n\n return res.data;\n })\n .catch((err) => console.log(err.message));\n };\n\n const fetchStationCenter = async () => {\n await dwrApi\n .get(\"/StationCenters\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.stationCenterName,\n value: item.stationCenterId,\n };\n });\n setOptionsStationCenter(list);\n })\n .catch((err) => console.log(err.message));\n };\n\n const fetchStations = async () => {\n await dwrApi\n .get(`/Stations/StationCenter/${stationCenterIdSelected.value}`)\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.stationTh,\n value: item.stationId,\n };\n });\n setOptionsStation(list);\n })\n .catch((err) => console.log(err.message));\n };\n\n const onHandleSubmitEdit = async (ev) => {\n setIsLoading(true);\n\n let roles = [];\n\n if (ev.roles && ev.roles.length) {\n roles = ev.roles?.map((item) => {\n return { roleId: +item };\n });\n }\n\n const data = {\n userId: userState?.userId,\n userName: ev.userName,\n fullName: ev.fullName,\n email: ev.email ?? null,\n stationId: stationIdSelected ? +stationIdSelected.value : null,\n stationCenterId: stationCenterIdSelected\n ? +stationCenterIdSelected.value\n : null,\n isAdmin: ev.isAdmin ? ev.isAdmin : null,\n active: ev.active ? +ev.active : 0,\n roles: roles,\n };\n\n await dwrApi\n .put(`/HydroUsers/${userState?.userId}`, data)\n .then((res) => {\n addToast(แก้ไขผู้ใช้งานเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(มีข้อผิดพลาดเกิดขึ้น
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(true);\n });\n\n if (ev.password && ev.confirmPassword) {\n const dataPassword = {\n userId: userState.userId,\n password: ev.password,\n confirmPassword: ev.confirmPassword,\n };\n\n await dwrApi\n .put(`/HydroUsers/${userState.userId}/Password`, dataPassword)\n .then((res) => {\n addToast(บันทึก Password สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(มีข้อผิดพลาดเกิดขึ้น
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n }\n };\n\n const onHandleSubmitAdd = async (ev) => {\n setIsLoading(true);\n let roles = [];\n\n if (ev.roles && ev.roles.length) {\n roles = ev.roles?.map((item) => {\n return { roleId: +item };\n });\n }\n\n const data = {\n userName: ev.userName,\n password: ev.password ? ev.password : null,\n fullName: ev.fullName,\n email: ev.email ?? null,\n stationId: stationIdSelected ? +stationIdSelected.value : null,\n stationCenterId: stationCenterIdSelected\n ? +stationCenterIdSelected.value\n : null,\n isAdmin: ev.isAdmin ? ev.isAdmin : null,\n active: +ev.active,\n confirmPassword: ev.confirmPassword ? ev.confirmPassword : null,\n roles: roles,\n };\n\n await dwrApi\n .post(\"/HydroUsers\", data)\n .then((res) => {\n console.log(res.data);\n addToast(เพิ่มผู้ใช้งานเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(มีข้อผิดพลาดเกิดขึ้น
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(true);\n });\n };\n\n useEffect(() => {\n if (userState && modalIsOpen) {\n fetchUser();\n fetchRole();\n fetchStationCenter();\n } else {\n reset();\n }\n }, [userState]);\n\n useEffect(() => {\n if (modalIsOpen) {\n fetchRole();\n fetchStationCenter();\n } else {\n reset();\n }\n }, [modalIsOpen]);\n\n useEffect(() => {\n fetchRole();\n fetchStationCenter();\n }, []);\n\n useEffect(() => {\n if (watchIsAdmin) {\n setValue(\"roles\", []);\n setValue(\"section\", \"\");\n }\n }, [watchIsAdmin]);\n\n useEffect(() => {\n if (watchSection) {\n setValue(\"isAdmin\", false);\n setValue(\"roles\", []);\n }\n\n if (watchSection !== \"2\") {\n setStationCenterIdSelected(\"\");\n }\n }, [watchSection]);\n\n useEffect(() => {\n setStationIdSelected(\"\");\n if (stationCenterIdSelected) {\n fetchStations();\n }\n }, [stationCenterIdSelected]);\n\n const checkDuplicateUN = async (ev) => {\n return await dwrApi\n .get(`/HydroUsers/Checkusername?username=${ev.target.value}`)\n .then((res) => {\n const { duplicate } = res.data;\n\n if (duplicate) {\n setError(\"userName\", {\n type: \"manual\",\n message: \"ชื่อผู้ใช้งานมีอยู่แล้วในระบบ\",\n });\n } else {\n clearErrors(\"userName\");\n }\n })\n .catch((err) => console.log(err));\n };\n\n const displayProfile = (\n <>\n\n
\n \n
\n \n
\n ชื่อผู้ใช้งานระบบ
\n \n {\n checkDuplicateUN(ev);\n },\n })}\n />\n {errors.userName && (\n
\n {errors.userName.message}
\n )}\n \n
\n \n
\n\n \n setIsShowPassword(false)} />\n ) : (\n setIsShowPassword(true)}\n />\n )\n }\n />\n\n {errors.password && (\n \n {errors.password.message}\n \n )}\n
\n \n setIsShowPassword(false)} />\n ) : (\n setIsShowPassword(true)}\n />\n )\n }\n />\n
\n \n
\n \n );\n\n const displayAdminChoice = (\n สถานะการใช้งาน
\n \n
\n \n
\n \n
\n \n
\n );\n\n const displayCentral = (\n \n
\n \n
\n );\n\n const displayRegion = (\n \n
\n \n
\n \n {roleCenter?.map((item, index) => {\n return (\n
\n \n
\n );\n })}\n \n
\n \n
\n );\n const displayInternal = (\n \n
\n \n
\n \n
\n \n
\n \n ส่วนอุทกวิทยา\n
\n \n \n ev\n ? setStationCenterIdSelected(ev)\n : setStationCenterIdSelected(\"\")\n }\n isDisabled={!watchIsAdmin && watchSection == \"2\" ? false : true}\n />\n
\n \n {roleRegion?.map((item, index) => {\n return (\n
\n \n
\n );\n })}\n \n
\n \n
\n \n \n สถานี\n \n
\n \n \"ไม่พบสถานี\"}\n onChange={(ev) =>\n ev ? setStationIdSelected(ev) : setStationIdSelected(\"\")\n }\n isDisabled={\n !watchIsAdmin &&\n watchSection == \"2\" &&\n watchRoles &&\n watchRoles.length &&\n watchRoles.includes(\"12\")\n ? false\n : true\n }\n />\n
\n \n
\n );\n\n const displayExternal = (\n \n
\n \n
\n \n {roleInternal?.map((item, index) => {\n return (\n
\n \n
\n );\n })}\n \n
\n \n
\n );\n\n const displaySpiner = (\n \n
\n \n
\n \n {roleExternal?.map((item, index) => {\n return (\n
\n \n
\n );\n })}\n \n
\n \n Loading...\n
\n );\n\n return (\n \n \n
\n \n \n );\n};\n\nexport default ModalCrudUser;\n","import React, { useState, useEffect } from \"react\";\nimport { FaPencilAlt, FaTrashAlt, FaSearch } from \"react-icons/fa\";\n\nimport TitleText from \"../../../Components/TitleText\";\nimport ModalAddUser from \"./ModalAddUser\";\nimport Pagination from \"react-js-pagination\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport ModalEditUser from \"./ModalEditUser\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport Select from \"react-select\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport { useToasts } from \"react-toast-notifications\";\nimport ModalDeleteEl from \"../../../Components/ModalDeleteEl\";\nimport ModalCrudUser from \"../../../Components/ModalCrudUser\";\n\nconst UserManagement = () => {\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [isAction, setIsAction] = useState(false);\n const [modalCrudUserOpen, setModalCrudUserOpen] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [searchType, setSearchType] = useState({\n label: \"ทั้งหมด\",\n value: \"1\",\n });\n\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [itemSelected, setItemSelected] = useState(\"\");\n const [userStateSelected, setUserStateSelected] = useState(\"\");\n\n const [userData, setUserData] = useState([]);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [optionsRole, setOptionRole] = useState([]);\n const [roleIdSelected, setRoleIdSelected] = useState();\n const [statusSelected, setStatusSelected] = useState({\n label: \"เปิดใช้งาน\",\n value: \"1\",\n });\n\n const styles = {\n inputContainer: {\n height: \"38px\",\n },\n tableTd: {\n minHeight: \"50px\",\n verticalAlign: \"middle\",\n },\n addUserButton: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n },\n };\n\n const optionsStatus = [\n { label: \"เปิดใช้งาน\", value: \"1\" },\n { label: \"ปิดใช้งาน\", value: \"0\" },\n ];\n\n const optionsSearch = [\n { label: \"ทั้งหมด\", value: \"1\" },\n { label: \"ประเภทสิทธ์ผู้ใช้งาน\", value: \"2\" },\n { label: \"สถานะการใช้งาน\", value: \"3\" },\n ];\n\n const fetchUser = async () => {\n const adminParams = {\n isAdmin: true,\n Active: true,\n };\n\n const rolesParams = {\n RoleId: searchType.value === \"2\" ? roleIdSelected?.value : \"\",\n };\n\n setIsLoading(true);\n await dwrApi\n .get(`/HydroUsers`, {\n params:\n searchType.value === \"2\" && roleIdSelected?.value === \"admin\"\n ? adminParams\n : rolesParams,\n })\n .then((res) => {\n const filterActive = res.data.filter((item) => item.active >= 0);\n setUserData(filterActive);\n })\n .catch((err) => {\n console.log(err.message);\n })\n .finally(() => {\n setIsAction(false);\n setIsLoading(false);\n });\n };\n\n const fetchRole = async () => {\n await dwrApi\n .get(\"/Roles\")\n .then((res) => {\n console.log(\"fetchRole\", res.data);\n\n const list = [...res.data]\n .sort((a, b) => b.rolePriority - a.rolePriority)\n .map((item) => {\n return {\n label: item.roleName,\n value: item.roleId,\n };\n });\n\n const adminList = {\n label: \"ผู้ดูแลระบบ\",\n value: \"admin\",\n };\n\n const newList = [adminList, ...list];\n\n console.log(newList);\n\n setOptionRole(newList);\n })\n .catch((err) => console.log(err.message));\n };\n\n useEffect(() => {\n fetchRole();\n }, []);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n const onHandleToggleStatus = async (item) => {\n const data = {\n userId: item.userId,\n userName: item.userName,\n fullName: item.fullName,\n stationId: item.stationId,\n stationCenterId: item.stationCenterId,\n isAdmin: item.isAdmin,\n active: item.active > 0 ? 0 : 5,\n roles: item.hydroUserRole.map((data) => {\n return { roleId: data.roleId };\n }),\n };\n\n await dwrApi\n .put(`/HydroUsers/${item?.userId}`, data)\n .then((res) => {\n addToast(\n \n
\n \n เพิ่ม/แก้ไข ข้อมูลผู้ใช้งานระบบ
\n \n
\n แก้ไขผู้ใช้งานเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(มีข้อผิดพลาดเกิดขึ้น
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(true);\n });\n };\n\n const onPreDelete = (item) => {\n setModalIsOpen(true);\n setItemSelected(item);\n };\n\n const onHandleDelete = (item) => {\n setIsLoading(true);\n\n dwrApi\n .delete(`/HydroUsers/${item.userId}`)\n .then((res) => {\n setModalIsOpen(false);\n addToast(ลบข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => console.log(err.message))\n .finally(() => {\n setIsLoading(false);\n setIsAction(true);\n });\n };\n\n const filterSearchFn = () => {\n if (userData.length) {\n const result = userData?.filter((item) => {\n if (searchType.value === \"1\") {\n return (\n item.fullName.toLowerCase().includes(searchTerm.toLowerCase()) ||\n item.userName.toLowerCase().includes(searchTerm.toLowerCase())\n );\n } else if (searchType.value === \"2\") {\n return item;\n } else if (searchType.value === \"3\" && statusSelected.value === \"1\") {\n return item.active > 0;\n } else if (searchType.value === \"3\" && statusSelected.value === \"0\") {\n return item.active <= 0;\n }\n });\n setFilterBySeachTerm(result);\n }\n };\n\n const onOpenModalClick = (item) => {\n console.log({ onOpenModalClick: item });\n setUserStateSelected(item);\n setModalCrudUserOpen(true);\n };\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchUser();\n }, [isAction, roleIdSelected, searchType, statusSelected]);\n\n useEffect(() => {\n filterSearchFn();\n }, [userData, searchTerm]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displayManagement = (\n <>\n| ชื่อ สกุล (ชื่อผู้ใช้งานระบบ) | \nประเภทสิทธิ์การใช้งาน | \nสถานะการใช้งาน | \n\n | \n \n | \n
|---|---|---|---|---|
| \n {item.fullName} ({item.userName})\n | \n\n {item.isAdmin === \"Y\"\n ? \"Admin\"\n : item.hydroUserRole.length\n ? item.hydroUserRole.map((el, elIndex) => {\n return (\n \n {elIndex !== 0 && \",\"} {el.role.roleName}\n \n );\n })\n : // ? item.hydroUserRole[0].role.roleName\n \"\"}\n | \n\n \n \n \n {item.active > 0 ? (\n \n พร้อมใช้งาน \n ) : (\nระงับการใช้งาน \n )}\n\n \n | \n\n \n | \n \n | \n
\n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default UserManagement;\n","import React from \"react\";\nimport DatePicker from \"react-datepicker\";\n\nimport { FaCalendarAlt } from \"react-icons/fa\";\n\nconst CustomDatePicker = ({ date, setDate, type }) => {\n const yearTh = new Date(date).getFullYear() + 543;\n\n let placeholder = \"วว/ดด/ปปปป\";\n let dateFormat = `dd MMMM yyyy (${yearTh})`;\n\n if (type === \"date\") {\n placeholder = \"วว/ดด/ปปปป\";\n dateFormat = `dd MMMM yyyy (${yearTh})`;\n } else if (type === \"month\") {\n placeholder = \"ดด/ปปปป\";\n dateFormat = `MMMM yyyy (${yearTh})`;\n } else if (type === \"year\") {\n placeholder = \"ปปปป\";\n dateFormat = `yyyy (${yearTh})`;\n }\n\n const styles = {\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"30px\",\n top: \"10px\",\n cursor: \"pointer\",\n },\n };\n\n const CustomInput = ({ value, onClick }) => (\n \n
\n \n
\n \n setSearchType(ev)}\n value={searchType}\n />\n
\n \n {searchType.value === \"1\" ? (\n setSearchTerm(ev.target.value)}\n style={styles.inputContainer}\n />\n ) : (\n \"\"\n )}\n {searchType.value === \"2\" ? (\n setRoleIdSelected(ev)}\n />\n ) : (\n \"\"\n )}\n {searchType.value === \"3\" ? (\n setStatusSelected(ev)}\n />\n ) : (\n \"\"\n )}\n
\n \n \n onOpenModalClick(null)}\n >\n เพิ่มผู้ใช้งาน\n \n {/* \n
\n {displaylimitResults}
\n\n {displayManagement}
\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n \n
\n );\n\n return (\n \n \n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default UserReport;\n","import React, { useState, useEffect } from \"react\";\nimport { Line } from \"react-chartjs-2\";\nimport Modal from \"react-modal\";\n\nconst ModalChartManualStation = ({ data }) => {\n const [chartData, setChartData] = useState();\n const [modalIsOpen, setModalIsOpen] = useState(false);\n\n const styles = {\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}`;\n };\n\n const chartGenerate = async () => {\n const labels = [];\n const valueArr = [];\n\n const getValue = data.map((item) => item.hourlyGageHeight);\n const getGhVaue = getValue.flat();\n\n if (getGhVaue.length) {\n getGhVaue.map((list) => {\n labels.push(\n `${convertDate(list.gageHeightDateTime)} ${convertTime(\n list.gageHeightDateTime\n )}`\n );\n\n valueArr.push(list.gageHeight);\n });\n }\n\n setChartData({\n labels: labels,\n datasets: [\n {\n label: \"ระดับน้ำ / เมตร\",\n data: valueArr,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 4,\n pointBorderWidth: 1,\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n fill: false,\n },\n ],\n });\n };\n\n let options = {\n scales: {\n x: {\n ticks: {\n maxTicksLimit: 10,\n maxRotation: 90,\n minRotation: 90,\n },\n },\n },\n plugins: {\n zoom: {\n zoom: {\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: true,\n },\n mode: \"x\",\n },\n pan: {\n enabled: true,\n mode: \"xy\",\n speed: 1,\n threshold: 1,\n },\n },\n },\n };\n\n useEffect(() => {\n if (data && data.length) {\n chartGenerate();\n }\n }, [data]);\n\n return (\n \n {displayForm}\n
\n \n {displayReport ? (\n
\n \n \n แสดงกราฟ\n \n \n
\n );\n};\n\nexport default ModalChartManualStation;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaRegCommentDots } from \"react-icons/fa\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport Select from \"react-select\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ModalTypeRemark = ({ data, setValue, type, watch, path }) => {\n const { addToast } = useToasts();\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [optionTypeRemark, setOptionTypeRemark] = useState([]);\n const [typeRemarkIdselected, setTypeRemarkIdselected] = useState(\"\");\n const [remarkInput, setRemarkInput] = useState(\"\");\n\n const [typeRemarkRes, setTypeRemarkRes] = useState([]);\n\n // const hydroTypeRemark = watch(`${data.gageHeightDateTime}.typeRemark`);\n const getTypeRemark = watch(`${path}.typeRemark`);\n const getRemark = watch(`${path}.remark`);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const onSubmitData = async (ev) => {\n if (remarkInput.length > 30) {\n addToast(\n
\n \n ข้อมูลไม่ถูกต้อง ห้ามยาวเกิน 30 ตัวอักษร
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n } else {\n const defValue = typeRemarkRes.find(\n (item) => item.typeRemarkId == typeRemarkIdselected.value\n );\n\n await setValue(`${path}.typeRemark`, defValue || 0);\n\n if (type == \"hydro\") {\n await setValue(\n `${path}.remark`,\n typeRemarkIdselected.value == 1001 ? remarkInput : null\n );\n } else if (type === \"meteo\") {\n await setValue(\n `${path}.remark`,\n typeRemarkIdselected.value == 1002 ? remarkInput : null\n );\n }\n\n closeModal();\n }\n };\n\n const fetchTypeRemark = () => {\n dwrApi\n .get(\"/measureTypes/TypeRemark\")\n .then((res) => {\n let typeRemarkArr = [];\n const listFilter = res.data.filter(\n (item) => item.measureTypeId == (type === \"hydro\" ? 1 : 2)\n );\n\n const listOption = listFilter.map((data) => {\n return data.typeRemark.map((remark) => {\n typeRemarkArr.push(remark);\n const list = {\n label: remark.hourlyRemark,\n value: remark.typeRemarkId,\n };\n return list;\n });\n });\n\n setTypeRemarkRes(typeRemarkArr);\n\n setOptionTypeRemark(...listOption);\n })\n .catch((err) => console.log(err.message));\n };\n\n useEffect(() => {\n if (modalIsOpen && data) {\n fetchTypeRemark();\n }\n }, [modalIsOpen, data]);\n\n useEffect(() => {\n if (getTypeRemark && optionTypeRemark.length) {\n const defValue = optionTypeRemark.find(\n (item) => item.value == getTypeRemark.typeRemarkId\n );\n\n setTypeRemarkIdselected(defValue);\n setRemarkInput(getRemark);\n }\n }, [getTypeRemark, optionTypeRemark]);\n\n return (\n\n \n \n หมายเหตุ\n \n
\n \n {/* {data.remark || getTypeRemark ? ( */}\n {getTypeRemark ? (\n <>\n
\n \n {\n ev ? setTypeRemarkIdselected(ev) : setTypeRemarkIdselected(\"\");\n setRemarkInput(\"\");\n }}\n />\n {typeRemarkIdselected &&\n typeRemarkIdselected.value == (type === \"hydro\" ? 1001 : 1002) ? (\n setRemarkInput(ev.target.value)}\n value={remarkInput}\n />\n ) : (\n \"\"\n )}\n\n
\n \n \n \n );\n};\n\nexport default ModalTypeRemark;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaRegCommentDots } from \"react-icons/fa\";\n\nconst ModalShowRemark = ({ remark }) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n console.log({ remark });\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}`;\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear();\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${date} ${monthNames[month]} ${year}`;\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n // resetCs();\n };\n\n const displayButtonOpenModal = (\n \n \n บันทึก\n \n \n ยกเลิก\n
\n \n {remark.length ? (\n
\n );\n\n const displayHeader = (\n {`(${convertTime(remark[0].time)})${\n remark[0].remark\n }`}
\n ) : (\n \"\"\n )}\n \n
\n \n );\n\n return (\n {remark.length ? convertDate(remark[0].time) : \"\"}
\n \n {remark.map((item, index) => {\n return (\n \n {convertTime(item.time)} :\n {item.type === \"other\" ? `อื่น ๆ (${item.remark})` : item.remark}\n
\n );\n })}\n \n {displayButtonOpenModal}\n \n {displayHeader}\n {displayContent}\n
\n \n \n );\n};\n\nexport default ModalShowRemark;\n","import _ from \"lodash\";\nimport Resizer from \"react-image-file-resizer\";\n\nexport const convertDecimals = (value) => {\n if (value !== null) {\n const decimals = value.toString().split(\".\")[1];\n\n if (!decimals || decimals.length < 2) {\n return _.round(+value, 2).toFixed(2);\n } else {\n return _.round(+value, decimals.length).toFixed(decimals.length);\n }\n }\n};\n\nexport const sumNumberWithFixDigit = (arr) => {\n if (arr.length) {\n const getDecimal = arr.map((item) =>\n item && item.toString().split(\".\")[1]\n ? item.toString().split(\".\")[1].length\n : 0\n );\n const maxDecimal = Math.max(...getDecimal);\n\n const sum = _.sum(arr);\n\n if (!maxDecimal || maxDecimal < 2) {\n return _.round(+sum, 2).toFixed(2);\n } else {\n return _.round(+sum, maxDecimal).toFixed(maxDecimal);\n }\n }\n};\n\nexport const toDataURL = (url) =>\n fetch(url)\n .then((response) => response.blob())\n .then(\n (blob) =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onloadend = () => resolve(reader.result);\n reader.onerror = reject;\n reader.readAsDataURL(blob);\n })\n );\n\nexport const resizeFile = (file) =>\n new Promise((resolve) => {\n Resizer.imageFileResizer(\n file,\n 200,\n 200,\n \"JPEG\",\n 100,\n 0,\n (uri) => {\n resolve(uri);\n },\n \"base64\"\n );\n });\n\nexport const FileListItems = (files) => {\n var b = new ClipboardEvent(\"\").clipboardData || new DataTransfer();\n for (var i = 0, len = files.length; i < len; i++) b.items.add(files[i]);\n return b.files;\n};\n","import React from \"react\";\nimport Modal from \"react-modal\";\n\nconst ModalConfirm = ({\n title,\n callBackSubmit,\n modalIsOpen,\n setModalIsOpen,\n isLoading,\n item,\n agreeButton,\n notAgreeButton,\n}) => {\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"10px\",\n\n minWidth: \"400px\",\n },\n };\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const displayContent = \n \n ปิด\n
\n {title}
;\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n ทำการยืนยันข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n }, 100);\n }\n } catch (err) {\n console.log(err);\n\n addToast(\n{err && err.message ? err.message : \"มีบางอย่างผิดพลาด\"}
,\n {\n appearance: \"error\",\n autoDismiss: true,\n }\n );\n }\n\n // const firstData = dataToConfirm.slice(0, 1)[0];\n // const bodyData = dataToConfirm.slice(1, -1);\n // const lastData = dataToConfirm.slice(-1)[0];\n\n // try {\n // await dwrApi.post(\n // `/DailyGageHeights/${firstData.dailyGageHeightId}/${permissions}`\n // );\n\n // setTimeout(async () => {\n // if (bodyData.length) {\n // bodyData.map(async (item) => {\n // await dwrApi.post(\n // `/DailyGageHeights/${item.dailyGageHeightId}/${permissions}`\n // );\n // });\n // }\n\n // if (dataToConfirm.length > 1) {\n // await dwrApi\n // .post(\n // `/DailyGageHeights/${lastData.dailyGageHeightId}/${permissions}`\n // )\n // .then(() => fetchDailyGageHeight());\n // }\n\n // fetchDailyGageHeight();\n\n // addToast(ทำการยืนยันข้อมูลเรียบร้อยแล้ว
, {\n // appearance: \"success\",\n // autoDismiss: true,\n // });\n // }, 100);\n // } catch (err) {\n // console.log(\"💣\", err);\n\n // addToast(\n //{err && err.message ? err.message : \"มีบางอย่างผิดพลาด\"}
,\n // {\n // appearance: \"error\",\n // autoDismiss: true,\n // }\n // );\n // }\n };\n\n useEffect(() => {\n fetchDailyGageHeight();\n }, [startDate]);\n\n const stylesInline = {\n ...styleButton,\n opacity: !stationId ? \"0.5\" : \"1\",\n cursor: !stationId ? \"default\" : \"pointer\",\n };\n\n return (\n\n (stationId ? onConfirmDailyGageHeight() : \"\")}\n >\n {buttonName}\n
\n \n );\n};\n\nexport default ButtonSubmitData;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport { useForm } from \"react-hook-form\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport ModalPreviewExcel from \"../../../Components/ModalPreviewExcel\";\nimport ModalSubmitData from \"../../../Components/ModalSubmitData\";\nimport ModalChartManualStation from \"../../../Components/ModalChartManualStation\";\nimport ModalTypeRemark from \"../../../Components/ModalTypeRemark\";\nimport ModalDeleteEl from \"../../../Components/ModalDeleteEl\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport ModalShowRemark from \"../../../Components/ModalShowRemark\";\nimport _ from \"lodash\";\nimport { convertDecimals } from \"../../../Services/Function\";\nimport ModalConfirm from \"../../../Components/ModalConfirm\";\nimport ButtonSubmitData from \"../../../Components/ButtonSubmitData\";\n\nconst ManualStation = () => {\n const { addToast } = useToasts();\n const dispatch = useDispatch();\n const [dateSelected, setDateSelected] = useState(\"\");\n const [manageRequest, setManageRequest] = useState(false);\n const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [isShowSummary, setIsShowSummary] = useState(false);\n const [allBasin, setAllBasin] = useState([]);\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationsOfBasin, setStationsOfBasin] = useState([]);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [measureTime, setMeasureTime] = useState([]);\n const [measureTimeSeclected, setMeasureTimeSelected] = useState();\n const [hourlyGageHeights, setHourlyGageHeights] = useState(\"\");\n const [dayOfGageHeights, setDayOfGageHeights] = useState([]);\n const [gageHeightFullfill, setGageHeightFullfill] = useState([]);\n const [alertMessage, setAlertMessage] = useState(\"\");\n const [xlsFile, setXlsFile] = useState(\"\");\n const [dataFromXls, setDataFromXls] = useState([]);\n const [modalConfirmOpen, setModalConfirmOpen] = useState(false);\n const [monthSelected, setMonthSelected] = useState(\"\");\n const [yearSelected, setYearSelected] = useState(\"\");\n const [daysInMonth, setDaysInMonth] = useState(\"\");\n\n const {\n register,\n handleSubmit,\n formState: { errors },\n reset,\n watch,\n setValue,\n } = useForm();\n\n let period = [];\n let optionsBasin = [];\n let optionsStationsOfBasin = [];\n let stationSelected = [];\n let optionsMeasureTime = [];\n let data = [];\n\n let pureHourlyGageHeight = [];\n\n useEffect(() => {\n const dateConvert = new Date(dateSelected);\n const mo = dateConvert.getMonth();\n const ye = dateConvert.getFullYear();\n const dim = new Date(ye, mo + 1, 0).getDate();\n\n setMonthSelected(mo);\n setYearSelected(ye);\n setDaysInMonth(dim);\n }, [dateSelected]);\n\n let years = [];\n\n const startYear = 1960;\n const endYear = new Date().getFullYear();\n\n for (let i = startYear; i <= endYear; i++) {\n const listYear = {\n th: i + 543,\n en: i,\n };\n years.push(listYear);\n }\n\n const months = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ];\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n backgroundValue: {},\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute} น.`;\n };\n\n const convertDateTh = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear() + 543;\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${date} ${monthNames[month]} ${year}`;\n };\n\n const fetchAllBasin = () => {\n dwrApi\n .get(\"/Basins/User\")\n .then((res) => {\n setAllBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchStationOfBasin = () => {\n let stationTypeId = \"1\";\n dwrApi\n .get(\n `/Stations/Hydro?StationTypeId=${stationTypeId}&BasinId=${basinIdSelected.value}`\n )\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchMeasureTime = () => {\n dwrApi\n .get(`/measureTimes`)\n .then((res) => {\n setMeasureTime(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchHourlyGageHeights = () => {\n if (stationIdSelected && dateSelected) {\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n dwrApi\n .get(\n `/HourlyGageHeights/Station/${stationIdSelected.value}?month=${month}&year=${year}`\n )\n .then((res) => {\n if (res.data) {\n setHourlyGageHeights(res.data);\n } else {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n\n if (!Array.isArray(res.data)) {\n const filterOptions = optionsMeasureTime.find(\n (option) => option.id == res.data.measureTimeId\n );\n\n setMeasureTimeSelected(filterOptions || {});\n }\n })\n .catch((err) => {\n console.log(err.message);\n });\n }\n };\n\n const onDeleteHourlyGageHeights = () => {\n if (stationIdSelected && dateSelected) {\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n const data = {\n stationId: stationIdSelected.value,\n gageHeightDateTime: `${year}-${month}-01T06:52:57.936Z`,\n };\n\n dwrApi\n .delete(\n `/GageHeights/Station/${stationIdSelected.value}?month=${month}&year=${year}`,\n data\n )\n .then((res) => {\n setIsModalDeleteOpen(false);\n fetchHourlyGageHeights();\n })\n .catch((err) => {\n console.log(err.message);\n });\n }\n };\n\n const onHandleManageRequest = async (ev) => {\n // ev.preventDefault();\n setIsLoading(true);\n setGageHeightFullfill([]);\n reset();\n setManageRequest(true);\n setModalConfirmOpen(false);\n await generateDataTable();\n setIsLoading(false);\n };\n\n useEffect(() => {\n fetchAllBasin();\n fetchMeasureTime();\n }, []);\n\n useEffect(() => {\n setHourlyGageHeights(\"\");\n setManageRequest(false);\n fetchHourlyGageHeights();\n setMeasureTimeSelected(\"\");\n }, [dateSelected, stationIdSelected]);\n\n useEffect(() => {\n setManageRequest(false);\n }, [measureTimeSeclected]);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n if (allBasin) {\n allBasin.forEach((basin) => {\n if (basin.basinTh) {\n const list = {\n value: basin.basinId,\n label: `${basin.basinId} : ${basin.basinTh}`,\n };\n optionsBasin.push(list);\n }\n });\n }\n\n if (stationsOfBasin) {\n stationsOfBasin.forEach((station) => {\n if (station.active === \"Y\") {\n const list = {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh}`,\n };\n optionsStationsOfBasin.push(list);\n }\n });\n }\n\n if (stationsOfBasin && stationIdSelected) {\n stationSelected = stationsOfBasin.filter((station) => {\n return station.stationId == stationIdSelected.value;\n });\n }\n\n if (measureTime) {\n measureTime.forEach((time) => {\n if (time.measureTypeId == 1) {\n const list = {\n value: time.measureTimeDesc,\n label: `${time.measureTimeDesc} เวลา`,\n id: time.measureTimeId,\n };\n optionsMeasureTime.push(list);\n }\n });\n }\n\n if (measureTimeSeclected && hourlyGageHeights) {\n period = measureTime.filter((time) => {\n return (\n time.measureTypeId == 1 &&\n time.measureTimeDesc == measureTimeSeclected.value\n );\n });\n }\n\n if (hourlyGageHeights) {\n hourlyGageHeights.gagehightSiteOuts?.map((item) => {\n item.hourlyGageHeight.map((data) => {\n pureHourlyGageHeight.push(data);\n });\n });\n }\n\n const onHandleSubmit = async (ev) => {\n const month = (new Date(dateSelected).getMonth() + 1)\n .toString()\n .padStart(2, \"0\");\n const year = new Date(dateSelected).getFullYear();\n let ghId = \"\";\n if (\n +period[0].measureTimeId !== +hourlyGageHeights.measureTimeId &&\n hourlyGageHeights &&\n !Array.isArray(hourlyGageHeights)\n ) {\n const dataPostGageHeight = {\n gageHeightId:\n hourlyGageHeights && !Array.isArray(hourlyGageHeights)\n ? hourlyGageHeights?.gagehightSiteOuts[0]?.hourlyGageHeight[0]\n ?.gageHeightId\n : null,\n stationId: stationIdSelected.value,\n recordDate: `${year}-${month}-01T00:00:00`,\n measureTimeId: period[0].measureTimeId,\n };\n\n await dwrApi\n .post(`/GageHeights`, dataPostGageHeight)\n .then((res) => {\n console.log(res.data);\n ghId = res.data.gageHeightId;\n\n setModalConfirmOpen(false);\n })\n .catch((err) => {\n console.log(\"err Post GageHeights\", err.message);\n });\n }\n let newData = [];\n let editData = [];\n let resPost, resPut;\n\n const configPost = {\n headers: {\n \"X-Function-Header\": \"2630\",\n },\n };\n const configPut = {\n headers: {\n \"X-Function-Header\": \"2601\",\n },\n };\n data = Object.keys(ev).map((e, eIndex) => {\n const filterData = pureHourlyGageHeight.filter(\n (data) => data.gageHeightDateTime == e\n )[0];\n\n return {\n gageHeightDateTime: e,\n gageHeight: ev[e].value ? +ev[e].value : null,\n hourlyGageHeightId: filterData ? +filterData.hourlyGageHeightId : null,\n gageHeightId: ghId\n ? +ghId\n : filterData\n ? +filterData.gageHeightId\n : null,\n remark:\n \"remark\" in ev[e]\n ? ev[e].remark\n : filterData\n ? filterData.remark\n : null,\n typeRemarkId:\n \"typeRemark\" in ev[e]\n ? ev[e].typeRemark\n : filterData && filterData.typeRemark\n ? filterData.typeRemark.typeRemarkId\n : null,\n };\n });\n\n try {\n await data.map((item) => {\n if (item.hourlyGageHeightId) {\n editData.push(item);\n } else if (\n !item.hourlyGageHeightId &&\n (item.gageHeight !== null || item.typeRemarkId)\n ) {\n const list = {\n stationId: stationIdSelected.value,\n gageHeightDateTime: item.gageHeightDateTime,\n gageHeight: item.gageHeight,\n typeRemarkId: item.typeRemarkId,\n remark: item.remark,\n };\n newData.push(list);\n }\n });\n\n if (editData.length) {\n resPut = await dwrApi\n .put(`/HourlyGageHeights`, editData, configPut)\n .then(() => {\n setIsLoading(false);\n })\n .catch((err) => {\n setIsLoading(false);\n let message = \"กรุณาลองใหม่\";\n if (err.response && err.response.status == 401) {\n message = \"ไม่สามารถเพิ่มข้อมูลได้ กรุณาล็อกอิน\";\n } else if (err.response && err.response.status == 400) {\n message = \"ข้อมูลไม่ถูกต้อง\";\n }\n addToast({message}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n }\n if (newData.length) {\n resPost = await dwrApi\n .post(\n `/HourlyGageHeights/Station/${stationIdSelected.value}?month=${month}&year=${year}`,\n newData,\n configPost\n )\n .then((res) => {\n setIsLoading(false);\n return res;\n })\n .catch((err) => {\n setIsLoading(false);\n let message = \"กรุณาลองใหม่\";\n if (err.response && err.response.status == 401) {\n message = \"ไม่สามารถเพิ่มข้อมูลได้ กรุณาล็อกอิน\";\n } else if (err.response && err.response.status == 400) {\n message = \"ข้อมูลไม่ถูกต้อง\";\n }\n addToast({message}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n }\n fetchHourlyGageHeights();\n setIsShowSummary(true);\n\n if (resPost || resPut) {\n addToast(เพิ่มข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n }\n } catch (e) {\n addToast(\n{(e.response && e.response.title) || \"มีบางอย่างผิดพลาด\"}
,\n {\n appearance: \"error\",\n autoDismiss: true,\n }\n );\n }\n };\n\n const onInsertXls = (ev) => {\n ev.preventDefault();\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n const data = new FormData();\n data.append(\"excelFile\", xlsFile);\n\n dwrApi\n .post(`/GageHeights/ReadExcel?firstDayInMonth=${year}-${month}-01`, data)\n .then(async (res) => {\n setDataFromXls([]);\n let dataArr = [];\n\n const getHrsGh = res.data.hourlyGageHeight.filter(\n (item) => item.gageHeight\n );\n\n const ghValue = getHrsGh.map((item) => {\n const objKey = `${item.gageHeightDateTime}`;\n return {\n [objKey]: {\n value:\n item.gageHeight !== null\n ? convertDecimals(+item.gageHeight)\n : null,\n },\n };\n });\n\n const defValues = await Object.assign({}, ...ghValue);\n\n reset(defValues);\n })\n .catch((err) => console.log(err));\n };\n\n const generateDayInMonth = () => {\n if (dateSelected && period.length && hourlyGageHeights) {\n setDayOfGageHeights([]);\n for (let dayIndex = 0; dayIndex < +daysInMonth; dayIndex++) {\n console.log({ dayIndex });\n const dateFilter = hourlyGageHeights?.gagehightSiteOuts?.filter(\n (item) => {\n return (\n new Date(item.avgGageHeight.gageHeightDate).getDate() ==\n dayIndex + 1\n );\n }\n );\n\n const dataBlank = {\n avgGageHeight: {\n gageHeightDate: new Date(\n yearSelected,\n monthSelected,\n dayIndex + 1\n ).toISOString(),\n dailyGageHeightVal: \"\",\n },\n hourlyGageHeight: [],\n };\n\n if (dateFilter && dateFilter.length) {\n setDayOfGageHeights((dayOfGageHeights) => [\n ...dayOfGageHeights,\n ...dateFilter,\n ]);\n } else {\n setDayOfGageHeights((dayOfGageHeights) => [\n ...dayOfGageHeights,\n dataBlank,\n ]);\n }\n }\n }\n };\n\n const generateDataTable = async () => {\n try {\n setGageHeightFullfill([]);\n console.log({ dayOfGageHeights });\n dayOfGageHeights.map((item) => {\n let dateElements = [];\n let remarkElements = [];\n\n for (let index = 0; index < +period[0]?.groupMeasure?.length; index++) {\n const filterByDate = item.hourlyGageHeight.filter((time) => {\n let tm = new Date(time.gageHeightDateTime).getHours();\n let pd = +period[0].groupMeasure[index].timePeriod.slice(0, -6);\n\n return tm === pd;\n });\n\n if (filterByDate.length) {\n dateElements.push(...filterByDate);\n if (filterByDate[0].remark) {\n remarkElements.push({\n time: filterByDate[0].gageHeightDateTime,\n remark: filterByDate[0].remark,\n });\n }\n } else {\n const setDate =\n new Date(\n new Date(item.avgGageHeight.gageHeightDate).valueOf() +\n 1000 * 3600 * 24\n )\n .toISOString()\n .slice(0, 11) + period[0].groupMeasure[index].timePeriod;\n\n const data = {\n gageHeight: null,\n gageHeightDateTime: setDate,\n\n gageHeightId: null,\n hourlyGageHeightId: null,\n remark: null,\n typeRemark: null,\n };\n\n dateElements.push(data);\n }\n }\n\n const dataObj = {\n avgGageHeight: item.avgGageHeight,\n hourlyGageHeight: dateElements,\n remarkElements,\n };\n\n setGageHeightFullfill((gageHeightFullfill) => [\n ...gageHeightFullfill,\n dataObj,\n ]);\n });\n } catch (e) {\n console.log(e);\n }\n };\n\n useEffect(() => {\n generateDayInMonth();\n }, [hourlyGageHeights, measureTimeSeclected]);\n\n useEffect(() => {\n generateDataTable();\n }, [dayOfGageHeights]);\n\n const onHandleBasinIdSelected = (ev) => {\n if (ev) {\n setBasinIdSelected(ev);\n setStationIdSelected(\"\");\n } else {\n setBasinIdSelected(\"\");\n setStationIdSelected(\"\");\n }\n };\n\n const onHandleStationIdSelected = (ev) => {\n if (ev) {\n setStationIdSelected(ev);\n } else {\n setStationIdSelected(\"\");\n }\n };\n\n const onOpenModalConfirm = (ev) => {\n // ev.preventDefault();\n setModalConfirmOpen(true);\n };\n\n const displayForm = (\n\n
\n \n ) : (\n \"\"\n )}\n \n \n );\n\n const displayGroupButton = (\n \n setXlsFile(ev.target.files[0])}\n />\n\n \n นำเข้า\n \n\n \n ดาวน์โหลดไฟล์ตัวอย่าง\n \n
\n \n {hourlyGageHeights ? (\n
\n \n );\n\n const onResetValues = async () => {\n if (gageHeightFullfill.length) {\n const getHrsGh = gageHeightFullfill\n .map((item) => item.hourlyGageHeight)\n .flat();\n const ghValue = getHrsGh.map((item) => {\n const objKey = `${item.gageHeightDateTime}`;\n return {\n [objKey]: {\n value:\n item.gageHeight !== null\n ? convertDecimals(+item.gageHeight)\n : null,\n },\n };\n });\n\n const defValues = await Object.assign({}, ...ghValue);\n\n reset(defValues);\n }\n };\n\n useEffect(() => {\n onResetValues();\n }, [gageHeightFullfill]);\n\n const displayTable1 = (\n \n \n \n
\n
\n );\n\n const displayTable2 = (\n <>\n | \n วันที่\n | \n\n ระดับน้ำที่อ่านได้\n | \nเฉลี่ย(เมตร) | \nหมายเหตุ | \n
|---|---|---|---|
| \n {item.timePeriod.slice(0, -3)}\n | \n );\n })}\n|||
| \n {item.avgGageHeight\n ? convertDate(item.avgGageHeight.gageHeightDate)\n : \"\"}\n | \n\n {item.hourlyGageHeight.map((gage, index) => {\n return (\n\n {total && gageQty ? (total / gageQty).toFixed(2) : \"\"}\n | \n\n | \n
| ระดับน้ำ | \nเมตร | \nวันที่ | \nเวลา | \n
|---|---|---|---|
| สูงสุด | \n{hourlyGageHeights?.maxHourlyGageHeight?.gageHeight} | \n\n {hourlyGageHeights?.maxHourlyGageHeight?.gageHeightDateTime\n ? convertDateTh(\n hourlyGageHeights?.maxHourlyGageHeight?.gageHeightDateTime\n )\n : \"-\"}\n | \n\n {hourlyGageHeights?.maxHourlyGageHeight?.gageHeightDateTime\n ? convertTime(\n hourlyGageHeights?.maxHourlyGageHeight?.gageHeightDateTime\n )\n : \"-\"}\n | \n
| ต่ำสุด | \n{hourlyGageHeights?.minHourlyGageHeight?.gageHeight} | \n\n {hourlyGageHeights?.minHourlyGageHeight?.gageHeightDateTime\n ? convertDateTh(\n hourlyGageHeights?.minHourlyGageHeight?.gageHeightDateTime\n )\n : \"-\"}\n | \n\n {hourlyGageHeights?.minHourlyGageHeight?.gageHeightDateTime\n ? convertTime(\n hourlyGageHeights?.minHourlyGageHeight?.gageHeightDateTime\n )\n : \"-\"}\n | \n
| เฉลี่ยสูงสุด | \n{hourlyGageHeights?.maxAvgGageHeight?.dailyGageHeightVal} | \n\n {hourlyGageHeights?.maxAvgGageHeight?.gageHeightDate\n ? convertDateTh(\n hourlyGageHeights?.maxAvgGageHeight?.gageHeightDate\n )\n : \"-\"}\n | \n\n -\n {/* {hourlyGageHeights?.maxAvgGageHeight?.gageHeightDate\n ? convertTime(\n hourlyGageHeights?.maxAvgGageHeight?.gageHeightDate\n )\n : \"-\"} */}\n | \n
| เฉลี่ยต่ำสุด | \n{hourlyGageHeights?.minAvgGageHeight?.dailyGageHeightVal} | \n\n {hourlyGageHeights?.minAvgGageHeight?.gageHeightDate\n ? convertDateTh(\n hourlyGageHeights?.minAvgGageHeight?.gageHeightDate\n )\n : \"-\"}\n | \n\n -\n {/* {hourlyGageHeights?.minAvgGageHeight?.gageHeightDate\n ? convertTime(\n hourlyGageHeights?.minAvgGageHeight?.gageHeightDate\n )\n : \"-\"} */}\n | \n
\n
\n \n \n ) : manageRequest ? (\n \n {displayForm}\n
\n {hourlyGageHeights && manageRequest ? (\n <>\n {displayGroupButton}\n\n {alertMessage}
\n ) : (\n \"\"\n )}\n \n );\n};\n\nexport default ManualStation;\n","import React, { useState, useEffect } from \"react\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle } from \"react-icons/fa\";\n\nconst ModalChartAutoStation = ({ data, dataType }) => {\n const [chartData, setChartData] = useState();\n const [modalIsOpen, setModalIsOpen] = useState(false);\n\n const styles = {\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n header: {\n background: \"#06538F\",\n height: \"40px\",\n },\n };\n\n const openModal = (ev) => {\n ev.preventDefault();\n setModalIsOpen(true);\n };\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n padding: \"0\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}`;\n };\n\n const chartGenerate = async () => {\n const labels = [];\n const valueArr = [];\n\n if (data.length) {\n await data.map((item) => {\n labels.push(\n `${convertDate(item.serverTime)} ${convertTime(item.serverTime)}`\n );\n\n if (!dataType) {\n valueArr.push(item.waterLevel);\n } else if (dataType.value == \"01\") {\n valueArr.push(item.rainFall15);\n } else if (dataType.value == \"04\") {\n valueArr.push(item.temperature);\n }\n });\n }\n\n setChartData({\n labels: labels,\n datasets: [\n {\n label: `กราฟปริมาณ${dataType ? dataType.dataName : \"ระดับน้ำ\"}`,\n // label: \"ระดับน้ำ / เมตร\",\n data: valueArr,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 4,\n pointBorderWidth: 1,\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n fill: false,\n },\n ],\n });\n };\n\n let options = {\n scales: {\n x: {\n ticks: {\n maxTicksLimit: 10,\n maxRotation: 90,\n minRotation: 90,\n },\n },\n },\n plugins: {\n zoom: {\n zoom: {\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: true,\n },\n mode: \"x\",\n },\n pan: {\n enabled: true,\n mode: \"xy\",\n speed: 1,\n threshold: 1,\n },\n },\n legend: false,\n },\n };\n\n useEffect(() => {\n if (data && data.length) {\n chartGenerate();\n }\n }, [data, dataType]);\n\n return (\n \n \n แสดงกราฟ\n \n \n \n \n ข้อมูลปริมาณ{dataType?.dataName}\n เฉลี่ยรายวัน {convertDate(data[0]?.serverTime)} ถึง{\" \"}\n {convertDate(data[data?.length - 1]?.serverTime)}\n \n
\n \n
\n \n \n );\n};\n\nexport default ModalChartAutoStation;\n","import React, { useState, useEffect } from \"react\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../api/dwrApi\";\n\nconst BasinFormSelect = ({\n stationIdSelected,\n setStationIdSelected,\n stationsOfBasin,\n setStationsOfBasin,\n basinIdSelected,\n setBasinIdSelected,\n stationDetail,\n setStationDetail,\n basinIdCallback,\n stationIdCallback,\n isDisabledForm,\n subDomain,\n setTimeFormat,\n setDateSelected = () => {},\n}) => {\n const [allBasin, setAllBasin] = useState([]);\n const [optionsBasin, setOptionsBasin] = useState([]);\n const [optionsStationsOfBasin, setOptionsStationsOfBasin] = useState([]);\n\n const styles = {\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n };\n\n const fetchAllBasin = () => {\n // const sub = subDomain ? subDomain : \"\";\n // .get(`/Basins${sub}`)\n dwrApi\n .get(`/Basins/User`)\n .then((res) => {\n setAllBasin(res.data);\n const list = res.data.map((basin) => {\n if (basin.basinTh) {\n return {\n value: basin.basinId,\n label: `${basin.basinId} : ${basin.basinTh}`,\n };\n }\n });\n\n setOptionsBasin(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n fetchAllBasin();\n }, []);\n\n useEffect(() => {\n const getItem = optionsBasin.find((item) => item.value == basinIdCallback);\n\n if (basinIdCallback && optionsBasin.length) {\n setBasinIdSelected(getItem);\n }\n }, [basinIdCallback, optionsBasin]);\n\n useEffect(() => {\n const getItem = optionsStationsOfBasin.find(\n (item) => item.value == stationIdCallback\n );\n\n if (stationIdCallback && basinIdSelected && optionsStationsOfBasin.length) {\n setStationIdSelected(getItem);\n }\n }, [stationIdCallback, basinIdSelected, optionsStationsOfBasin]);\n\n const createOptionStations = () => {\n const list = stationsOfBasin\n .filter((el) => el.active === \"Y\")\n .map((station) => {\n return {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh}`,\n };\n });\n\n setOptionsStationsOfBasin(list);\n };\n\n useEffect(() => {\n if (stationsOfBasin) createOptionStations();\n }, [stationsOfBasin]);\n\n useEffect(() => {\n if (stationsOfBasin && stationIdSelected) {\n const stationSelected = stationsOfBasin.filter((station) => {\n return station.stationId == stationIdSelected.value;\n });\n\n setStationDetail(stationSelected);\n } else {\n setStationDetail(\"\");\n }\n }, [stationsOfBasin, stationIdSelected]);\n\n const onHandleBasinIdSelected = (ev) => {\n if (ev) {\n setBasinIdSelected(ev);\n setStationIdSelected(\"\");\n } else {\n setBasinIdSelected(\"\");\n setStationIdSelected(\"\");\n }\n if (!!setTimeFormat) {\n setTimeFormat(\"\");\n }\n setDateSelected(\"\");\n };\n\n const onHandleStationIdSelected = (ev) => {\n if (ev) {\n setStationIdSelected(ev);\n } else {\n setStationIdSelected(\"\");\n }\n if (!!setTimeFormat) {\n setTimeFormat(\"\");\n }\n setDateSelected(\"\");\n };\n\n return (\n {`กราฟปริมาณ${\n dataType ? dataType.dataName : \"ระดับน้ำ\"\n }`}
\n {dataType && dataType.value == \"01\" ? (\n \n
\n );\n};\n\nexport default BasinFormSelect;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport { useSelector } from \"react-redux\";\n\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nconst ReportWaterLevelAuto = () => {\n const optionsTime = [\n { label: \"ราย 15 นาที\", value: \"1\", type: \"date\" },\n { label: \"รายชั่วโมง\", value: \"2\", type: \"month\" },\n { label: \"รายวัน\", value: \"3\", type: \"year\" },\n /* { label: \"รายปี\", value: \"3\", type: \"year\" }, */\n ];\n const [allBasin, setAllBasin] = useState(\"\");\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationsOfBasin, setStationsOfBasin] = useState([]);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationDetail, setStationDetail] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [displayReport, setDisplayReport] = useState(false);\n\n const [timeSelected, setTimeSelected] = useState(optionsTime[0]);\n const [timeFormat, setTimeFormat] = useState();\n const [reportUrl, setReportUrl] = useState(\"\");\n const [disableBtn, setDisableBtn] = useState(false);\n\n const localReportUrl = localStorage.getItem(\"reportUrl\");\n\n const userId = useSelector((state) => state.profileReducer.userData.sub);\n const token = localStorage.getItem(\"token\");\n\n // let optionsBasin = [];\n let optionsStationsOfBasin = [];\n let stationSelected = [];\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n // const fetchAllBasin = () => {\n // dwrApi\n // .get(\"/Basins/User\")\n // .then((res) => {\n // setAllBasin(res.data);\n // })\n // .catch((err) => {\n // console.log(err.message);\n // });\n // };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations/Hydro?StationTypeId=2&BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n // useEffect(() => {\n // fetchAllBasin();\n // }, []);\n\n useEffect(() => {\n fetchStationOfBasin();\n setStationIdSelected(\"\");\n }, [basinIdSelected]);\n\n useEffect(() => {\n setTimeSelected(\"\");\n setTimeFormat(\"\");\n }, [stationIdSelected]);\n\n useEffect(() => {\n console.log({ timeSelected });\n }, [timeSelected]);\n\n useEffect(() => {\n setDisplayReport(false);\n }, [stationIdSelected, basinIdSelected, timeFormat, timeSelected]);\n\n // if (allBasin) {\n // allBasin.forEach((basin) => {\n // if (basin.basinTh) {\n // const list = {\n // value: basin.basinId,\n // label: `${basin.basinId} : ${basin.basinTh}`,\n // };\n // optionsBasin.push(list);\n // }\n // });\n // }\n\n if (stationsOfBasin) {\n stationsOfBasin.forEach((station) => {\n if (station.stationTh) {\n const list = {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh}`,\n };\n optionsStationsOfBasin.push(list);\n }\n });\n }\n\n if (stationsOfBasin && stationIdSelected) {\n stationSelected = stationsOfBasin.filter((station) => {\n return station.stationId == stationIdSelected.value;\n });\n }\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n setIsLoading(true);\n setDisplayReport(true);\n\n const baseUrl = `${localReportUrl}/frmGageHeight.aspx?`;\n\n const funcId = \"2604\";\n\n const getYear = new Date(timeFormat).getFullYear();\n\n const url = `${baseUrl}station_id=${\n stationIdSelected.value\n }&UserId=${userId}&ServerTime=${convertDate(timeFormat)}&type=${\n timeSelected.value\n }&token=${token}&functionid=${funcId}`;\n const urlTypeYear = `${baseUrl}station_id=${stationIdSelected.value}&UserId=${userId}&YearSelect=${getYear}&type=${timeSelected.value}&token=${token}&functionid=${funcId}`;\n\n if (timeSelected.value == \"3\") {\n setReportUrl(urlTypeYear);\n } else {\n setReportUrl(url);\n }\n\n setDisableBtn(true);\n };\n\n const onHandleLoad = (ev) => {\n const { returnValue } = ev.nativeEvent;\n\n if (returnValue) {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (!stationIdSelected || !timeFormat || !timeSelected) {\n setReportUrl(null);\n }\n\n setDisableBtn(false);\n }, [stationIdSelected, timeFormat, timeSelected]);\n\n const displayForm = (\n \n
\n\n รหัสลุ่มน้ำ :
\n \n \"ไม่พบลุ่มน้ำ\"}\n isClearable={true}\n isDisabled={isDisabledForm ? true : false}\n />\n
\n \n
\n\n รหัสสถานี :
\n \n \"ไม่พบสถานี\"}\n // isDisabled={basinIdSelected ? false : true}\n isDisabled={isDisabledForm ? true : false}\n isClearable={true}\n />\n
\n \n \n
\n \n {stationDetail.length > 0 ? (\n
\n \n {stationDetail[0].location ? (\n <>\n
\n ) : (\n \"\"\n )}\n \n ที่ตั้ง : ตำบล\n {\n stationDetail[0]?.location?.subDistrict?.subDistrictTh\n }{\" \"}\n อำเภอ\n {\n stationDetail[0]?.location?.subDistrict?.district\n ?.districtTh\n }{\" \"}\n จังหวัด\n {\n stationDetail[0]?.location?.subDistrict?.district\n ?.province?.provinceTh\n }\n
\n {stationDetail[0].gage ? (\n \n ศูนย์เสาระดับ :{\" \"}\n {stationDetail[0].gage\n ? stationDetail[0].gage.gageLevel\n : \"-\"}{\" \"}\n {stationDetail[0]?.gage?.gageTypeId &&\n stationDetail[0]?.gage?.gageTypeId == 1\n ? \"เมตร รทก.\"\n : \"เมตร รสม.\"}\n
\n ) : (\n \"\"\n )}\n \n ) : (\n ไม่ระบุตำแหน่ง
\n )}\n \n \n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default ReportWaterLevelAuto;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport { useSelector } from \"react-redux\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\n\nconst ReportWaterLevelManualMonthly = () => {\n const [allBasin, setAllBasin] = useState(\"\");\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationsOfBasin, setStationsOfBasin] = useState([]);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationDetail, setStationDetail] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [displayReport, setDisplayReport] = useState(false);\n const [disableBtn, setDisableBtn] = useState(false);\n const [timeFormat, setTimeFormat] = useState(\"\");\n const [reportUrl, setReportUrl] = useState(\"\");\n const localReportUrl = localStorage.getItem(\"reportUrl\");\n\n const userId = useSelector((state) => state.profileReducer.userData.sub);\n const token = localStorage.getItem(\"token\");\n\n let optionsBasin = [];\n let optionsStationsOfBasin = [];\n let stationSelected = [];\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"30px\",\n top: \"10px\",\n zIndex: 9,\n },\n };\n\n const fetchAllBasin = () => {\n dwrApi\n .get(\"/Basins\")\n .then((res) => {\n setAllBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations/Hydro?StationTypeId=1&BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n fetchAllBasin();\n }, []);\n\n useEffect(() => {\n fetchStationOfBasin();\n }, [basinIdSelected]);\n\n useEffect(() => {\n setTimeFormat(\"\");\n }, [stationIdSelected]);\n\n useEffect(() => {\n setDisplayReport(false);\n }, [stationIdSelected, basinIdSelected, timeFormat]);\n\n if (allBasin) {\n allBasin.forEach((basin) => {\n if (basin.basinTh) {\n const list = {\n value: basin.basinId,\n label: `${basin.basinId} : ${basin.basinTh}`,\n };\n optionsBasin.push(list);\n }\n });\n }\n\n if (stationsOfBasin) {\n stationsOfBasin.forEach((station) => {\n if (station.stationTh) {\n const list = {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh}`,\n };\n optionsStationsOfBasin.push(list);\n }\n });\n }\n\n if (stationsOfBasin && stationIdSelected) {\n stationSelected = stationsOfBasin.filter((station) => {\n return station.stationId == stationIdSelected.value;\n });\n }\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n setIsLoading(true);\n setDisplayReport(true);\n const baseUrl = `${localReportUrl}/frmGageHeight.aspx?`;\n\n const funcId = \"2606\";\n const yearSelect = new Date(timeFormat).getFullYear();\n const urlTypeYear = `${baseUrl}station_id=${stationIdSelected.value}&UserId=${userId}&YearSelect=${yearSelect}&type=4&token=${token}&functionid=${funcId}`;\n setReportUrl(urlTypeYear);\n setDisableBtn(true);\n };\n\n const onHandleLoad = (ev) => {\n const { returnValue } = ev.nativeEvent;\n\n if (returnValue) {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (!stationIdSelected || !timeFormat) {\n setReportUrl(null);\n }\n setDisableBtn(false);\n }, [stationIdSelected, timeFormat]);\n\n const displayForm = (\n \n {displayForm}\n
\n \n {displayReport ? (\n
\n \n \n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default ReportWaterLevelManualMonthly;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport { useSelector } from \"react-redux\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nconst ReportWaterLevelManualDaily = () => {\n const [allBasin, setAllBasin] = useState(\"\");\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationsOfBasin, setStationsOfBasin] = useState([]);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationDetail, setStationDetail] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [displayReport, setDisplayReport] = useState(false);\n\n const [timeFormat, setTimeFormat] = useState(\"\");\n const [reportUrl, setReportUrl] = useState(\"\");\n const localReportUrl = localStorage.getItem(\"reportUrl\");\n const [disableBtn, setDisableBtn] = useState(false);\n\n const userId = useSelector((state) => state.profileReducer.userData.sub);\n\n const token = localStorage.getItem(\"token\");\n\n let optionsBasin = [];\n let optionsStationsOfBasin = [];\n let stationSelected = [];\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"30px\",\n top: \"10px\",\n zIndex: 9,\n },\n };\n\n const fetchAllBasin = () => {\n dwrApi\n .get(\"/Basins\")\n .then((res) => {\n setAllBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations/Hydro?StationTypeId=1&BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n fetchAllBasin();\n }, []);\n\n useEffect(() => {\n fetchStationOfBasin();\n }, [basinIdSelected]);\n\n useEffect(() => {\n setTimeFormat(\"\");\n }, [stationIdSelected]);\n\n useEffect(() => {\n setDisplayReport(false);\n }, [stationIdSelected, basinIdSelected, timeFormat]);\n\n if (allBasin) {\n allBasin.forEach((basin) => {\n if (basin.basinTh) {\n const list = {\n value: basin.basinId,\n label: `${basin.basinId} : ${basin.basinTh}`,\n };\n optionsBasin.push(list);\n }\n });\n }\n\n if (stationsOfBasin) {\n stationsOfBasin.forEach((station) => {\n if (station.stationTh) {\n const list = {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh}`,\n };\n optionsStationsOfBasin.push(list);\n }\n });\n }\n\n if (stationsOfBasin && stationIdSelected) {\n stationSelected = stationsOfBasin.filter((station) => {\n return station.stationId == stationIdSelected.value;\n });\n }\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n setIsLoading(true);\n setDisplayReport(true);\n const baseUrl = `${localReportUrl}/frmGageHeightHourly.aspx?`;\n\n const funcId = \"2605\";\n const getDate = new Date(timeFormat);\n const serverTime = `${getDate.getFullYear()}-${getDate.getMonth() + 1}-01`;\n\n const url = `${baseUrl}station_id=${stationIdSelected.value}&UserId=${userId}&RecordDate=${serverTime}&MeasureTimeId=1&token=${token}&functionid=${funcId}`;\n\n setReportUrl(url);\n setDisableBtn(true);\n };\n\n const onHandleLoad = (ev) => {\n const { returnValue } = ev.nativeEvent;\n\n if (returnValue) {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (!stationIdSelected || !timeFormat) {\n setReportUrl(null);\n }\n setDisableBtn(false);\n }, [stationIdSelected, timeFormat]);\n\n const displayForm = (\n \n {displayForm}\n
\n \n {displayReport ? (\n
\n \n \n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default ReportWaterLevelManualDaily;\n","import React, { useState, useEffect } from \"react\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useForm } from \"react-hook-form\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ButtonSubmitDataMeteo = ({\n stationId,\n // dataConfirm,\n permissions,\n buttonName,\n styleButton,\n startDate,\n dataType,\n isAutoStation,\n}) => {\n const { addToast } = useToasts();\n\n // const [dataToConfirm, setDataToConfirm] = useState([]);\n\n const fetchData = async () => {\n const result = new Date(startDate);\n\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n let day = result.getDate();\n\n try {\n let res = await dwrApi\n .get(\n `/DailyMeteos/Station/${stationId}?MeteoTypeId=${\n dataType.value || dataType\n }&month=${month}&year=${year}${isAutoStation ? `&day=${day}` : \"\"}`\n )\n\n return res.data;\n } catch (err) {\n console.error(err);\n }\n // await dwrApi\n // .get(\n // `/DailyMeteos/Station/${stationId}?MeteoTypeId=${\n // dataType.value || dataType\n // }&month=${month}&year=${year}${isAutoStation ? `&day=${day}` : \"\"}`\n // )\n // .then((res) => {\n // setDataToConfirm(res.data);\n // // console.log('res data', res.data)\n // })\n // .catch((err) => {\n // console.log(err.message);\n // });\n \n };\n\n const onConfirmDailyMeteo = async (ev) => {\n try {\n let confirmData = await fetchData();\n if(confirmData) {\n console.log('check data', confirmData)\n const firstData = confirmData.slice(0, 1)[0];\n const bodyData = confirmData.slice(1, -1);\n const lastData = confirmData.slice(-1)[0];\n await dwrApi.post(\n `/DailyMeteos/${firstData.dailyMeteoId}/${permissions}`\n );\n \n setTimeout(async () => {\n if (bodyData.length) {\n bodyData.map(async (item) => {\n await dwrApi.post(\n `/DailyMeteos/${item.dailyMeteoId}/${permissions}`\n );\n });\n }\n \n if (confirmData.length > 1) {\n await dwrApi\n .post(`/DailyMeteos/${lastData.dailyMeteoId}/${permissions}`)\n .then(async () => {\n await fetchData()\n } );\n }\n \n addToast(\n {displayForm}\n
\n \n {displayReport ? (\n
\n ทำการยืนยันข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n }, 100);\n }\n \n } catch (err) {\n console.log(err);\n\n addToast(\n{err && err.message ? err.message : \"มีบางอย่างผิดพลาด\"}
,\n {\n appearance: \"error\",\n autoDismiss: true,\n }\n );\n }\n };\n\n useEffect(() => {\n fetchData();\n }, [startDate]);\n\n const stylesInline = {\n ...styleButton,\n opacity: !stationId ? \"0.5\" : \"1\",\n cursor: !stationId ? \"default\" : \"pointer\",\n };\n\n return (\n\n (stationId ? onConfirmDailyMeteo() : \"\")}\n >\n {buttonName}\n
\n \n );\n};\n\nexport default ButtonSubmitDataMeteo;\n","import React, { useState, useEffect } from \"react\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport Modal from \"react-modal\";\n\nconst ModalChartManualStationMeteo = ({ data, dataType }) => {\n const [chartData, setChartData] = useState();\n const [modalIsOpen, setModalIsOpen] = useState(false);\n\n // console.log(data, dataType);\n\n const styles = {\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const openModal = (ev) => {\n ev.preventDefault();\n setModalIsOpen(true);\n };\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n padding: \"0\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute}`;\n };\n\n const chartGenerate = async () => {\n const labels = [];\n const valueArr = [];\n\n const getValue = data.map((item) => item.hourlyMeteo);\n const getGhVaue = getValue.flat();\n\n if (getGhVaue.length) {\n getGhVaue.map((list) => {\n labels.push(\n `${convertDate(list.meteoDateTime)} ${convertTime(\n list.meteoDateTime\n )}`\n );\n\n valueArr.push(list.meteoHourly);\n });\n }\n\n setChartData({\n labels: labels,\n datasets: [\n {\n label: `กราฟปริมาณ${dataType ? dataType.dataName : \"ระดับน้ำ\"}`,\n data: valueArr,\n backgroundColor: [\"rgba(41, 171, 226, 1)\"],\n borderWidth: 4,\n pointBorderWidth: 1,\n borderColor: [\"rgba(41, 171, 226, 1)\"],\n fill: false,\n },\n ],\n });\n };\n\n let options = {\n scales: {\n x: {\n ticks: {\n maxTicksLimit: 10,\n maxRotation: 90,\n minRotation: 90,\n },\n },\n },\n plugins: {\n zoom: {\n zoom: {\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: true,\n },\n mode: \"x\",\n },\n pan: {\n enabled: true,\n mode: \"xy\",\n speed: 1,\n threshold: 1,\n },\n },\n },\n };\n\n useEffect(() => {\n if (data && data.length) {\n chartGenerate();\n }\n }, [data]);\n\n return (\n \n \n แสดงกราฟ\n \n \n \n \n ข้อมูลปริมาณ{dataType?.dataName}\n เฉลี่ยรายวัน {convertDate(data[0]?.avgMeteo.meteoDate)} ถึง{\" \"}\n {convertDate(data[data?.length - 1]?.avgMeteo.meteoDate)}\n \n
\n \n {/*
\n \n \n );\n};\n\nexport default ModalChartManualStationMeteo;\n","import React, { useState, useEffect } from \"react\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport { useToasts } from \"react-toast-notifications\";\nimport ModalChartAutoStation from \"../../../Components/ModalChartAutoStation\";\nimport { useForm } from \"react-hook-form\";\nimport ModalSubmitDataMeteo from \"../../../Components/ModalSubmitDataMeteo\";\nimport { FaRegCommentDots } from \"react-icons/fa\";\nimport { useSelector } from \"react-redux\";\nimport ModalTypeRemark from \"../../../Components/ModalTypeRemark\";\nimport ModalShowRemark from \"../../../Components/ModalShowRemark\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport moment from \"moment\";\nimport { convertDecimals } from \"../../../Services/Function\";\nimport ButtonSubmitDataMeteo from \"../../../Components/ButtonSubmitDataMeteo\";\nimport ModalChartManualStationMeteo from \"../../../Components/ModalChartManualStationMeteo\";\nimport ModalConfirm from \"../../../Components/ModalConfirm\";\n\nconst ManualStationMeteo = () => {\n const { addToast } = useToasts();\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [measureTime, setMeasureTime] = useState(\"\");\n\n const [transaction, setTransaction] = useState(\"\");\n const [transactionSelected, setTransactionSelected] = useState(\"\");\n const [newTransactionSelected, setNewTransactionSelected] = useState(\"\");\n const [newTransactionFullfill, setNewTransactionFullfill] = useState(\"\");\n const [timePeriod, setTimePeriod] = useState(\"\");\n const [alertMessage, setAlertMessage] = useState(\"\");\n\n const [dataType, setDataType] = useState(\"\");\n const [measureTimeSeclected, setMeasureTimeSelected] = useState(\"\");\n const [startDate, setStartDate] = useState(\"\");\n const [dateMarkup, setDateMarkup] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [monthSelected, setMonthSelected] = useState(\"\");\n const [yearSelected, setYearSelected] = useState(\"\");\n const [daysInMonth, setDaysInMonth] = useState(\"\");\n\n const [modalConfirmOpen, setModalConfirmOpen] = useState(false);\n\n const userPermissions = useSelector(\n (state) => state.profileReducer.userPermissions\n );\n\n let optionDataType = [];\n let optionTimePeriod = [];\n let dataMeteoMeasurements = [];\n\n useEffect(() => {\n const dateConvert = new Date(startDate);\n const mo = dateConvert.getMonth();\n const ye = dateConvert.getFullYear();\n const dim = new Date(ye, mo + 1, 0).getDate();\n\n setMonthSelected(mo);\n setYearSelected(ye);\n setDaysInMonth(dim);\n }, [startDate]);\n\n let pureHourlyMeteo = [];\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors },\n setValue,\n reset,\n } = useForm();\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertDate2 = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour} : ${minute}`;\n };\n\n const convertMonth = (value) => {\n const result = new Date(value);\n\n let month = result.getMonth();\n let year = result.getFullYear();\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return ` ${monthNames[month]} ${year}`;\n };\n\n const fetchMeteoStation = () => {\n let stationTypeId = \"1\";\n dwrApi\n .get(\n `/Stations/Meteo?StationTypeId=${stationTypeId}&BasinId=${basinIdSelected.value}`\n )\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const fetchTransaction = () => {\n const result = new Date(startDate);\n\n const month = result.getMonth() + 1;\n const year = result.getFullYear();\n\n dwrApi\n .get(\n `/HourlyMeteos/Station/${stationIdSelected.value}?month=${month}&year=${year}`\n )\n .then((res) => {\n setTransaction(res.data);\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n })\n .catch((err) => {\n console.log(\"err\", err);\n });\n };\n\n const fetchMeasureTime = () => {\n dwrApi\n .get(`/measureTimes`)\n .then((res) => {\n setMeasureTime(res.data);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchMeteoStation();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n setTransaction(\"\");\n setNewTransactionSelected(\"\");\n setNewTransactionFullfill(\"\");\n setAlertMessage(\"\");\n\n if (startDate && stationIdSelected) fetchTransaction();\n }, [startDate, stationIdSelected, dataType]);\n\n useEffect(() => {\n if (stationIdSelected) {\n setDataType(\"\");\n setStartDate(\"\");\n setMeasureTimeSelected(null);\n setTransaction(\"\");\n }\n }, [stationIdSelected]);\n\n useEffect(() => {\n fetchMeasureTime();\n }, []);\n\n useEffect(() => {\n if (transaction && dataType) {\n const filterTransaction = transaction.filter((item) => {\n return item.meteoTypeId == dataType.value && item.measureTimeId;\n });\n setTransactionSelected(filterTransaction[0] || []);\n }\n }, [transaction, dataType]);\n\n if (stationDetail.length) {\n stationDetail[0].configDataStation.map((item) => {\n if (item.meteotype) dataMeteoMeasurements.push(item.meteotype);\n });\n }\n\n if (dataMeteoMeasurements.length) {\n dataMeteoMeasurements.forEach((item) => {\n const list = {\n value: item.meteoTypeId,\n label: `${item.meteoTypeId} : ${item.meteoTypeTh} `,\n dataName: item.meteoTypeTh,\n };\n optionDataType.push(list);\n });\n }\n let filterMeasureTimeId = [];\n\n if (transaction.length) {\n transaction.map((item) => {\n if (item.measureTimeId && item.meteoTypeId == dataType.value) {\n filterMeasureTimeId.push(item.measureTimeId);\n }\n });\n }\n\n if (measureTime.length) {\n measureTime.map((time) => {\n if (time.measureTypeId == \"2\") {\n const list = {\n value: time.measureTimeDesc,\n label: `${time.measureTimeDesc} เวลา`,\n id: time.measureTimeId,\n };\n optionTimePeriod.push(list);\n }\n });\n }\n\n if (transactionSelected) {\n transactionSelected.meteoSiteOuts?.map((item) => {\n item.hourlyMeteo.map((data) => {\n pureHourlyMeteo.push(data);\n });\n });\n }\n\n const generateTable = () => {\n if (measureTime && measureTimeSeclected && transaction) {\n const filterTime = measureTime.filter(\n (time) =>\n time.measureTypeId == \"2\" &&\n time.measureTimeDesc == measureTimeSeclected.value\n );\n\n setTimePeriod(filterTime[0]);\n reset();\n setModalConfirmOpen(false);\n // generateDataTable();\n }\n };\n\n const onHandleSubmit = async (ev) => {\n // let data = [];\n let newData = [];\n let editData = [];\n let mId = \"\";\n\n const month = (new Date(startDate).getMonth() + 1)\n .toString()\n .padStart(2, \"0\");\n const year = new Date(startDate).getFullYear();\n\n if (\n !Array.isArray(transactionSelected) &&\n transactionSelected.measureTimeId !== timePeriod.measureTimeId\n ) {\n const dataPostMeteo = {\n meteoId: transactionSelected.maxHourlyMeteo?.meteoId,\n stationId: stationIdSelected.value,\n meteoTypeId: dataType.value,\n recordDate: `${year}-${month}-01T00:00:00`,\n measureTimeId: timePeriod.measureTimeId,\n };\n\n await dwrApi\n .post(`/Meteos`, dataPostMeteo)\n .then((res) => {\n console.log(\".post(`/Meteos\", res.data);\n mId = res.data.meteoId;\n })\n .catch((err) => {\n console.log(\"err Post Meteos\", err.message);\n });\n }\n\n const configPost = {\n headers: {\n \"X-Function-Header\": \"\",\n },\n };\n const configPut = {\n headers: {\n \"X-Function-Header\": \"\",\n },\n };\n\n const data = Object.keys(ev).map((e) => {\n const filterData = pureHourlyMeteo.filter(\n (data) => data.meteoDateTime == e\n )[0];\n\n return {\n meteoDateTime: e,\n // meteoHourly: +ev[e].value || null,\n meteoHourly: ev[e].value ? +ev[e].value : null,\n hourlyMeteoId: filterData ? +filterData.hourlyMeteoId : null,\n meteoId: mId ? +mId : filterData ? +filterData.meteoId : null,\n meteoTypeId: filterData ? +filterData.meteoTypeId : null,\n remark:\n \"remark\" in ev[e]\n ? ev[e].remark\n : filterData\n ? filterData.remark\n : null,\n typeRemark:\n \"typeRemark\" in ev[e]\n ? ev[e].typeRemark\n : filterData\n ? filterData.typeRemark\n : null,\n };\n });\n\n data.map((item) => {\n if (item.hourlyMeteoId) {\n editData.push(item);\n } else if (\n !item.hourlyMeteoId &&\n (item.meteoHourly !== null || item.typeRemark)\n ) {\n const list = {\n stationId: stationIdSelected.value,\n meteoDateTime: item.meteoDateTime,\n meteoTypeId: dataType.value,\n // meteoId: item.meteoId,\n meteoHourly: item.meteoHourly,\n typeRemarkId: item.typeRemark,\n remark: item.remark,\n };\n newData.push(list);\n }\n });\n\n console.log({ editData, newData });\n\n if (editData.length) {\n await dwrApi\n .put(`/HourlyMeteos`, editData)\n .then(() => {\n setIsLoading(false);\n\n addToast({`กราฟปริมาณ${\n dataType ? dataType.dataName : \"ระดับน้ำ\"\n }`}
\n {dataType && dataType.value == \"01\" ? (\n แก้ไขข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n setIsLoading(false);\n console.error(\"put HourlyMeteos\", err.response.status, err.message);\n });\n }\n\n if (newData.length) {\n dwrApi\n .post(\n `/HourlyMeteos/Station/${stationIdSelected.value}?MeteoTypeId=${dataType.value}&month=${month}&year=${year}`,\n newData\n )\n .then(() => {\n setIsLoading(false);\n addToast(เพิ่มข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n console.error(\"post HourlyMeteos\", err.response.status, err.message);\n\n setIsLoading(false);\n let message = \"กรุณาลองใหม่\";\n if (err.response && err.response.status == 401) {\n message = \"ไม่สามารถเพิ่มข้อมูลได้ กรุณาล็อกอิน\";\n } else if (err.response && err.response.status == 400) {\n message = \"ข้อมูลไม่ถูกต้อง\";\n }\n addToast({message}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n }\n };\n\n const onOpenModalConfirm = (ev) => {\n ev.preventDefault();\n setModalConfirmOpen(true);\n };\n\n const generateDayInMonth = () => {\n if (startDate && timePeriod && transactionSelected) {\n setNewTransactionSelected([]);\n for (let dayIndex = 0; dayIndex < +daysInMonth; dayIndex++) {\n const dateFilter = transactionSelected?.meteoSiteOuts?.filter(\n (item) => {\n return new Date(item.avgMeteo.meteoDate).getDate() == dayIndex + 1;\n }\n );\n\n const dataBlank = {\n avgMeteo: {\n meteoDate: new Date(yearSelected, monthSelected, dayIndex + 2)\n .toISOString()\n .slice(0, 19),\n dailyMeteo: \"\",\n },\n hourlyMeteo: [],\n };\n\n if (dateFilter && dateFilter.length) {\n setNewTransactionSelected((newTransactionSelected) => [\n ...newTransactionSelected,\n ...dateFilter,\n ]);\n } else {\n setNewTransactionSelected((newTransactionSelected) => [\n ...newTransactionSelected,\n dataBlank,\n ]);\n }\n }\n }\n };\n\n const generateDataTable = async () => {\n await setNewTransactionFullfill([]);\n\n if (newTransactionSelected) {\n newTransactionSelected.map((item) => {\n let dateElements = [];\n let remarkElements = [];\n\n for (let index = 0; index < +timePeriod.groupMeasure.length; index++) {\n const filterByDate = item.hourlyMeteo.filter((time) => {\n let tm = new Date(time.meteoDateTime).getHours();\n let pd = +timePeriod.groupMeasure[index].timePeriod.slice(0, -6);\n\n return tm === pd;\n });\n\n if (filterByDate.length) {\n dateElements.push(filterByDate[0]);\n if (filterByDate[0].remark) {\n remarkElements.push({\n time: filterByDate[0].meteoDateTime,\n remark: filterByDate[0].remark,\n });\n }\n } else {\n const data = {\n meteoHourly: null,\n meteoTypeId: null,\n meteoDateTime: `${convertDate2(item.avgMeteo.meteoDate)}T${\n timePeriod.groupMeasure[index].timePeriod\n }`,\n meteoId: null,\n hourlyMeteoId: null,\n remark: null,\n typeRemark: null,\n };\n\n dateElements.push(data);\n }\n }\n\n const dataObj = {\n avgMeteo: item.avgMeteo,\n hourlyMeteo: dateElements,\n remarkElements,\n };\n\n setNewTransactionFullfill((newTransactionFullfill) => [\n ...newTransactionFullfill,\n dataObj,\n ]);\n });\n }\n };\n\n useEffect(() => {\n generateDayInMonth();\n }, [transactionSelected, timePeriod]);\n\n useEffect(() => {\n if (newTransactionSelected) {\n generateDataTable();\n }\n }, [newTransactionSelected]);\n\n useEffect(() => {\n if (\n transactionSelected &&\n optionTimePeriod.length &&\n !measureTimeSeclected\n ) {\n const filterOptions = optionTimePeriod.filter(\n (option) => option.id == transactionSelected.measureTimeId\n );\n\n if (filterOptions.length) {\n setMeasureTimeSelected(filterOptions[0]);\n }\n }\n }, [transactionSelected]);\n\n const displayForm = (\n\n
\n );\n\n const onResetValues = async () => {\n if (newTransactionFullfill.length) {\n const getMeteoHrs = newTransactionFullfill\n .map((item) => item.hourlyMeteo)\n .flat()\n .filter((list) => list.meteoHourly);\n\n const meteoValue = getMeteoHrs.map((item) => {\n const objKey = `${item.meteoDateTime}`;\n return {\n [objKey]: {\n value:\n item.meteoHourly !== null\n ? convertDecimals(+item.meteoHourly)\n : null,\n },\n };\n });\n\n const defValues = await Object.assign({}, ...meteoValue);\n\n reset(defValues);\n }\n };\n\n useEffect(() => {\n onResetValues();\n }, [newTransactionFullfill]);\n\n const displayTable = (\n <>\n \n
\n \n
\n ประเภทข้อมูล
\n \n setDataType(ev)}\n noOptionsMessage={() => \"ไม่พบประเภทข้อมูล\"}\n />\n
\n \n
\n\n เดือน / ปี
\n \n
\n \n
\n\n กำหนดเวลา
\n \n setMeasureTimeSelected(ev)}\n value={measureTimeSeclected}\n noOptionsMessage={() => \"ไม่พบคาบเวลา\"}\n />\n
\n \n \n จัดการข้อมูล\n \n
\n \n ) : (\n \"\"\n )}\n \n
\n \n
\n | วันที่ | \n\n {dataType.value == \"01\"\n ? \"ปริมาณน้ำฝนที่อ่านได้ ( ม.ม.)\"\n : \"ปริมาณที่อ่านได้\"}\n | \n\n {dataType.value == \"01\" ? \"รวม ( ม.ม.)\" : \"ปริมาณ\"}\n | \nหมายเหตุ | \n
|---|---|---|---|
| \n {item.timePeriod.slice(0, -3)}\n | \n );\n })}\n|||
| {convertDate(item.avgMeteo.meteoDate)} | \n {item.hourlyMeteo.map((data, index) => {\n return (\n\n {total && dataQty ? (total / dataQty).toFixed(2) : \"\"}\n | \n\n | \n
\n \n \n บันทึก\n \n \n\n \n \n\n \n \n\n \n \n
\n \n );\n\n return (\n \n
\n );\n};\n\nexport default ManualStationMeteo;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ModalDeleteStation = ({ title, selectedDataId, setIsAction }) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"10px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n\n let subUrl = \"Stations\";\n dwrApi\n .delete(`/${subUrl}/${selectedDataId}`)\n .then((res) => {\n addToast(\n {displayForm}\n
\n\n {newTransactionSelected.length && transaction ? (\n <>\n \n \n ) : (\n \"\"\n )}\n\n ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsAction(true);\n setIsLoading(false);\n });\n };\n\n const displayButtonOpenModal = (\n\n
\n );\n\n const displayContent = (\n คุณต้องการลบ{title} ที่เลือกใช่หรือไม่
\n );\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n
\n \n \n \n \n );\n};\n\nexport default ModalDeleteStation;\n","import React from \"react\";\n\nconst CheckInput = ({ title, register, required, keyName }) => {\n const styles = {\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n },\n };\n\n return (\n \n
\n );\n};\n\nexport default CheckInput;\n","import React from \"react\";\n\nconst DateInput = ({ title, register, required, keyName }) => {\n const styles = {\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n return (\n \n
\n );\n};\n\nexport default DateInput;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm, useFieldArray, Controller } from \"react-hook-form\";\nimport TextInput from \"./TextInput\";\nimport DateInput from \"./DateInput\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport xlsxParser from \"xls-parser\";\nimport _ from \"lodash\";\nimport DatePicker from \"react-datepicker\";\nimport { FaCalendarAlt } from \"react-icons/fa\";\nimport CustomDatePicker from \"./CustomDatePicker\";\n\nconst ModalAddCrossSection = ({\n stationId,\n crossSectionData,\n setCrossSectionData,\n defaultValue,\n type,\n preview,\n}) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [inputTypeSelected, setInputTypeSelected] = useState(\"text\");\n\n const defaultValues = {\n surveyNo: defaultValue?.surveyNo,\n surveyDate:\n defaultValue && defaultValue.surveyDate\n ? new Date(defaultValue.surveyDate)\n : \"\",\n leftCrossSection: defaultValue?.leftCrossSection,\n rightCrossSection: defaultValue?.rightCrossSection,\n crossSectionInfo: defaultValue?.crossSectionInfo,\n };\n\n const {\n register: registerCs,\n reset: resetCs,\n handleSubmit: handleSubmitCs,\n setValue: setValueCs,\n formState: { errors: errorsCs },\n control: controlCs,\n watch: watchCs,\n } = useForm(defaultValue ? { defaultValues } : \"\");\n\n const { fields, append, prepend, remove, swap, move, insert, replace } =\n useFieldArray({\n control: controlCs,\n name: \"crossSectionInfo\",\n });\n\n const watchFile = watchCs(\"crosssection-file\");\n const watchIdentiify = watchCs(\"crosssection_detail\");\n\n useEffect(() => {\n if (defaultValues && modalIsOpen) {\n resetCs(defaultValues);\n }\n }, [modalIsOpen]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n inputInactive: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 10%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n color: \"gray\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"30px\",\n top: \"10px\",\n cursor: \"pointer\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n resetCs({\n surveyNo: null,\n surveyDate: null,\n leftCrossSection: null,\n rightCrossSection: null,\n crossSectionInfo: [],\n });\n setModalIsOpen(false);\n };\n\n const onSwitchInput = (ev) => {\n setInputTypeSelected(ev.target.value);\n // resetCs({\n // crossSectionInfo: [],\n // });\n\n // setValueCs(\"crossSectionInfo\", []);\n if (ev.target.value === \"text\") {\n setValueCs(\"crosssection-file\", \"\");\n } else if (ev.target.value === \"file\") {\n setValueCs(\"crosssection_detail\", \"\");\n }\n };\n\n const onHandleSunmit = async (ev) => {\n console.log(\"click\");\n const crossSectionInfo = await ev.crossSectionInfo?.map((item, index) => {\n return {\n orderNo: (index + 1).toString(),\n wideRiverX: +item.wideRiverX,\n heightY: +item.heightY,\n };\n });\n\n const data = {\n xId: _.uniqueId(\"x-\"),\n surveyNo: +ev.surveyNo,\n surveyDate: convertDate(ev.surveyDate),\n leftCrossSection: +ev.leftCrossSection,\n rightCrossSection: +ev.rightCrossSection,\n crossSectionInfo,\n };\n\n if (type == \"add\") {\n setCrossSectionData((crossSectionData) => [...crossSectionData, data]);\n } else if (type == \"edit\") {\n const replaceData = crossSectionData.map((item) => {\n return item.crossSectionId === defaultValue.crossSectionId\n ? data\n : item;\n });\n\n console.log({ replaceData, defaultValue, crossSectionData });\n\n setCrossSectionData(replaceData);\n }\n\n closeModal();\n };\n\n const onInsertXls = () => {\n // ev.preventDefault();\n // const file = ev.target.files[0];\n const file = watchFile[0];\n console.log({ file });\n\n if (file) {\n xlsxParser.onFileSelection(file).then(async (data) => {\n let result = data[Object.keys(data)[0]];\n console.log({ result });\n\n let toAdd =\n result.length > 1\n ? {\n leftCrossSection: result[0].heightY,\n rightCrossSection: result[result.length - 1].heightY,\n }\n : {};\n\n resetCs({\n ...toAdd,\n crossSectionInfo: result,\n });\n });\n }\n };\n\n const onHandleData = (ev) => {\n ev.preventDefault();\n\n if (inputTypeSelected === \"text\") {\n let crosssectionArr = [];\n\n for (let i = 0; i < watchIdentiify; i++) {\n const list = { wideRiverX: \"\", heightY: \"\" };\n crosssectionArr.push(list);\n }\n\n resetCs({\n crossSectionInfo: crosssectionArr,\n });\n } else if (inputTypeSelected === \"file\") {\n onInsertXls();\n }\n };\n\n const displayTable = (\n <>\n {title}
\n \n
\n | ลำดับ | \nความกว้างของท้องน้ำ (ม.) (X) | \nค่าระกับความสูง (ม.) (Y) | \nลบ | \n
|---|---|---|---|
| {index + 1} | \n\n\n | \n \n | \n\n \n | \n
\n {}}\n style={{ cursor: \"pointer\" }}\n >\n แก้ไข\n
\n )}\n \n \n {type == \"add\" ? (\n {}}\n style={preview ? { display: \"none\" } : { cursor: \"pointer\" }}\n >\n เพิ่มข้อมูล Cross section\n
\n ) : (\n \n
\n );\n};\n\nexport default SelectInput;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { Line } from \"react-chartjs-2\";\n\nconst ModalPreviewCrossSection = ({ crossSectionData }) => {\n const { crossSectionInfo } = crossSectionData;\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [chartData, setChartData] = useState();\n\n let subtitle;\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n minWidth: \"500px\",\n },\n };\n\n const openModal = () => {\n setIsModalOpen(true);\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n };\n\n const chartGenerate = async () => {\n const orderingCrossSectionInfo = [...crossSectionInfo]?.sort(\n (a, b) => +a.wideRiverX - +b.wideRiverX\n );\n\n const labels = orderingCrossSectionInfo?.map((item) => item.wideRiverX);\n const valueCrossSection = orderingCrossSectionInfo?.map(\n (item) => item.heightY\n );\n\n setChartData({\n labels: labels,\n datasets: [\n {\n label: \"ลำน้ำ\",\n data: valueCrossSection,\n type: \"line\",\n backgroundColor: \"rgba(\t149\t,68\t,13, 1)\",\n borderColor: \"rgba(\t149\t,68\t,13, 1)\",\n fill: \"start\",\n pointRadius: 2,\n tension: 0.1,\n },\n ],\n });\n };\n\n let options = {\n scales: {\n x: {\n ticks: {\n maxTicksLimit: 10,\n maxRotation: 90,\n minRotation: 90,\n },\n },\n },\n plugins: {\n zoom: {\n zoom: {\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: true,\n },\n mode: \"x\",\n },\n pan: {\n enabled: true,\n mode: \"xy\",\n speed: 1,\n threshold: 1,\n },\n },\n },\n };\n\n useEffect(() => {\n if (crossSectionInfo.length) chartGenerate();\n }, [crossSectionInfo]);\n\n return (\n {title}
\n \n \n \n {options &&\n options.length &&\n options.map((item, i) => {\n return (\n \n {item.label}\n \n );\n })}\n \n
\n \n \n
\n );\n};\n\nexport default ModalPreviewCrossSection;\n","import React from \"react\";\nimport Modal from \"react-modal\";\n\nconst ModalView = ({\n title,\n callBackSubmit,\n modalIsOpen,\n setModalIsOpen,\n\n children,\n}) => {\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"10px\",\n minWidth: \"400px\",\n },\n };\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const displayHeader = \n ดูภาพ\n
\n \n
\n พรีวิวข้อมูล
\n \n x\n
\n \n {chartData ? (\n
\n \n {title}
;\n\n return (\n ลบรูปภาพเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(ลบรูปภาพไม่สำเร็จ
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n };\n\n const downloadFile = (function () {\n const a = document.createElement(\"a\");\n document.body.appendChild(a);\n a.style = \"display: none\";\n return function (data, fileName) {\n a.href = data;\n a.download = fileName;\n a.click();\n };\n })();\n\n const onHandleDownload = async (stationId) => {\n setIsLoading(true);\n const b64 = await dwrApi\n .get(`/StationOnepages/${stationId}`, { responseType: \"blob\" })\n .then((res) => window.URL.createObjectURL(res.data))\n .then((url) => toDataURL(url))\n .then((data) => downloadFile(data, `stationId-${stationId}`))\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n });\n };\n\n const fetchLog = async () => {\n await dwrApi\n .get(`StationRemarks/Station/${query.stationId}`)\n .then((res) => {\n setStationRemark(res.data);\n })\n .catch((err) => {\n console.log(err);\n });\n };\n\n const fetchMapData = async () => {\n try {\n await dwrApi\n .get(`/MapDatas/${query.MapData.mapId}`)\n .then(async (res) => {\n console.log(\"map\", res);\n\n if (res.data.mapName && res.data.mapName !== \"null\") {\n setMapdata(res.data);\n setMapFilePreview(res.data.pathName);\n await fetch(res.data.pathName).then(async (el) => {\n const splitUrl = el.url.split(\"/\");\n const fileName = splitUrl[splitUrl.length - 1];\n\n const blob = await el.blob();\n const file = new File([blob], fileName);\n const fileList = await new FileListItems([file]);\n\n // setMapFilePreview(el.url);\n setValue(\"pathName\", fileList);\n });\n }\n })\n .catch((err) => {\n console.log(err);\n });\n } catch (err) {\n console.log(err);\n }\n };\n const fetchStationImages = async () => {\n await dwrApi\n .get(`/StationImages/Station/${query.stationId}`)\n .then(async (res) => {\n setStationImagesData(res.data);\n })\n .catch((err) => {\n console.log(err);\n });\n };\n\n useEffect(() => {\n if (query) {\n setTimeout(async () => {\n await fetchLog();\n await fetchStationImages();\n await fetchMapData();\n }, 2000);\n }\n }, [query]);\n\n useEffect(() => {\n if (query) {\n reset(preloadValue);\n setCrossSectionData(query.crossSection);\n }\n }, [query]);\n\n useEffect(() => {\n if (query) setValue(\"departmentId\", query?.departmentId);\n }, [query, optionsDepartment]);\n useEffect(() => {\n if (query)\n setValue(\"stationCenterId\", query?.StationCenter?.stationCenterId);\n }, [query, optionsStationCenters]);\n useEffect(() => {\n // console.warn('query', query?.subBasin?.basinId, optionBasin)\n if (query) {\n setValue(\"basin.basinId\", query?.subBasin?.basinId);\n }\n }, [query]);\n\n useEffect(() => {\n // console.warn('optionBasin', query?.subBasin, optionBasin)\n // if (optionBasin) {\n // setValue(\"basin.basinId\", query?.subBasin?.basinId);\n // }\n }, [optionBasin]);\n\n useEffect(() => {\n if (query) setValue(\"subBasin\", query?.subBasin?.subBasinId);\n }, [query, optionSubBasin]);\n useEffect(() => {\n if (query)\n setValue(\n \"province\",\n query?.location?.subDistrict?.district.province.provinceId\n );\n }, [query, optionProvince]);\n useEffect(() => {\n if (query)\n setValue(\"district\", query?.location?.subDistrict?.district.districtId);\n }, [query, optionDistrict]);\n useEffect(() => {\n if (query)\n setValue(\"subDistrict\", query?.location?.subDistrict?.subDistrictId);\n }, [query, optionSubDistrict]);\n\n const fetchDepartment = async () => {\n setOptionsDepartment([]);\n await dwrApi.get(\"/Departments\").then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.departmentId,\n label: `${item.departmentTh}`,\n };\n setOptionsDepartment((optionsDepartment) => [\n ...optionsDepartment,\n list,\n ]);\n });\n });\n };\n\n const fetchStationCenters = async () => {\n setOptionsStationCenters([]);\n await dwrApi.get(\"/StationCenters\").then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.stationCenterId,\n label: `${item.stationCenterName}`,\n };\n setOptionsStationCenters((optionsStationCenters) => [\n ...optionsStationCenters,\n list,\n ]);\n });\n });\n };\n\n const fetchBasin = async () => {\n await dwrApi.get(\"/Basins/User\").then((res) => {\n const list = res.data.map((item) => {\n return {\n value: item.basinId,\n label: `${item.basinTh}`,\n };\n });\n setOptionBasin(list);\n });\n };\n\n const fetchSubBasin = async () => {\n setOptionSubBasin([]);\n\n await dwrApi.get(`/SubBasins/Basin/${basinIdSelected}`).then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.subBasinId,\n label: `${item.subBasinTh}`,\n };\n setOptionSubBasin((optionSubBasin) => [...optionSubBasin, list]);\n });\n });\n };\n\n const fetchProvince = async () => {\n setOptionProvince([]);\n await dwrApi.get(`/Provinces`).then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.provinceId,\n label: `${item.provinceTh}`,\n };\n setOptionProvince((optionProvince) => [...optionProvince, list]);\n });\n });\n };\n const fetchDistrict = async () => {\n setOptionDistrict([]);\n await dwrApi\n .get(`/Districts/Province/${provinceIdSelected}`)\n .then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.districtId,\n label: `${item.districtTh}`,\n };\n setOptionDistrict((optionDistrict) => [...optionDistrict, list]);\n });\n });\n };\n\n const fetchSubDistrict = async () => {\n setOptionSubDistrict([]);\n await dwrApi\n .get(`/SubDistricts/District/${districtIdSelected}`)\n .then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.subDistrictId,\n label: `${item.subDistrictTh}`,\n };\n setOptionSubDistrict((optionSubDistrict) => [\n ...optionSubDistrict,\n list,\n ]);\n });\n });\n };\n\n const fetchHydroType = async () => {\n await dwrApi\n .get(`/HydroTypes/Active`)\n .then((res) => {\n setHydroTypes(res.data);\n })\n .catch((err) => {\n console.log(err);\n });\n };\n\n const fetchMeteoType = async () => {\n await dwrApi\n .get(`/MeteoTypes/Active`)\n .then((res) => {\n setMeteoTypes(res.data);\n })\n .catch((err) => {\n console.log(err);\n });\n };\n\n useEffect(async () => {\n await Promise.all([\n fetchDepartment(),\n fetchStationCenters(),\n fetchBasin(),\n fetchProvince(),\n fetchHydroType(),\n fetchMeteoType(),\n ]);\n }, []);\n\n useEffect(async () => {\n if (basinIdSelected) await fetchSubBasin();\n }, [basinIdSelected]);\n\n useEffect(async () => {\n if (provinceIdSelected) await fetchDistrict();\n }, [provinceIdSelected]);\n\n useEffect(async () => {\n if (districtIdSelected) await fetchSubDistrict();\n }, [districtIdSelected]);\n\n const gageFiledGenerator = () => {\n setGageFieldInput([]);\n let init = [];\n\n for (let index = 0; index < gageSelectedQty; index++) {\n if (\n preloadValue.gage &&\n preloadValue.gage.subGage &&\n preloadValue.gage.subGage.length &&\n index < preloadValue.gage.subGage.length\n ) {\n init.push(preloadValue.gage.subGage[index]);\n } else {\n init.push({\n gageId: preloadValue.gageId,\n gageNo: index + 1,\n totalSheet: 0,\n });\n }\n }\n setGageFieldInput(init);\n };\n\n const onHandleDeleteCrossSection = (item, index) => {\n const crossSectionFilter = crossSectionData.filter(\n (data, dataIndex) => dataIndex !== index\n );\n setCrossSectionData(crossSectionFilter);\n };\n\n useEffect(() => {\n // console.log({ gageFieldInput })\n }, [gageFieldInput]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n gageFiledGenerator();\n }, 1000);\n return () => clearTimeout(delayDebounceFn);\n }, [gageSelectedQty]);\n\n // const onHandleFormatLatLng = (ev) => {\n // const numInput = ev.target.value;\n\n // const pnum = numInput?.toString().match(/\\d/g)?.join(\"\");\n\n // const pureNum = pnum?.split(\".\")[0].replace(/\\,/g, \"\");\n // // return pureNum?.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n\n // const one = pureNum?.toString().slice(0, 2);\n // const two = pureNum?.toString().slice(2, 4);\n // const three = pureNum?.toString().slice(4, 6);\n\n // const format = `${one}° ${two}' ${three}\" N`;\n\n // console.log(format);\n\n // return format;\n // };\n\n // console.log({ latitudeDms: watch(\"latitudeDms\") });\n\n const displayAddEditStationDetail = (\n <>\n\n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n ประเภทสถานี :
\n \n
\n \n
\n \n setValue(\"stationType\", \"01\")}\n value=\"01\"\n id=\"manualStation\"\n autoComplete=\"off\"\n />\n \n ธรรมดา\n \n
\n \n setValue(\"stationType\", \"02\")}\n value=\"02\"\n id=\"autoStation\"\n autoComplete=\"off\"\n />\n \n อัตโนมัติ\n \n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n \n
\n แสดงบนแผนที่ :
\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n {/*
\n \n
\n เส้นรุ้ง (Latitude) :
\n \n
\n \n {/*
\n \n
\n เส้นแวง (longitude) :
\n \n
\n \n
\n\n \n {/*
\n \n \n
\n กำหนดรัศมีเก็บข้อมูล :
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n
\n ศูนย์เป็นผู้สำรวจ :
\n \n
\n \n \n setValue(\"bmCreateByCenter\", !watch(\"bmCreateByCenter\"))\n }\n {...register(\"bmCreateByCenter\")}\n />\n\n \n
\n \n
\n \n
\n\n \n
\n\n \n
\n ค่าศูนย์เสาระดับ :
\n \n
\n \n
\n \n
\n \n setValue(\"gage.gageTypeId\", 1)}\n {...register(\"gage.gageTypeId\")}\n />\n \n
\n \n setValue(\"gage.gageTypeId\", 2)}\n {...register(\"gage.gageTypeId\")}\n />\n \n
\n\n {/* {preloadValue.gage.gageTypeId === 1 ?\n \n
: \n
\n }\n {preloadValue.gage.gageTypeId === 2 ?\n \n
: \n
\n } */}\n \n
\n \n
\n เสาระดับทั้งหมด :
\n \n {/*
\n \n {gageFieldInput.map((item, i) => {\n return (\n
\n\n \n
\n );\n })}\n \n
\n เสาต้นที่ {i + 1} :
\n \n
\n \n
\n\n \n
\n \n
\n ศูนย์เป็นผู้สำรวจ :
\n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n \n
\n\n \n
\n \n
\n ศูนย์เป็นผู้สำรวจ :
\n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n \n
\n\n \n
\n \n \n
\n \n
\n \n \n
\n\n \n
\n \n \n
\n \n );\n\n const displayGhSurveyChild = (\n <>\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n );\n\n const displayDcSurveyChild = (\n <>\n \n
\n \n
\n \n
\n \n );\n\n const displayWqSurveyChild = (\n <>\n \n
\n \n
\n \n
\n \n );\n\n const displayDataHydroStation = (\n <>\n {hydroTypes\n ?.filter(\n (data) =>\n data.active === \"Y\" &&\n (data.hydroTypeId == \"01\" ||\n data.hydroTypeId == \"02\" ||\n data.hydroTypeId == \"03\")\n )\n ?.map((item, i) => {\n let kName;\n let child = <>;\n\n if (item.hydroTypeId == \"01\") {\n kName = \"ghsurvey\";\n child = displayGhSurveyChild;\n } else if (item.hydroTypeId == \"02\") {\n kName = \"dcsurvey\";\n child = displayDcSurveyChild;\n } else if (item.hydroTypeId == \"03\") {\n kName = \"wqsurvey\";\n child = displayWqSurveyChild;\n }\n\n return (\n <>\n \n
\n \n
\n \n
\n {watch(kName) ? child : \"\"}\n \n );\n })}\n \n );\n\n const displayDataMeteoStation = (\n <>\n \n
\n\n \n
\n \n
\n \n
\n \n );\n\n const displayCrossSection = (\n \n
\n \n \n {meteoTypes\n ?.filter((data) => data.active === \"Y\")\n .map((item, i) => {\n const getkeyName = meteoTypeList.find(\n (list) => list.meteoTypeId == item.meteoTypeId\n );\n\n if (getkeyName) {\n return (\n
\n \n
\n );\n }\n })}\n \n
\n );\n })}\n \n \n );\n\n const displayLocation = (\n \n Cross section ของลำน้ำ\n
\n \n {crossSectionData.map((item, index) => {\n return (\n \n
\n \n การสำรวจครั้งที่ {item.surveyNo} เมื่อวันที่{\" \"}\n {convertDate(item.surveyDate)}\n
\n \n {\n setItemSelected({\n item,\n index,\n });\n setShowModalDeleteXsection(true);\n }}\n >\n ลบ\n
\n \n
\n \n
\n \n
\n );\n\n const displayButtonGroup = (\n \n แผนที่ ที่ตั้งของสถานีโดยสังเขป\n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n ไฟล์ภาพแผนที่ :
\n \n
\n \n {type !== \"preview\" && (\n {\n setMapFilePreview(null);\n setValue(\"pathName\", null);\n\n addToast( {\n setOpenModalMapImg(true);\n setIndexImgSelected(0);\n }}\n />\n
\n )}\n {openModalMapImg && (\n ลบรูปภาพเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n }}\n >\n\n
\n \n
\n ไฟล์รูปสถานี :
\n \n
\n \n {!!stationImagesData?.length &&\n stationImagesData.map((img, imgIndex) => {\n return (\n
\n\n {openModalImage && (\n \n {type !== \"preview\" && (\n {\n onHandleDeleteStationImage(img.stationImageId);\n\n const stationImgArr = [\n ...stationImagesData,\n ].filter(\n (el) => el.stationImageId !== img.stationImageId\n );\n\n setStationImagesData(stationImgArr);\n }}\n >\n {\n setOpenModalImage(true);\n setIndexImgSelected(imgIndex);\n }}\n />\n
\n );\n })}\n {!!newStationImagesData?.length &&\n newStationImagesData.map((img, imgIndex) => {\n return (\n \n {type !== \"preview\" && (\n {\n const stationImgArr = [\n ...newStationImagesData,\n ].filter(\n (el) => el.stationImageId !== img.stationImageId\n );\n\n // console.log({ stationImgArr });\n\n const newFiles = new FileListItems(\n stationImgArr.map((el) => el.file)\n );\n\n setValue(\"stationImagePath\", newFiles);\n\n setNewStationImagesData(stationImgArr);\n }}\n >\n {\n setOpenModalImage(true);\n setIndexImgSelected(imgIndex);\n }}\n />\n
\n );\n })}\n \n {type == \"edit\" ? (\n reset(preloadValue)}\n >\n คืนค่าเดิม\n
\n ) : (\n \"\"\n )}\n \n \n
\n \n \n
\n \n \n
\n ประเภทข้อมูลอุทกวิทยา
\n \n
\n {displayDataHydroStation}
\n \n
\n \n \n
\n ประเภทข้อมูลอุตุนิยมวิทยา
\n \n
\n {displayDataMeteoStation}
\n \n \n \n );\n\n const displayRemark = (\n \n
\n );\n const displayLog = (\n \n หมายเหตุ\n
\n\n \n
\n \n
\n \n
\n );\n\n return (\n \n ประวัติหมายเหตุ\n
\n\n \n \n \n
\n
\n | วันที่แก้ไข | \nแก้ไขโดย | \nหมายเหตุ | \n
|---|---|---|
| {convertDateTime(el.remarkDate)} | \n{el.remarkUser} | \n{el.remark} | \n
\n {isLoading ? {\n onHandleDeleteCrossSection(itemSelected.item, itemSelected.index);\n setShowModalDeleteXsection(false);\n }}\n modalIsOpen={showModalDeleteXsection}\n setModalIsOpen={setShowModalDeleteXsection}\n />\n
\n );\n};\n\nexport default FormStationDetail;\n","import React, { useEffect, useState } from \"react\";\n\nimport { useForm } from \"react-hook-form\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport { Redirect, useLocation, useParams } from \"react-router\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport FormStationDetail from \"../../../Components/FormStationDetail\";\nimport TitleText from \"../../../Components/TitleText\";\nimport { FaChevronDown, FaChevronUp, FaChevronLeft } from \"react-icons/fa\";\nimport { useHistory } from \"react-router-dom\";\n\nconst EditStation = () => {\n let { stationId } = useParams();\n const [stationDetail, setStationDetail] = useState(\"\");\n const { query } = useLocation();\n const { addToast } = useToasts();\n const history = useHistory();\n const [stationImagesData, setStationImagesData] = useState([]);\n\n const [isLoading, setIsLoading] = useState(false);\n const [inputData, setInputData] = useState(\"\");\n const [crossSectionData, setCrossSectionData] = useState([]);\n const [configDatas, setConfigDatas] = useState({});\n\n const [dataBenchmarks, setDataBenchmarks] = useState(\"\");\n const [dataGage, setDataGage] = useState(\"\");\n const [dataBasinArea, setDataBasinArea] = useState(\"\");\n const [dataStation, setDataStation] = useState(\"\");\n const [responseMeteoType, setResponseMeteoType] = useState(\"\");\n const [responseHydroType, setResponseHydroType] = useState(\"\");\n const [locationId, setLocationId] = useState(null);\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const fetchConfigDataStations = async (stationId) => {\n if (stationId) {\n try {\n let resConfig = await dwrApi.get(\n `/ConfigDataStations/Station/${stationId}`\n );\n setConfigDatas(resConfig.data);\n\n // const { active, measureTimeId, configDataId, meteotypeId, hydroTypeId } = resConfig.data;\n // setConfigDatas({ active, measureTimeId, configDataId, meteotypeId, hydroTypeId });\n } catch (err) {\n console.error(err);\n }\n }\n };\n\n const fetchStationDetail = async (sId) => {\n try {\n let res = await dwrApi.get(`/Stations/${sId}?Publish=all`);\n setStationDetail(res.data);\n console.log(\"stationDetail\", res.data);\n setCrossSectionData(res.data.crossSection);\n return res.data.stationId;\n } catch (err) {\n console.error(err.message);\n }\n };\n\n useEffect(async () => {\n if (stationId) {\n let sId = await fetchStationDetail(stationId);\n await fetchConfigDataStations(sId);\n }\n // console.log(\"stationDetail\", stationDetail);\n }, [stationId]);\n\n // useEffect(() => {\n // // console.log({ crossSectionData })\n // }, [crossSectionData])\n\n const filterMeteo = (meteotypeId) => {\n const filterResult = stationDetail?.configDataStation?.filter(\n (item) => item.meteotypeId == meteotypeId\n );\n\n return filterResult && filterResult.length ? true : false;\n };\n\n const subgagePreload = stationDetail?.gage?.subGage?.map((item) => {\n return { ...item };\n });\n\n const onHandlePureNumber = (numInput, index) => {\n if (numInput) {\n const splittedDeg = numInput.split(\"°\");\n const splittedSingleQuote = splittedDeg[1]?.split(\"'\");\n const splittedDoubleQuote = splittedSingleQuote[1]?.split('\"');\n\n switch (index) {\n case 0:\n return splittedDeg[0]?.toString().match(/\\d/g)?.join(\"\");\n case 1:\n return splittedSingleQuote[0]?.toString().match(/\\d/g)?.join(\"\");\n case 2:\n return splittedDoubleQuote[0]?.toString().match(/\\d/g)?.join(\"\");\n\n default:\n return \"\";\n }\n }\n return \"\";\n };\n\n const preloadValue = {\n BetweenMainRoad: stationDetail?.MapData?.betweenMainRoad,\n FarMainRoad: stationDetail?.MapData?.farMainRoad,\n RoadNo: stationDetail?.MapData?.roadNo,\n basinId: stationDetail?.subBasin ? stationDetail?.subBasin?.basinId : null,\n basinArea: {\n ...stationDetail?.basinArea,\n measureDate: stationDetail?.basinArea?.measureDate\n ? convertDate(stationDetail?.basinArea?.measureDate)\n : null,\n measureByCenter:\n stationDetail?.basinArea?.measureByCenter == \"0\" ? false : true,\n },\n benchmark: {\n createByCenter: stationDetail?.bm?.createByCenter === \"0\" ? false : true,\n bmLevel: stationDetail?.bm?.bmlevel,\n nearbyPlace: stationDetail?.bm?.nearbyPlace,\n bmcreateDate: stationDetail?.bm?.bmcreateDate\n ? convertDate(stationDetail?.bm?.bmcreateDate)\n : null,\n },\n bmCreateByCenter: stationDetail?.bm?.createByCenter === \"0\" ? false : true,\n bmcreateDate: stationDetail?.bm?.bmcreateDate\n ? convertDate(stationDetail?.bm?.bmcreateDate)\n : null,\n\n bubbleCdate: stationDetail?.hydroSurvey?.bubbleCdate\n ? convertDate(stationDetail?.hydroSurvey?.bubbleCdate)\n : null,\n bubbleIdate: stationDetail?.hydroSurvey?.bubbleIdate\n ? convertDate(stationDetail?.hydroSurvey?.bubbleIdate)\n : null,\n buildingDate: stationDetail?.buildingDate\n ? convertDate(stationDetail?.buildingDate)\n : null,\n controllerName: stationDetail?.controllerName,\n dcsurvey: stationDetail?.hydroSurvey?.dcsurvey,\n floatCdate: stationDetail?.hydroSurvey?.floatCdate\n ? convertDate(stationDetail?.hydroSurvey?.floatCdate)\n : null,\n floatIdate: stationDetail?.hydroSurvey?.floatIdate\n ? convertDate(stationDetail?.hydroSurvey?.floatIdate)\n : null,\n gage: {\n gageAmount: stationDetail?.gage?.gageAmount,\n gageLevel: stationDetail?.gage?.gageLevel,\n gageTypeId: stationDetail?.gage?.gageTypeId,\n gageSurveyDate: stationDetail?.gage?.gageSurveyDate\n ? convertDate(stationDetail?.gage?.gageSurveyDate)\n : null,\n\n subGage: subgagePreload,\n surveyByCenter: stationDetail?.gage?.surveyByCenter == \"1\" ? true : false,\n },\n gageSurveyDate: stationDetail?.gage?.gageSurveyDate\n ? convertDate(stationDetail?.gage?.gageSurveyDate)\n : null,\n\n latitudeDms: [\n onHandlePureNumber(stationDetail?.location?.latitudeDms, 0),\n onHandlePureNumber(stationDetail?.location?.latitudeDms, 1),\n onHandlePureNumber(stationDetail?.location?.latitudeDms, 2),\n ],\n longitudeDms: [\n onHandlePureNumber(stationDetail?.location?.longitudeDms, 0),\n onHandlePureNumber(stationDetail?.location?.longitudeDms, 1),\n onHandlePureNumber(stationDetail?.location?.longitudeDms, 2),\n ],\n\n meteo_Temp: filterMeteo(\"04\"),\n meteo_evaporate: filterMeteo(\"02\"),\n meteo_humidity: filterMeteo(\"09\"),\n meteo_maxTemp: filterMeteo(\"06\"),\n meteo_minTemp: filterMeteo(\"08\"),\n meteo_rain: filterMeteo(\"01\"),\n meteo_sunlight_intensity: filterMeteo(\"13\"),\n meteo_sunlight_period: filterMeteo(\"12\"),\n meteo_waterTemp: filterMeteo(\"03\"),\n meteo_wind: filterMeteo(\"11\"),\n nearbyPlace: stationDetail?.location?.nearbyPlace,\n pathName: null,\n personName: stationDetail?.personName,\n\n publish: stationDetail?.publish == \"Y\" ? true : false,\n radius: stationDetail?.location?.radius,\n ratioMap: stationDetail?.ratioMap,\n sheetNo: stationDetail?.sheetNo,\n staffCdate: stationDetail?.hydroSurvey?.staffCdate\n ? convertDate(stationDetail?.hydroSurvey?.staffCdate)\n : null,\n staffIdate: stationDetail?.hydroSurvey?.staffIdate\n ? convertDate(stationDetail?.hydroSurvey?.staffIdate)\n : null,\n stationEn: stationDetail?.stationEn,\n stationImagePath: null,\n stationTh: stationDetail?.stationTh,\n stationType: stationDetail?.stationTypeId == 1 ? \"01\" : \"02\",\n stationlabel: stationDetail?.stationLabel,\n subDistrict: stationDetail?.location\n ? stationDetail.location.subDistrictId\n : null,\n tel: stationDetail?.tel,\n village: stationDetail?.location?.village,\n waterCdate: stationDetail?.hydroSurvey?.waterCdate\n ? convertDate(stationDetail?.hydroSurvey?.waterCdate)\n : null,\n waterSdate: stationDetail?.hydroSurvey?.waterSdate\n ? convertDate(stationDetail?.hydroSurvey?.waterSdate)\n : null,\n ghsurvey: stationDetail?.hydroSurvey?.ghsurvey,\n hydroCreateDate: stationDetail?.hydroCreateDate\n ? convertDate(stationDetail?.hydroCreateDate)\n : null,\n wqsurvey: stationDetail?.hydroSurvey?.wqsurvey,\n wqcdate: !!stationDetail?.hydroSurvey?.wqcdate\n ? convertDate(stationDetail?.hydroSurvey?.wqcdate)\n : null,\n wqsdate: !!stationDetail?.hydroSurvey?.wqsdate\n ? convertDate(stationDetail?.hydroSurvey?.wqsdate)\n : null,\n meteoSurvey: stationDetail?.MeteoSurvey,\n meteoSdate: !!stationDetail?.MeteoSurvey?.meteoSdate\n ? convertDate(stationDetail?.MeteoSurvey?.meteoSdate)\n : null,\n meteoCdate: !!stationDetail?.MeteoSurvey?.meteoCdate\n ? convertDate(stationDetail?.MeteoSurvey?.meteoCdate)\n : null,\n meteoCreateDate: stationDetail?.meteoCreateDate\n ? convertDate(stationDetail?.meteoCreateDate)\n : null,\n remark: \"\",\n // remark: !!stationDetail?.stationRemark\n // ? stationDetail?.stationRemark[stationDetail?.stationRemark.length - 1]\n // ?.remark\n // : \"\",\n stationRemarkId: !!stationDetail?.stationRemark\n ? stationDetail?.stationRemark[stationDetail?.stationRemark.length - 1]\n ?.stationRemarkId\n : null,\n stationRemark: stationDetail?.stationRemark,\n };\n\n const { register, handleSubmit, watch, setValue, reset } = useForm();\n\n const onSubmitStationDetail = async (ev) => {\n // console.warn({ onSubmitStationDetail: ev });\n\n let payload = {\n stationId: stationDetail?.stationId,\n stationLabel: ev.stationlabel,\n stationEn: ev.stationEn,\n stationTh: ev.stationTh,\n locationId: ev.locationId || stationDetail?.locationId,\n stationCenterId: +ev.stationCenterId,\n subBasinId: ev.subBasin,\n ratioMap: ev.ratioMap,\n sheetNo: ev.sheetNo,\n buildingDate: ev.buildingDate,\n controllerName: ev.controllerName,\n meteoCreateDate: !!ev.meteoCreateDate ? ev.meteoCreateDate : null,\n hydroCreateDate: !!ev.hydroCreateDate ? ev.hydroCreateDate : null,\n stationTypeId: +ev.stationType,\n departmentId: ev.departmentId,\n solarConstant: stationDetail?.solarConstant,\n forecastGageHeight: stationDetail?.forecastGageHeight,\n travelDistanceWater: stationDetail?.travelDistanceWater,\n calculatDischarge: stationDetail?.calculatDischarge,\n hydroSurveyId: ev.hydroSurveyId || stationDetail?.hydroSurveyId,\n meteoSurveyId: ev.meteoSurveyId || stationDetail?.meteoSurveyId,\n bmid: ev.bmid || stationDetail?.bmid,\n basinAreaId: ev.basinAreaId,\n gageId: ev.gageId || stationDetail?.gageId,\n mapId: ev.mapId || stationDetail?.mapId,\n publish: ev.publish === true ? \"Y\" : \"N\",\n active: \"Y\",\n regionId: stationDetail?.regionId,\n personName: ev.personName,\n tel: ev.tel,\n remark: ev.remark,\n };\n\n try {\n let res = await dwrApi.put(\n `/Stations/${stationDetail?.stationId}`,\n payload\n );\n console.log(\"upload station Done\", res.data);\n setDataStation(res.data);\n return stationDetail?.stationId;\n } catch (err) {\n console.error(err);\n }\n };\n\n const onSubmitBenchmarks = async (ev) => {\n // console.log({ onSubmitBenchmarks: ev });\n const dataBenchmarks = {\n bmlevel: +ev.benchmark.bmLevel,\n nearbyPlace: ev.benchmark.nearbyPlace,\n bmcreateDate: !!ev.bmcreateDate ? ev.bmcreateDate : null,\n createByCenter: ev.bmCreateByCenter ? \"1\" : \"0\",\n };\n\n if (stationDetail && stationDetail.bmid) {\n let resBm = await dwrApi\n .put(`/Benchmarks/${stationDetail.bmid}`, {\n ...dataBenchmarks,\n bmid: stationDetail.bmid,\n })\n .then((res) => {\n console.log(\"upload Benchmarks Done\", res.data);\n setDataBenchmarks(res.data);\n return { bmid: stationDetail.bmid };\n })\n .catch((err) => {\n console.log(\"can not upload Benchmarks\", err.message);\n });\n\n return resBm.bmid;\n } else {\n let resBm = await dwrApi\n .post(`/Benchmarks`, dataBenchmarks)\n .then((res) => {\n console.log(\"upload Benchmarks Done\", res.data);\n setDataBenchmarks(res.data);\n return res.data;\n })\n .catch((err) => {\n console.log(\"can not upload Benchmarks\", err.message);\n });\n\n return resBm.bmid;\n }\n };\n\n const onSubmitLocation = async (ev) => {\n console.log({ ev });\n const dataLocation = {\n latitudeDms: `${ev.latitudeDms[0]}° ${ev.latitudeDms[1]}' ${ev.latitudeDms[2]}\" N`,\n longitudeDms: `${ev.longitudeDms[0]}° ${ev.longitudeDms[1]}' ${ev.longitudeDms[2]}\" E`,\n village: ev.village,\n nearbyPlace: ev.nearbyPlace,\n subDistrictId: ev.subDistrict,\n radius: +ev.radius,\n };\n\n if (stationDetail && stationDetail.locationId) {\n let resLocation = await dwrApi\n .put(`/Locations/${stationDetail?.locationId}`, {\n ...dataLocation,\n locationId: stationDetail?.locationId,\n })\n .then((res) => {\n console.log(\"put location Done\", res.data);\n })\n .catch((err) => {\n console.log(\"can not put location\", err.message);\n })\n .finally(() => {});\n\n return resLocation?.locationId;\n } else {\n let resLocation = await dwrApi\n .post(`/Locations/Station/${stationDetail?.stationId}`, dataLocation)\n .then((res) => {\n console.log(\"post location Done\", res.data);\n if (res.data && res.data.locationId) {\n // setLocationId(res.data.locationId);\n return res.data;\n }\n })\n .catch((err) => {\n console.log(\"can not put location\", err.message);\n })\n .finally(() => {});\n\n if (!!resLocation) {\n return resLocation.locationId;\n }\n }\n };\n\n const onSubmitGage = async (ev) => {\n const payload = {\n gageLevel: +ev.gage.gageLevel,\n gageTypeId: !!ev.gage.gageTypeId ? +ev.gage.gageTypeId : null,\n gageAmount: !!ev.gage.gageAmount ? +ev.gage.gageAmount : null,\n surveyByCenter: ev.gage.surveyByCenter ? \"1\" : \"0\",\n gageSurveyDate: !!ev.gageSurveyDate ? ev.gageSurveyDate : null,\n };\n\n console.log({ stationDetail });\n\n if (stationDetail && stationDetail.gageId) {\n try {\n let res = await dwrApi.put(`/Gages/${stationDetail?.gageId}`, {\n ...payload,\n gageId: stationDetail?.gageId,\n });\n // setDataGage(res.data);\n await onSubmitSubGage(res.data, ev);\n return stationDetail.gageId;\n } catch (err) {\n console.error(\"can not upload Gage\", err.message);\n }\n } else {\n try {\n let res = await dwrApi.post(`/Gages`, payload);\n setDataGage(res.data);\n await onSubmitSubGage(res.data, ev);\n console.log(\"post gage\", res);\n return res.data.gageId;\n } catch (err) {\n console.error(\"can not upload Gage\", err.message);\n }\n }\n };\n\n const onSubmitSubGage = async (gageRes, ev) => {\n console.log(\"onSubmitSubGage\", { gageRes, ev });\n let gageAmount = !!ev.gage.gageAmount ? +ev.gage.gageAmount : 0;\n\n let payload = [];\n ev.gage.subGage.map((sub, i) => {\n if (i < gageAmount) {\n payload.push({\n gageId: gageRes?.gageId || stationDetail?.gageId,\n gageNo: i + 1,\n totalSheet: !!sub.totalSheet ? +sub.totalSheet : 0,\n });\n }\n });\n dwrApi\n .post(`/SubGages`, payload)\n .then((res) => {\n console.warn(\"upload SubGages Done\", res.data);\n })\n .catch((err) => {\n console.error(\"can not upload SubGages\", err.message);\n });\n };\n\n const onSubmitBasinArea = async (ev) => {\n const payload = {\n basinArea: !isNaN(ev.basinArea.BasinArea)\n ? +ev.basinArea.BasinArea\n : null,\n measureDate: !!ev.basinArea.measureDate ? ev.basinArea.measureDate : null,\n measureByCenter: ev.basinArea.measureByCenter ? \"1\" : \"0\",\n };\n\n if (stationDetail && stationDetail.basinAreaId) {\n try {\n let res = await dwrApi.put(\n `/BasinAreas/${stationDetail?.basinAreaId}`,\n {\n ...payload,\n basinAreaId: stationDetail?.basinAreaId,\n }\n );\n\n console.log(\"SubmitBasinArea Done\", res.data);\n setDataBasinArea(res.data);\n return stationDetail?.basinAreaId;\n } catch (err) {\n console.error(\"SubmitBasinArea FAILED\", err.message);\n }\n } else {\n try {\n let res = await dwrApi.post(`/BasinAreas`, payload);\n setDataBasinArea(res.data);\n console.log(\"SubmitBasinArea Done\", res.data);\n return res.data.basinAreaId;\n } catch (err) {\n console.error(\"SubmitBasinArea FAILED\", err.message);\n }\n }\n };\n\n const fetchHydroSurvey = async (ev) => {\n const data = {\n ghsurvey: ev.ghsurvey,\n staffIdate: ev.staffIdate,\n staffCdate: ev.staffCdate,\n floatIdate: ev.floatIdate,\n floatCdate: ev.floatCdate,\n bubbleIdate: ev.bubbleIdate,\n bubbleCdate: ev.bubbleCdate,\n\n dcsurvey: ev.dcsurvey,\n waterSdate: ev.waterSdate,\n waterCdate: ev.waterCdate,\n\n wqsurvey: ev.wqsurvey,\n wqsdate: ev.wqsdate,\n wqcdate: ev.wqcdate,\n };\n if (stationDetail && stationDetail?.hydroSurveyId) {\n try {\n let res = await dwrApi.put(\n `/HydroSurveys/${stationDetail?.hydroSurveyId}`,\n {\n ...data,\n hydroSurveyId: stationDetail?.hydroSurveyId,\n }\n );\n setResponseHydroType(res.data);\n return stationDetail?.hydroSurveyId;\n } catch (err) {\n console.error(err.message);\n }\n } else {\n try {\n let res = await dwrApi.post(`/HydroSurveys`, data);\n\n setResponseHydroType(res.data);\n return res.data.hydroSurveyId;\n } catch (err) {\n console.error(err.message);\n }\n }\n };\n\n const fetchMeteoSurvey = async (ev) => {\n const data = {\n meteoSdate: !!ev.meteoSdate ? ev.meteoSdate : null,\n meteoCdate: !!ev.meteoCdate ? ev.meteoCdate : null,\n basicRainSurvey: ev.meteoSurvey.basicRainSurvey,\n panEvaSurvey: ev.meteoSurvey.panEvaSurvey,\n tempWaterSurvey: ev.meteoSurvey.tempWaterSurvey,\n tempAirSurvey: ev.meteoSurvey.tempAirSurvey,\n tempMaxSurvey: ev.meteoSurvey.tempMaxSurvey,\n tempMinSurvey: ev.meteoSurvey.tempMinSurvey,\n dwhumiSurvey: ev.meteoSurvey.dwhumiSurvey,\n airgMachSurvey: ev.meteoSurvey.airgMachSurvey,\n solarMachSurvey: ev.meteoSurvey.solarMachSurvey,\n sunsMachSurvey: ev.meteoSurvey.sunsMachSurvey,\n };\n\n if (stationDetail?.meteoSurveyId) {\n try {\n let res = await dwrApi.put(\n `/MeteoSurveys/${stationDetail?.meteoSurveyId}`,\n {\n ...data,\n meteoSurveyId: stationDetail?.meteoSurveyId,\n }\n );\n\n return stationDetail?.meteoSurveyId;\n } catch (err) {\n console.error(err);\n }\n } else {\n try {\n let res = await dwrApi.post(`/MeteoSurveys`, data);\n setResponseMeteoType(res.data);\n return res.data.meteoSurveyId;\n } catch (err) {\n console.error(err);\n }\n }\n };\n\n const onSubmitConfigDataStation = async (stationId, ev) => {\n try {\n if (stationDetail?.stationId) {\n if (stationDetail?.configDataStation) {\n const existHydroTypeIds = [];\n const existMeteoTypeIds = [];\n\n stationDetail.configDataStation.map(async (item) => {\n const putHydroConfigData = async (item, isActive) => {\n existHydroTypeIds.push(item.hydroTypeId);\n if (item.active === \"Y\") {\n await dwrApi.put(\n `/ConfigDataStations/${item.configDataId}${\n !isActive ? \"/UnActive\" : \"\"\n }`,\n {\n stationId: stationId,\n configDataId: item.configDataId,\n hydroTypeId: item.hydroTypeId,\n }\n );\n } else if (isActive) {\n await dwrApi.put(`/ConfigDataStations/${item.configDataId}`, {\n stationId: stationId,\n configDataId: item.configDataId,\n hydroTypeId: item.hydroTypeId,\n });\n }\n };\n\n switch (item.hydroTypeId) {\n case \"01\":\n await putHydroConfigData(item, ev.ghsurvey);\n break;\n case \"02\":\n await putHydroConfigData(item, ev.dcsurvey);\n break;\n case \"03\":\n await putHydroConfigData(item, ev.wqsurvey);\n break;\n default:\n break;\n }\n\n const putMeteoConfigData = async (item, isActive) => {\n existMeteoTypeIds.push(item.meteotypeId);\n if (item.active === \"Y\") {\n await dwrApi.put(\n `/ConfigDataStations/${item.configDataId}${\n !isActive ? \"/UnActive\" : \"\"\n }`,\n {\n stationId: stationId,\n configDataId: item.configDataId,\n meteotypeId: item.meteotypeId,\n }\n );\n } else if (isActive) {\n await dwrApi.put(`/ConfigDataStations/${item.configDataId}`, {\n stationId: stationId,\n configDataId: item.configDataId,\n meteotypeId: item.meteotypeId,\n });\n }\n };\n\n switch (true) {\n case item.meteotypeId == \"01\":\n await putMeteoConfigData(item, ev.meteoSurvey.basicRainSurvey);\n break;\n case item.meteotypeId == \"02\":\n await putMeteoConfigData(item, ev.meteoSurvey.panEvaSurvey);\n break;\n case item.meteotypeId == \"03\":\n await putMeteoConfigData(item, ev.meteoSurvey.tempWaterSurvey);\n break;\n case item.meteotypeId == \"04\":\n await putMeteoConfigData(item, ev.meteoSurvey.tempAirSurvey);\n break;\n case item.meteotypeId == \"06\":\n await putMeteoConfigData(item, ev.meteoSurvey.tempMaxSurvey);\n break;\n case item.meteotypeId == \"08\":\n await putMeteoConfigData(item, ev.meteoSurvey.tempMinSurvey);\n break;\n case item.meteotypeId == \"09\":\n await putMeteoConfigData(item, ev.meteoSurvey.dwhumiSurvey);\n break;\n case item.meteotypeId == \"11\":\n await putMeteoConfigData(item, ev.meteoSurvey.airgMachSurvey);\n break;\n case item.meteotypeId == \"12\":\n await putMeteoConfigData(item, ev.meteoSurvey.solarMachSurvey);\n break;\n case item.meteotypeId == \"13\":\n await putMeteoConfigData(item, ev.meteoSurvey.sunsMachSurvey);\n break;\n default:\n break;\n }\n });\n\n let hydroTypeIds = [\"01\", \"02\", \"03\"];\n let hydroPostItems = hydroTypeIds.filter(\n (x) => !existHydroTypeIds.includes(x)\n );\n console.log({ hydroPostItems });\n\n let meteoTypeIds = [\n \"01\",\n \"02\",\n \"03\",\n \"04\",\n \"06\",\n \"08\",\n \"09\",\n \"11\",\n \"12\",\n \"13\",\n ];\n let meteoPostItems = meteoTypeIds.filter(\n (x) => !existMeteoTypeIds.includes(x)\n );\n console.log({ meteoPostItems });\n const postHydroConfigData = async (hyId) => {\n await dwrApi.post(`/ConfigDataStations`, {\n stationId: stationId,\n hydroTypeId: hyId,\n });\n };\n const postMeteoConfigData = async (mtId) => {\n await dwrApi.post(`/ConfigDataStations`, {\n stationId: stationId,\n meteotypeId: mtId,\n });\n };\n hydroPostItems.map(async (hy) => {\n switch (true) {\n case hy === \"01\" && ev.ghsurvey:\n await postHydroConfigData(hy);\n break;\n case hy === \"02\" && ev.dcsurvey:\n await postHydroConfigData(hy);\n break;\n case hy === \"03\" && ev.wqsurvey:\n await postHydroConfigData(hy);\n break;\n default:\n break;\n }\n });\n meteoPostItems.map(async (mt) => {\n switch (true) {\n case mt == \"01\" && ev.meteoSurvey.basicRainSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"02\" && ev.meteoSurvey.panEvaSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"03\" && ev.meteoSurvey.tempWaterSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"04\" && ev.meteoSurvey.tempAirSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"06\" && ev.meteoSurvey.tempMaxSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"08\" && ev.meteoSurvey.tempMinSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"09\" && ev.meteoSurvey.dwhumiSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"11\" && ev.meteoSurvey.airgMachSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"12\" && ev.meteoSurvey.solarMachSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"13\" && ev.meteoSurvey.sunsMachSurvey:\n await postMeteoConfigData(mt);\n break;\n default:\n break;\n }\n });\n }\n }\n } catch (err) {\n console.error(err);\n }\n };\n\n const getFilteredDeleteCrossection = async (item, index) => {\n const crossSectionFilter = stationDetail?.crossSection.filter(\n (data, dataIndex) => !crossSectionData.includes(data)\n );\n\n console.log({ crossSectionFilter });\n\n // setCrossSectionData(crossSectionFilter);\n return crossSectionFilter;\n };\n\n const onDeleteCrossSection = async (item) => {\n try {\n // await Promise.all(crossSectionInfo.map(cross => dwrApi.delete(`/CrossSectionInfoes/${cross.crossSectionId}`)) )\n await dwrApi.delete(\n `/CrossSectionInfoes/CrossSection/${item.crossSectionId}`\n );\n const data = {\n crossSectionId: item.crossSectionId,\n surveyNo: item.surveyNo,\n surveyDate: item.surveyDate,\n stationId: stationDetail?.stationId,\n leftCrossSection: item.leftCrossSection,\n rightCrossSection: item.rightCrossSection,\n };\n\n const res = await dwrApi.delete(`/CrossSections/${item.crossSectionId}`, {\n data,\n });\n } catch (err) {\n console.error(err);\n }\n };\n\n const submitCrossection = async () => {\n const filtedCrossections = await getFilteredDeleteCrossection();\n\n if (crossSectionData.length) {\n await Promise.all(\n crossSectionData.map(async (item) => {\n const data = {\n ...item,\n stationId: stationDetail?.stationId,\n };\n\n if (item.crossSectionId) {\n return dwrApi\n .put(`/CrossSections/${item.crossSectionId}`, data)\n .then((res) => {\n console.log(\"PUT croesstion\", res.data);\n // dwrApi.post(`/CrossSectionInfoes/${item.crossSectionId}`, {});\n })\n .catch((err) => {\n console.error('fail PUT croesstion\"', err.message);\n });\n } else {\n return dwrApi\n .post(`/CrossSections`, data)\n .then((res) => {\n console.log(\"post croesstion\", res.data);\n const { crossSectionId, orderNo, wideRiverX, heightY } =\n res.data;\n // dwrApi.post(`/CrossSectionInfoes/${crossSectionId}`, {\n // crossSectionId,\n // orderNo,\n // wideRiverX,\n // heightY,\n // });\n })\n .catch((err) => {\n console.error('fail post croesstion\"', err.message);\n });\n }\n })\n );\n }\n if (filtedCrossections.length) {\n await Promise.all(\n filtedCrossections.map((item) => {\n return onDeleteCrossSection(item);\n })\n );\n }\n };\n\n const postMapData = async (ev) => {\n const data = new FormData();\n data.append(\"RoadNo\", ev.RoadNo);\n data.append(\"BetweenMainRoad\", ev.BetweenMainRoad);\n data.append(\"FarMainRoad\", ev.FarMainRoad);\n const editData = new FormData();\n editData.append(\"MapId\", stationDetail.mapId);\n editData.append(\"RoadNo\", ev.RoadNo);\n editData.append(\"BetweenMainRoad\", ev.BetweenMainRoad);\n editData.append(\"FarMainRoad\", ev.FarMainRoad);\n\n if (stationDetail && stationDetail.mapId) {\n try {\n if (!!ev.pathName) {\n editData.append(\"file\", ev.pathName[0]);\n }\n\n let res = await dwrApi.put(\n `/MapDatas/${stationDetail.mapId}`,\n editData\n );\n console.log(\"putMapData\", res.data);\n return stationDetail?.mapId;\n } catch (err) {\n console.error('fail postMapData\"', err.message);\n }\n } else {\n try {\n if (!!ev.pathName) {\n editData.append(\"file\", ev.pathName[0]);\n }\n let res = await dwrApi.post(`/MapDatas`, data);\n console.log(\"postMapData\", res.data);\n return res.data.mapId;\n } catch (err) {\n console.error('fail postMapData\"', err.message);\n }\n }\n };\n\n const submitImage = async (ev) => {\n try {\n // let exstImg = [];\n\n // stationImagesData.map(async (imgData) => {\n // const res = await fetch(imgData.stationImagePath);\n // const blobFile = await res.blob();\n // const imgFile = new File([blobFile], imgData.stationImageName, {\n // type: \"image/png\",\n // });\n\n // exstImg.push(imgFile);\n // });\n\n const exstImg = await Promise.all(\n stationImagesData.map(async (imgData) => {\n const res = await fetch(imgData.stationImagePath);\n\n const blobFile = await res.blob();\n const imgFile = new File([blobFile], imgData.stationImageName, {\n type: \"image/png\",\n });\n\n return imgFile;\n })\n );\n\n console.log({ exstImg });\n\n const imgArr = [...exstImg, ...Array.from(ev.stationImagePath)];\n\n // console.log({img: ev.pathName[0]});\n if (imgArr.length) {\n const stationImgData = new FormData();\n stationImgData.append(\"stationId\", ev.stationId);\n\n imgArr.map((img) => {\n stationImgData.append(\"files\", img);\n });\n\n let res = await dwrApi.post(`/StationImages`, stationImgData);\n }\n } catch (err) {\n console.error(err);\n }\n };\n\n const submitRemark = async (ev) => {\n if (!ev.remark) return;\n try {\n let payload = {\n stationId: ev.stationId,\n remark: ev.remark,\n };\n await dwrApi.post(`/StationRemarks`, payload);\n // if (!stationDetail?.stationRemark || stationDetail?.stationRemark?.length == 0) {\n // let payload = {\n // stationId: ev.stationId,\n // remark: ev.remark\n // }\n\n // await dwrApi.post(\n // `/StationRemarks`,\n // payload\n // );\n // }\n // else {\n // let payload = { stationRemarkId: ev.stationRemarkId, remark: ev.remark, stationId: ev.stationId }\n // await dwrApi.put(`/StationRemarks/${ev.stationRemarkId}`, payload);\n // }\n } catch (err) {\n console.error(err);\n }\n };\n\n const onHandleSubmit = async (ev) => {\n setInputData(ev);\n setIsLoading(true);\n try {\n let locationId = await onSubmitLocation(ev);\n let bmid = await onSubmitBenchmarks(ev);\n let gageId = await onSubmitGage(ev);\n let basinAreaId = await onSubmitBasinArea(ev);\n\n let hydroSurveyId = await fetchHydroSurvey(ev);\n let meteoSurveyId = await fetchMeteoSurvey(ev);\n let mapId = await postMapData({ ...ev });\n let stationId = await onSubmitStationDetail({\n ...ev,\n locationId,\n bmid,\n gageId,\n basinAreaId,\n hydroSurveyId,\n meteoSurveyId,\n mapId,\n });\n\n await onSubmitConfigDataStation(stationId, {\n ...ev,\n locationId,\n bmid,\n gageId,\n basinAreaId,\n hydroSurveyId,\n meteoSurveyId,\n mapId,\n });\n await submitCrossection(stationId);\n await Promise.all([\n submitImage({ ...ev, stationId }),\n submitRemark({ ...ev, stationId }),\n ]);\n\n const showToast = async () => {\n addToast(\n onHandleDownload(query.stationId)} type=\"button\">\n ![\"download\"](\"/assets/icon/download.png\")
\n \n
\n )}\n {displayAddEditStationDetail}\n {displayAccordian}\n {displayCrossSection}\n {displayLocation}\n {displayRemark}\n {displayLog}\n {displayButtonGroup}\n \n \n บันทึกข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n };\n await fetchStationDetail(stationId);\n await showToast();\n } catch (err) {\n console.error(err, \"❌\");\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n } finally {\n setIsLoading(false);\n }\n };\n\n // useEffect(() => {\n // if (dataStation && responseMeteoType && responseHydroType)\n // onSubmitConfigDataStation(inputData);\n // }, [dataStation, responseMeteoType, responseHydroType]);\n\n return (\n\n {isLoading ?
\n }\n />\n \n \n \n history.goBack()}>\n
\n }\n />\n {displayStationDetail}\n \n \n table.setPageIndex(pageNumber - 1)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displaylimitResults = (\n \n แสดง\n {\n table.setPageSize(Number(e.target.value));\n }}\n value={table.getState().pagination.pageSize}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n return (\n \n {displaylimitResults}\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n
\n\n {displayPaginationJs}\n
\n );\n};\n\nexport default TableComp;\n","import React, { useState, useEffect } from \"react\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport {\n Link,\n useHistory,\n Route,\n useRouteMatch,\n Switch,\n} from \"react-router-dom\";\nimport TitleText from \"../../../Components/TitleText\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport Select from \"react-select\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport Pagination from \"react-js-pagination\";\nimport ModalDeleteStation from \"../../../Components/ModalDeleteStation\";\nimport StationDetail from \"./StationDetail\";\nimport EditStation from \"./EditStation\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport TableComp from \"../../../Components/TableComp\";\nimport { GrDocumentDownload } from \"react-icons/gr\";\n\nimport { Document, Page, pdfjs } from \"react-pdf\";\nimport fs from \"fs\";\nimport { toDataURL } from \"../../../Services/Function\";\n\npdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;\n\nconst StationManagement = () => {\n let { path, url } = useRouteMatch();\n\n const optionsSearch = [\n { label: \"ทั้งหมด\", value: \"1\" },\n { label: \"เลือกลุ่มน้ำ\", value: \"2\" },\n ];\n const history = useHistory();\n const [station, setstation] = useState([]);\n const [pdfReport, setPdfReport] = useState(null);\n const { addToast } = useToasts();\n const [optionsBasin, setOptionBasin] = useState([]);\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [typeSearch, setTypeSearch] = useState(optionsSearch[0]);\n\n const [isLoading, setIsLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n const [base64Pdf, setBase64Pdf] = useState(null);\n const [numPages, setNumPages] = useState(null);\n const [pageNumber, setPageNumber] = useState(1);\n\n function onDocumentLoadSuccess({ numPages }) {\n setNumPages(numPages);\n }\n\n // let filterSearch;\n\n const styles = {\n searchContainer: {},\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const downloadFile = (function () {\n const a = document.createElement(\"a\");\n document.body.appendChild(a);\n a.style = \"display: none\";\n return function (data, fileName) {\n a.href = data;\n a.download = fileName;\n a.click();\n };\n })();\n\n const onHandleDownload = async (stationId) => {\n setIsLoading(true);\n const b64 = await dwrApi\n .get(`/StationOnepages/${stationId}`, { responseType: \"blob\" })\n .then((res) => window.URL.createObjectURL(res.data))\n .then((url) => toDataURL(url))\n .then((data) => downloadFile(data, `stationId-${stationId}`))\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n });\n };\n\n const tableData = filterBySearchTerm.map((el, elIndex) => {\n return {\n id: elIndex,\n stationLabel: (\n \n {el.stationLabel}\n \n ),\n stationTh: (\n \n {el.stationTh}\n \n ),\n basinTh: el.subBasin?.basin?.basinTh,\n edit: (\n | \n {header.isPlaceholder ? null : (\n <>\n {header.column.columnDef.sort ? (\n \n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )}\n \n )}\n | \n );\n })}\n
|---|
| \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n | \n ))}\n
\n \n {/* \n
\n );\n\n const displayStationManagement = (\n <>\n \n
\n\n \n setTypeSearch(ev)}\n />\n
\n \n {typeSearch.value == \"1\" ? (\n setSearchTerm(ev.target.value)}\n />\n ) : (\n
\n \n setBasinIdSelected(ev.value)}\n />\n
\n )}\n \n \n ค้นหา\n
\n \n \n history.push(\"/addstation\")}\n >\n เพิ่มสถานี\n \n \n
\n \n
\n \n );\n\n return (\n {displayHeader}
\n {station.length ? (\n <>\n {/* {displaylimitResults}
*/}\n {/* {displayManagement}
*/}\n {displayPagination}
*/}\n \n ) : (\n \"\"\n )}\n \n {isLoading ? \n \n \n \n \n \n
\n );\n};\n\nexport default StationManagement;\n","import React, { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport FormStationDetail from \"../../../Components/FormStationDetail\";\nimport { useHistory } from \"react-router-dom\";\nimport { FaChevronDown, FaChevronUp, FaChevronLeft } from \"react-icons/fa\";\nimport TitleText from \"../../../Components/TitleText\";\n\nconst AddStation = () => {\n const history = useHistory();\n\n const { register, handleSubmit, watch } = useForm();\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [inputData, setInputData] = useState(\"\");\n\n const [crossSectionData, setCrossSectionData] = useState([]);\n const [dataBenchmarks, setDataBenchmarks] = useState(\"\");\n const [dataGage, setDataGage] = useState(\"\");\n const [dataBasinArea, setDataBasinArea] = useState(\"\");\n\n const [dataStation, setDataStation] = useState(\"\");\n\n const [responseMeteoType, setResponseMeteoType] = useState(\"\");\n const [responseHydroType, setResponseHydroType] = useState(\"\");\n\n const preloadValue = {\n BetweenMainRoad: null,\n FarMainRoad: null,\n RoadNo: null,\n basinId: null,\n basinArea: {\n measureDate: null,\n measureByCenter: false,\n },\n benchmark: {\n createByCenter: false,\n bmLevel: null,\n nearbyPlace: null,\n bmcreateDate: null,\n },\n bmCreateByCenter: false,\n bmcreateDate: null,\n\n bubbleCdate: null,\n bubbleIdate: null,\n buildingDate: null,\n controllerName: null,\n dcsurvey: false,\n floatCdate: null,\n floatIdate: null,\n gage: {\n gageAmount: 0,\n gageLevel: null,\n gageTypeId: 1,\n gageSurveyDate: null,\n\n subGage: [],\n surveyByCenter: false,\n },\n gageSurveyDate: null,\n\n latitudeDms: [null, null, null],\n longitudeDms: [null, null, null],\n\n nearbyPlace: null,\n pathName: null,\n personName: null,\n\n publish: false,\n radius: null,\n ratioMap: null,\n sheetNo: null,\n staffCdate: null,\n staffIdate: null,\n stationEn: null,\n stationImagePath: null,\n stationTh: null,\n stationType: \"01\",\n stationlabel: null,\n subDistrict: null,\n tel: null,\n village: null,\n waterCdate: null,\n waterSdate: null,\n ghsurvey: null,\n hydroCreateDate: null,\n wqsurvey: null,\n wqcdate: null,\n wqsdate: null,\n meteoSurvey: null,\n meteoSdate: null,\n meteoCdate: null,\n meteoCreateDate: null,\n remark: \"\",\n stationRemarkId: null,\n };\n\n const onSubmitStationDetail = async (ev) => {\n // const data = {\n // stationLabel: ev.stationlabel,\n // stationEn: ev.stationEn,\n // stationTh: ev.stationTh,\n // locationId: null,\n // stationCenterId: +ev.stationCenterId,\n // subBasinId: ev.subBasin,\n // ratioMap: ev.ratioMap,\n // sheetNo: ev.sheetNo,\n // buildingDate: ev.buildingDate,\n // controllerName: ev.controllerName,\n // meteoCreateDate: ev.meteoCreateDate,\n // hydroCreateDate: ev.hydroCreateDate,\n // stationTypeId: +ev.stationType,\n // departmentId: ev.departmentId,\n // bmid: dataBenchmarks.bmid,\n // basinAreaId: dataBasinArea.basinAreaId,\n // gageId: dataGage.gageId,\n // publish: ev.publish === true ? \"Y\" : \"N\",\n // personName: ev.personName,\n // tel: ev.tel,\n // active: \"Y\",\n // };\n\n // let payload = {\n // stationId: stationDetail?.stationId,\n // stationLabel: ev.stationlabel,\n // stationEn: ev.stationEn,\n // stationTh: ev.stationTh,\n // locationId: ev.locationId || stationDetail?.locationId,\n // stationCenterId: +ev.stationCenterId,\n // subBasinId: ev.subBasin,\n // ratioMap: ev.ratioMap,\n // sheetNo: ev.sheetNo,\n // buildingDate: ev.buildingDate,\n // controllerName: ev.controllerName,\n // meteoCreateDate: ev.meteoCreateDate,\n // hydroCreateDate: ev.hydroCreateDate,\n // stationTypeId: +ev.stationType,\n // departmentId: ev.departmentId,\n // solarConstant: stationDetail?.solarConstant,\n // forecastGageHeight: stationDetail?.forecastGageHeight,\n // travelDistanceWater: stationDetail?.travelDistanceWater,\n // calculatDischarge: stationDetail?.calculatDischarge,\n // hydroSurveyId: ev.hydroSurveyId || stationDetail?.hydroSurveyId,\n // meteoSurveyId: ev.meteoSurveyId || stationDetail?.meteoSurveyId,\n // bmid: ev.bmid || stationDetail?.bmid,\n // basinAreaId: ev.basinAreaId,\n // gageId: ev.gageId || stationDetail?.gageId,\n // mapId: ev.mapId || stationDetail?.mapId,\n // publish: ev.publish === true ? \"Y\" : \"N\",\n // active: \"Y\",\n // regionId: stationDetail?.regionId,\n // personName: ev.personName,\n // tel: ev.tel,\n // remark: ev.remark\n // };\n\n let payload = {\n stationLabel: ev.stationlabel,\n stationEn: ev.stationEn,\n stationTh: ev.stationTh,\n locationId: ev.locationId,\n stationCenterId: +ev.stationCenterId,\n subBasinId: ev.subBasin,\n ratioMap: ev.ratioMap,\n sheetNo: ev.sheetNo,\n buildingDate: !!ev.buildingDate ? ev.buildingDate : null,\n controllerName: ev.controllerName,\n meteoCreateDate: !!ev.meteoCreateDate ? ev.meteoCreateDate : null,\n hydroCreateDate: !!ev.hydroCreateDate ? ev.hydroCreateDate : null,\n stationTypeId: +ev.stationType,\n departmentId: ev.departmentId,\n hydroSurveyId: ev.hydroSurveyId,\n meteoSurveyId: ev.meteoSurveyId,\n bmid: ev.bmid,\n basinAreaId: ev.basinAreaId,\n gageId: ev.gageId,\n mapId: ev.mapId,\n publish: ev.publish === true ? \"Y\" : \"N\",\n personName: ev.personName,\n tel: ev.tel,\n remark: ev.remark,\n };\n\n try {\n let res = await dwrApi.post(`/Stations`, payload);\n console.log(\"upload station Done\", res.data);\n setDataStation(res.data);\n return res?.data?.stationId;\n } catch (err) {\n console.error(err);\n console.log(\"can not upload station\", err.message);\n }\n };\n\n const onSubmitBenchmarks = async (ev) => {\n const dataBenchmarks = {\n bmlevel: +ev.benchmark.bmLevel,\n nearbyPlace: ev.benchmark.nearbyPlace,\n bmcreateDate: !!ev.bmcreateDate ? ev.bmcreateDate : null,\n createByCenter: ev.bmCreateByCenter ? \"1\" : \"0\",\n };\n\n console.log({ dataBenchmarks });\n\n let resBm = await dwrApi\n .post(`/Benchmarks`, dataBenchmarks)\n .then((res) => {\n console.log(\"upload Benchmarks Done\", res.data);\n setDataBenchmarks(res.data);\n return res.data;\n })\n .catch((err) => {\n console.log(\"can not upload Benchmarks\", err.message);\n });\n\n return resBm.bmid;\n };\n\n const onSubmitLocation = async (ev) => {\n const dataLocation = {\n latitudeDms: `${ev.latitudeDms[0]}° ${ev.latitudeDms[1]}' ${ev.latitudeDms[2]}\" N`,\n longitudeDms: `${ev.longitudeDms[0]}° ${ev.longitudeDms[1]}' ${ev.longitudeDms[2]}\" E`,\n village: ev.village,\n nearbyPlace: ev.nearbyPlace,\n subDistrictId: ev.subDistrict,\n radius: +ev.radius,\n };\n\n console.log({ dataLocation });\n try {\n let resLocation = await dwrApi.post(\n `/Locations/Station/${ev.stationId}`,\n dataLocation\n );\n if (!!resLocation) {\n return resLocation.locationId;\n }\n } catch (err) {\n console.error(err);\n } finally {\n setIsLoading(false);\n }\n };\n\n const onSubmitGage = async (ev) => {\n try {\n const payload = {\n gageLevel: +ev.gage.gageLevel,\n gageTypeId: +ev.gage.gageTypeId,\n gageAmount: +ev.gage.gageAmount,\n surveyByCenter: ev.gage.surveyByCenter ? \"1\" : \"0\",\n gageSurveyDate: !!ev.gageSurveyDate ? ev.gageSurveyDate : null,\n };\n\n console.log({ dataGage: payload });\n let res = await dwrApi.post(`/Gages`, payload);\n setDataGage(res.data);\n await onSubmitSubGage(res.data, ev);\n return res.data.gageId;\n } catch (err) {\n console.error(\"can not upload Gage\", err.message);\n }\n };\n\n const onSubmitSubGage = async (gageRes, ev) => {\n console.log({ gageRes, ev });\n let gageAmount = !!ev.gage.gageAmount ? +ev.gage.gageAmount : 0;\n\n let payload = [];\n ev.gage.subGage.map((sub, i) => {\n if (i < gageAmount) {\n payload.push({\n gageId: gageRes?.gageId,\n gageNo: i + 1,\n totalSheet: !!sub.totalSheet ? +sub.totalSheet : 0,\n });\n }\n });\n dwrApi\n .post(`/SubGages`, payload)\n .then((res) => {\n console.warn(\"upload SubGages Done\", res.data);\n })\n .catch((err) => {\n console.error(\"can not upload SubGages\", err.message);\n });\n };\n\n // const onSubmitSubGage = async (ev) => {\n // const dataSubGage = ev.gage?.subgage?.map((item, index) => {\n // return {\n // gageId: +dataGage.gageId,\n // gageNo: index + 1,\n // startLevel: +item.subGageLevel,\n // totalSheet: 1,\n // };\n // });\n\n // await dwrApi\n // .post(`/SubGages`, dataSubGage)\n // .then((res) => {\n // console.log(\"upload SubGages Done\", res.data);\n // })\n // .catch((err) => {\n // console.log(\"can not upload SubGages\", err.message);\n // });\n // };\n\n const onSubmitBasinArea = async (ev) => {\n try {\n const payload = {\n basinArea: !isNaN(ev.basinArea.BasinArea)\n ? +ev.basinArea.BasinArea\n : null,\n measureDate: !!ev.basinArea.measureDate\n ? ev.basinArea.measureDate\n : null,\n measureByCenter: ev.basinArea.measureByCenter ? \"1\" : \"0\",\n };\n\n console.log({ dataBasinArea: payload });\n let res = await dwrApi.post(`/BasinAreas`, payload);\n setDataBasinArea(res.data);\n console.log(\"SubmitBasinArea Done\", res.data);\n return res.data.basinAreaId;\n } catch (err) {\n console.error(err);\n }\n // const data = {\n // basinArea1: ev.basinArea,\n // measureDate: ev.dateOfBasin,\n // measureByCenter: ev.isCenterResearch_basin ? \"1\" : \"0\",\n // };\n\n // await dwrApi\n // .post(`/BasinAreas`, data)\n // .then((res) => {\n // console.log(\"upload SubGages Done\", res.data);\n // setDataBasinArea(res.data);\n // })\n // .catch((err) => {\n // console.log(\"can not upload SubGages\", err.message);\n // });\n };\n\n const fetchHydroSurvey = async (ev) => {\n const data = {\n ghsurvey: ev.ghsurvey,\n staffIdate: !!ev.staffIdate ? ev.staffIdate : null,\n staffCdate: !!ev.staffCdate ? ev.staffCdate : null,\n floatIdate: !!ev.floatIdate ? ev.floatIdate : null,\n floatCdate: !!ev.floatCdate ? ev.floatCdate : null,\n bubbleIdate: !!ev.bubbleIdate ? ev.bubbleIdate : null,\n bubbleCdate: !!ev.bubbleCdate ? ev.bubbleCdate : null,\n\n dcsurvey: ev.dcsurvey,\n waterSdate: !!ev.waterSdate ? ev.waterSdate : null,\n waterCdate: !!ev.waterCdate ? ev.waterCdate : null,\n\n wqsurvey: ev.wqsurvey,\n wqsdate: !!ev.wqsdate ? ev.wqsdate : null,\n wqcdate: !!ev.wqcdate ? ev.wqcdate : null,\n };\n\n console.log({ hydroData: data });\n try {\n let res = await dwrApi.post(`/HydroSurveys`, data);\n setResponseHydroType(res.data);\n return res.data.hydroSurveyId;\n } catch (err) {\n console.error(err.message);\n }\n };\n\n const fetchMeteoSurvey = async (ev) => {\n console.log({ fetchMeteoSurvey: ev });\n const data = {\n meteoSdate: !!ev.meteoSdate ? ev.meteoSdate : null,\n meteoCdate: !!ev.meteoCdate ? ev.meteoCdate : null,\n basicRainSurvey: ev.meteoSurvey.basicRainSurvey,\n panEvaSurvey: ev.meteoSurvey.panEvaSurvey,\n tempWaterSurvey: ev.meteoSurvey.tempWaterSurvey,\n tempAirSurvey: ev.meteoSurvey.tempAirSurvey,\n tempMaxSurvey: ev.meteoSurvey.tempMaxSurvey,\n tempMinSurvey: ev.meteoSurvey.tempMinSurvey,\n dwhumiSurvey: ev.meteoSurvey.dwhumiSurvey,\n airgMachSurvey: ev.meteoSurvey.airgMachSurvey,\n solarMachSurvey: ev.meteoSurvey.solarMachSurvey,\n sunsMachSurvey: ev.meteoSurvey.sunsMachSurvey,\n };\n\n console.log({ meteoData: data });\n\n try {\n let res = await dwrApi.post(`/MeteoSurveys`, data);\n setResponseMeteoType(res.data);\n return res.data.meteoSurveyId;\n } catch (err) {\n console.error(err);\n }\n };\n\n const onSubmitConfigDataStation = async (stationId, ev) => {\n console.log({ ConfigDataStation: ev });\n\n const postHydroConfigData = async (hyId) => {\n await dwrApi.post(`/ConfigDataStations`, {\n stationId: stationId,\n hydroTypeId: hyId,\n });\n };\n const postMeteoConfigData = async (mtId) => {\n await dwrApi.post(`/ConfigDataStations`, {\n stationId: stationId,\n meteotypeId: mtId,\n });\n };\n let hydroTypeIds = [\"01\", \"02\", \"03\"];\n\n hydroTypeIds.map(async (hd) => {\n switch (true) {\n case hd == \"01\" && ev.ghsurvey:\n await postHydroConfigData(hd);\n case hd == \"02\" && ev.dcsurvey:\n await postHydroConfigData(hd);\n case hd == \"03\" && ev.wqsurvey:\n await postHydroConfigData(hd);\n default:\n break;\n }\n });\n\n let meteoTypeIds = [\n \"01\",\n \"02\",\n \"03\",\n \"04\",\n \"06\",\n \"08\",\n \"09\",\n \"11\",\n \"12\",\n \"13\",\n ];\n meteoTypeIds.map(async (mt) => {\n switch (true) {\n case mt == \"01\" && ev.meteoSurvey.basicRainSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"02\" && ev.meteoSurvey.panEvaSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"03\" && ev.meteoSurvey.tempWaterSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"04\" && ev.meteoSurvey.tempAirSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"06\" && ev.meteoSurvey.tempMaxSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"08\" && ev.meteoSurvey.tempMinSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"09\" && ev.meteoSurvey.dwhumiSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"11\" && ev.meteoSurvey.airgMachSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"12\" && ev.meteoSurvey.solarMachSurvey:\n await postMeteoConfigData(mt);\n break;\n case mt == \"13\" && ev.meteoSurvey.sunsMachSurvey:\n await postMeteoConfigData(mt);\n break;\n default:\n break;\n }\n });\n };\n\n const submitCrossection = async (stationId) => {\n if (crossSectionData.length) {\n crossSectionData.map((item) => {\n const data = {\n ...item,\n stationId: stationId,\n };\n\n dwrApi\n .post(`/CrossSections`, data)\n .then((res) => {\n console.log(\"post croesstion\", res.data);\n })\n .catch((err) => {\n console.log('fail post croesstion\"', err.message);\n });\n });\n }\n };\n\n const postMapData = async (ev) => {\n const data = new FormData();\n data.append(\"RoadNo\", ev.RoadNo);\n data.append(\"BetweenMainRoad\", ev.BetweenMainRoad);\n data.append(\"FarMainRoad\", ev.FarMainRoad);\n\n // data.append(\"MapName\", \"\");\n // data.append(\"PathName\", \"\");\n data.append(\"File\", ev.pathName[0]);\n\n try {\n let res = await dwrApi.post(`/MapDatas`, data);\n return res.data.mapId;\n } catch (err) {\n console.error(err);\n }\n };\n\n const submitImage = async (ev) => {\n const imgArr = Array.from(ev.stationImagePath);\n\n try {\n // console.log({img: ev.pathName[0]});\n if (imgArr.length) {\n const stationImgData = new FormData();\n stationImgData.append(\"stationId\", ev.stationId);\n imgArr.map((img) => {\n stationImgData.append(\"files\", img);\n });\n\n let res = await dwrApi.post(`/StationImages`, stationImgData);\n }\n } catch (err) {\n console.error(err);\n }\n };\n\n const submitRemark = async (ev) => {\n if (!ev.remark) return;\n try {\n let payload = {\n stationId: ev.stationId,\n remark: ev.remark,\n };\n await dwrApi.post(`/StationRemarks`, payload);\n } catch (err) {\n console.error(err);\n }\n };\n\n const onHandleSubmit = async (ev) => {\n // setInputData(ev);\n setIsLoading(true);\n try {\n // await onSubmitBenchmarks(ev);\n // await onSubmitGage(ev);\n // await onSubmitBasinArea(ev);\n // setTimeout(async () => {\n // await fetchHydroSurvey(ev);\n // await fetchMeteoSurvey(ev);\n // await postMapData(ev);\n // addToast({displayStationManagement}
\n บันทึกข้อมูลเรียบร้อยแล้ว
, {\n // appearance: \"success\",\n // autoDismiss: true,\n // });\n // }, 1000);\n\n // submitCrossection(inputData);\n // onSubmitConfigDataStation(ev)\n\n let bmid = await onSubmitBenchmarks(ev);\n let gageId = await onSubmitGage(ev);\n let basinAreaId = await onSubmitBasinArea(ev);\n let hydroSurveyId = await fetchHydroSurvey(ev);\n let meteoSurveyId = await fetchMeteoSurvey(ev);\n let mapId = await postMapData({ ...ev });\n let stationId = await onSubmitStationDetail({\n ...ev,\n bmid,\n gageId,\n basinAreaId,\n hydroSurveyId,\n meteoSurveyId,\n mapId,\n });\n\n if (stationId) {\n let locationId = await onSubmitLocation({ ...ev, stationId });\n await onSubmitConfigDataStation(stationId, {\n ...ev,\n locationId,\n bmid,\n gageId,\n basinAreaId,\n hydroSurveyId,\n meteoSurveyId,\n mapId,\n });\n await submitCrossection(stationId);\n await Promise.all([\n submitImage({ ...ev, stationId }),\n submitRemark({ ...ev, stationId }),\n ]);\n\n addToast(บันทึกข้อมูลเรียบร้อยแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n\n await gotoEditPage(stationId);\n } else {\n addToast(บันทึกข้อมูลไม่ได้ เกิดข้อผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n }\n } catch (err) {\n console.log(err);\n } finally {\n setIsLoading(false);\n }\n };\n\n const gotoEditPage = async (stationId) => {\n history.push(`/stationmanagement/${stationId}/edit`);\n };\n\n // useEffect(() => {\n // if (dataBenchmarks && dataGage && dataBasinArea)\n // onSubmitStationDetail(inputData);\n // }, [dataBenchmarks, dataGage, dataBasinArea]);\n\n // useEffect(() => {\n // if (dataGage) onSubmitSubGage(inputData);\n // }, [dataGage]);\n\n // useEffect(() => {\n // if (dataStation) {\n // onSubmitLocation(inputData);\n // submitCrossection(inputData);\n // onSubmitRemark(inputData);\n // }\n // }, [dataStation]);\n\n // useEffect(() => {\n // if (dataStation && responseMeteoType && responseHydroType)\n // onSubmitConfigDataStation(inputData);\n // }, [dataStation, responseMeteoType, responseHydroType]);\n\n return (\n\n {isLoading ? history.goBack()}>\n
\n }\n />\n \n \n );\n};\n\nexport default AddStation;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaRegCommentDots } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport ProtectGate from \"../Tools/ProtectGate/ProtectGate\";\n\nconst ModalAddLocation = ({\n title,\n provinceIdSelected,\n districtIdSelected,\n setIsAction,\n}) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { register, handleSubmit, reset } = useForm();\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [permission, setPermission] = useState(\"\");\n\n useEffect(() => {\n if (title == \"จังหวัด\") {\n setPermission(2211);\n } else if (title == \"อำเภอ\") {\n setPermission(2214);\n } else if (title == \"ตำบล\") {\n setPermission(2217);\n }\n }, [title]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n reset();\n };\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n let data;\n let subUrl = \"\";\n\n const dataProvince = {\n provinceId: ev.id,\n provinceEn: ev.nameEn,\n provinceTh: ev.nameTh,\n };\n\n const dataDistrict = {\n districtId: ev.id,\n districtEn: ev.nameEn,\n districtTh: ev.nameTh,\n provinceId: provinceIdSelected?.value,\n };\n\n const dataSubDistrict = {\n subDistrictId: ev.id,\n subDistrictEn: ev.nameEn,\n subDistrictTh: ev.nameTh,\n districtId: districtIdSelected?.value,\n };\n\n if (title == \"จังหวัด\") {\n data = dataProvince;\n subUrl = \"Provinces\";\n } else if (title == \"อำเภอ\") {\n data = dataDistrict;\n subUrl = \"Districts\";\n } else if (title == \"ตำบล\") {\n data = dataSubDistrict;\n subUrl = \"SubDistricts\";\n }\n\n dwrApi\n .post(`/${subUrl}`, data)\n .then((res) => {\n addToast(เพิ่ม{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(true);\n });\n };\n\n const displayButtonOpenModal = (\n\n เพิ่ม\n
\n \n
\n );\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalAddLocation;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaRegCommentDots } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport ProtectGate from \"../Tools/ProtectGate/ProtectGate\";\n\nconst ModalDeleteLocation = ({\n title,\n provinceIdSelected,\n districtIdSelected,\n subDistrictIdSelected,\n selectedDataId,\n setIsAction,\n}) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [permission, setPermission] = useState(\"\");\n\n useEffect(() => {\n if (title == \"จังหวัด\") {\n setPermission(2213);\n } else if (title == \"อำเภอ\") {\n setPermission(2216);\n } else if (title == \"ตำบล\") {\n setPermission(2219);\n }\n }, [title]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"10px\",\n\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n let id;\n let subUrl = \"\";\n\n if (title == \"จังหวัด\") {\n id = provinceIdSelected.value;\n subUrl = \"Provinces\";\n } else if (title == \"อำเภอ\") {\n id = districtIdSelected.value;\n subUrl = \"Districts\";\n } else if (title == \"ตำบล\") {\n id = subDistrictIdSelected.value;\n subUrl = \"SubDistricts\";\n }\n\n dwrApi\n .delete(`/${subUrl}/${id}`)\n .then((res) => {\n addToast(ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(true);\n });\n };\n\n const displayButtonOpenModal = (\nคุณต้องการลบ{title} ที่เลือกใช่หรือไม่
\n );\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n
\n \n \n \n \n );\n};\n\nexport default ModalDeleteLocation;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaRegCommentDots } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport ProtectGate from \"../Tools/ProtectGate/ProtectGate\";\n\nconst ModalEditLocation = ({\n title,\n selectedDataId,\n provinceIdSelected,\n districtIdSelected,\n subDistrictIdSelected,\n setIsAction,\n}) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { register, handleSubmit, reset, setValue } = useForm();\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [permission, setPermission] = useState(\"\");\n\n useEffect(() => {\n if (title == \"จังหวัด\") {\n setPermission(2212);\n } else if (title == \"อำเภอ\") {\n setPermission(2215);\n } else if (title == \"ตำบล\") {\n setPermission(2218);\n }\n }, [title]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n reset();\n };\n\n const fetchProvinceSelected = () => {\n dwrApi\n .get(`/Provinces/${provinceIdSelected.value}`)\n .then((res) => {\n setValue(\"id\", res.data.provinceId);\n setValue(\"nameTh\", res.data.provinceTh);\n setValue(\"nameEn\", res.data.provinceEn);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n const fetchDistrictSelected = () => {\n dwrApi\n .get(`/Districts/${districtIdSelected.value}`)\n .then((res) => {\n setValue(\"id\", res.data.districtId);\n setValue(\"nameTh\", res.data.districtTh);\n setValue(\"nameEn\", res.data.districtEn);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n const fetchSubDistrictSelected = () => {\n dwrApi\n .get(`/SubDistricts/${subDistrictIdSelected.value}`)\n .then((res) => {\n setValue(\"id\", res.data.subDistrictId);\n setValue(\"nameTh\", res.data.subDistrictTh);\n setValue(\"nameEn\", res.data.subDistrictEn);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n if (modalIsOpen && title == \"จังหวัด\") {\n fetchProvinceSelected();\n } else if (modalIsOpen && title == \"อำเภอ\") {\n fetchDistrictSelected();\n } else if (modalIsOpen && title == \"ตำบล\") {\n fetchSubDistrictSelected();\n }\n }, [\n provinceIdSelected,\n districtIdSelected,\n subDistrictIdSelected,\n modalIsOpen,\n ]);\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n let data;\n let subUrl = \"\";\n\n const dataProvince = {\n provinceId: ev.id,\n provinceEn: ev.nameEn,\n provinceTh: ev.nameTh,\n };\n\n const dataDistrict = {\n districtId: ev.id,\n districtEn: ev.nameEn,\n districtTh: ev.nameTh,\n provinceId: provinceIdSelected?.value,\n };\n\n const dataSubDistrict = {\n subDistrictId: ev.id,\n subDistrictEn: ev.nameEn,\n subDistrictTh: ev.nameTh,\n districtId: districtIdSelected?.value,\n };\n\n if (title == \"จังหวัด\") {\n data = dataProvince;\n subUrl = `Provinces/${provinceIdSelected.value}`;\n } else if (title == \"อำเภอ\") {\n data = dataDistrict;\n subUrl = `Districts/${districtIdSelected.value}`;\n } else if (title == \"ตำบล\") {\n data = dataSubDistrict;\n subUrl = `SubDistricts/${subDistrictIdSelected.value}`;\n }\n\n dwrApi\n .put(`/${subUrl}`, data)\n .then((res) => {\n addToast(แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(true);\n });\n };\n\n const displayButtonOpenModal = (\n\n
\n );\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalEditLocation;\n","import React from \"react\";\nimport Select from \"react-select\";\nimport ModalAddLocation from \"./ModalAddLocation\";\nimport ModalDeleteLocation from \"./ModalDeleteLocation\";\nimport ModalEditLocation from \"./ModalEditLocation\";\n\nconst LocationInputEl = ({\n title,\n options,\n placeholder,\n selectedDataId,\n setSelectedDataId,\n provinceIdSelected,\n subDistrictIdSelected,\n districtIdSelected,\n setIsAction,\n}) => {\n return (\n \n
\n );\n};\n\nexport default LocationInputEl;\n","import React, { useState, useEffect } from \"react\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport LocationInputEl from \"../../../Components/LocationInputEl\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nconst LocationManagement = () => {\n const [isLoading, setIsLoading] = useState(false);\n const [optionProvince, setOptionProvince] = useState([]);\n const [optionDistrict, setOptionDistrict] = useState([]);\n const [optionSubDistrict, setOptionSubDistrict] = useState([]);\n const [provinceIdSelected, setProvinceIdSelected] = useState(\"\");\n const [districtIdSelected, setDistrictIdSelected] = useState(\"\");\n const [subDistrictIdSelected, setsubDistrictIdSelected] = useState(\"\");\n\n const [isProvinceAction, setIsProvinceAction] = useState(false);\n const [isDistrictAction, setIsDistrictAction] = useState(false);\n const [isSubDistrictAction, setIsSubDistrictAction] = useState(false);\n\n const fetchProvince = () => {\n setOptionProvince([]);\n dwrApi\n .get(`/Provinces`)\n .then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.provinceId,\n label: `${item.provinceId} : ${item.provinceTh}`,\n };\n setOptionProvince((optionProvince) => [...optionProvince, list]);\n });\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n })\n .finally(() => {\n setIsProvinceAction(false);\n });\n };\n\n const fetchDistrict = () => {\n setOptionDistrict([]);\n dwrApi\n .get(`/Districts/Province/${provinceIdSelected.value}`)\n .then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.districtId,\n label: `${item.districtId} : ${item.districtTh}`,\n };\n setOptionDistrict((optionDistrict) => [...optionDistrict, list]);\n });\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n })\n .finally(() => {\n setIsDistrictAction(false);\n });\n };\n\n const fetchSubDistrict = () => {\n setOptionSubDistrict([]);\n dwrApi\n .get(`/SubDistricts/District/${districtIdSelected.value}`)\n .then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.subDistrictId,\n label: `${item.subDistrictId} : ${item.subDistrictTh}`,\n };\n setOptionSubDistrict((optionSubDistrict) => [\n ...optionSubDistrict,\n list,\n ]);\n });\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n })\n .finally(() => {\n setIsSubDistrictAction(false);\n });\n };\n\n useEffect(() => {\n setProvinceIdSelected(\"\");\n fetchProvince();\n }, [isProvinceAction]);\n\n useEffect(() => {\n setDistrictIdSelected(\"\");\n setsubDistrictIdSelected(\"\");\n if (provinceIdSelected) fetchDistrict();\n }, [provinceIdSelected, isDistrictAction]);\n\n useEffect(() => {\n setsubDistrictIdSelected(\"\");\n if (districtIdSelected) fetchSubDistrict();\n }, [districtIdSelected, isSubDistrictAction]);\n\n return (\n \n
\n {title}
\n \n \n ev ? setSelectedDataId(ev) : setSelectedDataId(\"\")\n }\n value={selectedDataId}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable\n />\n
\n \n \n
\n \n
\n \n
\n \n {isLoading ?
\n );\n};\n\nexport default LocationManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport Select from \"react-select\";\n\nconst ModalCRUDConfig = ({ title, detail, setIsAction, measureType }) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [optionsMeasureTime, setOptionsMeasureTime] = useState([]);\n\n const { register, handleSubmit, reset, control, setValue } = useForm();\n\n useEffect(() => {\n setValue(\n \"period\",\n optionsMeasureTime.find((item) => item.value == detail?.measureTimeId)\n );\n setValue(\"isActive\", detail?.active);\n }, [detail, optionsMeasureTime]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n reset();\n };\n\n const fetchMeasureTimes = () => {\n dwrApi\n .get(`/MeasureTimes?MeasureType=${measureType}`)\n .then((res) => {\n const list = res.data\n // .filter((data) => data.measureTypeId == measureType)\n .map((item) => {\n return {\n label: item.measureTimeDesc + \" \" + \"เวลา\",\n value: item.measureTimeId,\n };\n });\n\n setOptionsMeasureTime(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n useEffect(() => {\n fetchMeasureTimes();\n }, []);\n\n const onSubmit = async (ev) => {\n setIsLoading(true);\n\n let subUrl = \"/ConfigDataStations\";\n\n const data = {\n configDataId: +detail.configDataId,\n stationId: detail.stationId,\n meteotypeId: detail.meteotypeId,\n hydroTypeId: detail.hydroTypeId,\n measureTimeId: ev.period.value,\n active: ev.isActive,\n };\n\n await dwrApi\n .put(`${subUrl}/${detail.configDataId}`, data)\n .then((res) => {\n addToast(\n
\n แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n if (ev.isActive == \"N\") {\n await dwrApi.put(`/ConfigDataStations/${detail.configDataId}/UnActive`);\n }\n\n closeModal();\n };\n\n const displayButtonOpenModal = (\n <>\n\n
\n );\n\n const displaySpiner = (\n \n (\n \n )}\n />\n
\n กำหนดคาบเวลา
\n \n
\n \n
\n สถานะการใช้งาน
\n \n
\n \n
\n \n
\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDConfig;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport ModalCRUDConfig from \"../../../Components/ModalCRUDConfig\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\n\nconst ConfigManagement = () => {\n const [isLoading, setIsLoading] = useState(false);\n const [isAction, setIsAction] = useState(false);\n\n const [stationIdSelected, setStationIdSelected] = useState(\"\");\n const [stationsOfBasin, setStationsOfBasin] = useState(\"\");\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [alertMessage, setAlertMessage] = useState(\"\");\n\n const [dataConfig, setDataConfig] = useState([]);\n\n const styles = {\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchConfig = () => {\n dwrApi\n .get(`/ConfigDataStations/Station/${stationIdSelected.value}`)\n .then((res) => {\n setDataConfig(res.data);\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n })\n .catch((err) => {\n console.log(err.message);\n })\n .finally(() => setIsAction(false));\n };\n\n useEffect(() => {\n if (isAction) fetchConfig();\n }, [isAction]);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n setAlertMessage(\"\");\n setDataConfig([]);\n }, [stationIdSelected]);\n\n const displayManagement = (\n <>\n | ประเภทข้อมูล | \nรหัสสถานี | \nคาบเวลา | \nวันที่ตั้งค่า | \nแก้ไข | \nใช้งาน | \n
|---|---|---|---|---|---|
| \n {item.meteotype?.meteoTypeTh}{\" \"}\n {item.hydroType?.hydroTypeTh}\n | \n{stationDetail[0]?.stationLabel} | \n{item.measureTime?.measureTimeDesc} | \n- | \n\n | \n {item.active == \"Y\" ? \"ใช้งาน\" : \"ไม่ได้ใช้งาน\"} | \n
\n {isLoading ?
\n );\n};\n\nexport default ConfigManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ModalCRUDBasin = ({ title, basinDetail, type, setIsAction }) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [basinResults, setBasinResults] = useState(\"\");\n\n const fetchBasinDetail = () => {\n setIsLoading(true);\n dwrApi\n .get(`Basins/${basinDetail.basinId}`)\n .then((res) => {\n setBasinResults(res.data);\n setIsAction(false);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => setIsLoading(false));\n };\n\n useEffect(() => {\n if (basinDetail) fetchBasinDetail();\n }, [basinDetail]);\n\n const defaultValues = {\n id: basinResults ? basinResults?.basinId : \"\",\n nameEn: basinResults ? basinResults?.basinEn : \"\",\n nameTh: basinResults ? basinResults?.basinTh : \"\",\n };\n\n const { register, handleSubmit, reset } = useForm();\n\n useEffect(() => {\n if (basinResults) reset(defaultValues);\n }, [basinResults]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n reset();\n };\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n\n let subUrl = \"/Basins\";\n\n const data = {\n basinId: basinDetail ? basinDetail.basinId : ev.id,\n basinEn: ev.nameEn,\n basinTh: ev.nameTh,\n };\n\n if (type == \"add\") {\n dwrApi\n .post(`${subUrl}`, data)\n .then((res) => {\n addToast(\n
\n \n \n จัดการข้อมูล\n \n
\n \n {dataConfig.length ? (\n displayManagement\n ) : (\n
\n \n ) : (\n \"\"\n )}\n {alertMessage}
\n )}\n เพิ่ม{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"edit\") {\n dwrApi\n .put(`${subUrl}/${basinDetail.basinId}`, data)\n .then((res) => {\n addToast(แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"delete\") {\n dwrApi\n .delete(`${subUrl}/${basinDetail.basinId}`, data)\n .then((res) => {\n addToast(ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n }\n };\n\n const displayButtonOpenModal = (\n <>\n {type == \"add\" ? (\n\n เพิ่มข้อมูล\n
\n ) : (\n \"\"\n )}\n {type == \"edit\" ? (\n \n
\n );\n\n const displayContentDelete = (\n คุณต้องการลบ{title}ที่เลือกใช่หรือไม่
\n );\n\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDBasin;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport { Link, useHistory, Route, Redirect } from \"react-router-dom\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport Pagination from \"react-js-pagination\";\nimport ModalCRUDBasin from \"../../../Components/ModalCRUDBasin\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\n\nconst BasinManagement = () => {\n const [isLoading, setIsLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [basinResults, setBasinResults] = useState([]);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n\n const styles = {\n searchContainer: {},\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const fetchBasins = () => {\n setIsLoading(true);\n dwrApi\n .get(\"Basins\")\n .then((res) => {\n setBasinResults(res.data);\n setIsAction(false);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => setIsLoading(false));\n };\n\n const filterSearchFn = () => {\n if (basinResults.length) {\n const result = basinResults?.filter((item) => {\n return (\n item.basinTh.toLowerCase().includes(searchTerm.toLowerCase()) ||\n item.basinId.toLowerCase().includes(searchTerm.toLowerCase()) ||\n item.basinEn.toLowerCase().includes(searchTerm.toLowerCase())\n );\n });\n setFilterBySeachTerm(result);\n }\n };\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchBasins();\n }, [isAction]);\n\n useEffect(() => {\n filterSearchFn();\n }, [basinResults, searchTerm]);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displaylimitResults = (\n \n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n const displayPagination = (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displayManagement = (\n <>\n | รหัสลุ่มน้ำ | \nชื่อลุ่มน้ำ (ไทย) | \nชื่อลุ่มน้ำ (อังกฤษ) | \n||
|---|---|---|---|---|
| {basin.basinId} | \n{basin.basinTh} | \n{basin.basinEn} | \n\n | \n \n | \n
\n
\n );\n\n return (\n \n
\n\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n \n \n \n
\n \n
\n );\n};\n\nexport default BasinManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport Select from \"react-select\";\n\nconst ModalCRUDStationCenter = ({ title, detail, type, setIsAction }) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [optionRegions, setOptionRegions] = useState([]);\n\n const [results, setResults] = useState();\n\n const fetchData = () => {\n setIsLoading(true);\n dwrApi\n .get(`/StationCenters/${detail.stationCenterId}`)\n .then((res) => {\n setResults(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n useEffect(() => {\n if (detail && modalIsOpen) fetchData();\n }, [detail, modalIsOpen]);\n\n const defaultValues = {\n id: results && results.stationCenterId ? +results?.stationCenterId : \"\",\n nameTh:\n results && results.stationCenterName ? results?.stationCenterName : \"\",\n };\n\n const { register, handleSubmit, reset, control, setValue } = useForm();\n\n useEffect(() => {\n if (results) reset(defaultValues);\n }, [results]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n reset();\n };\n\n const fetchRegions = () => {\n dwrApi\n .get(\"/Regions\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.regionNameTh,\n value: item.regionId,\n };\n });\n setOptionRegions(list);\n })\n .catch((err) => {\n console.log(err);\n });\n };\n\n useEffect(() => {\n if (modalIsOpen) fetchRegions();\n }, [modalIsOpen]);\n\n useEffect(async () => {\n if (optionRegions.length && results) {\n const defaultValuesRegion = await optionRegions.find(\n (item) => item.value == results.regionId\n );\n\n setValue(\"regionIdSelect\", defaultValuesRegion);\n }\n }, [optionRegions, results]);\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n\n let subUrl = \"/StationCenters\";\n\n const data = {\n regionId: +ev?.regionIdSelect?.value,\n stationCenterId: detail ? detail?.stationCenterId : +ev.id,\n stationCenterName: ev.nameTh,\n };\n\n if (type == \"add\") {\n dwrApi\n .post(`${subUrl}`, data)\n .then((res) => {\n addToast(เพิ่ม{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"edit\") {\n dwrApi\n .put(`${subUrl}/${detail.stationCenterId}`, data)\n .then((res) => {\n addToast(แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"delete\") {\n dwrApi\n .delete(`${subUrl}/${detail.stationCenterId}`)\n .then((res) => {\n addToast(ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n }\n };\n\n const displayButtonOpenModal = (\n <>\n {type == \"add\" ? (\n\n เพิ่มข้อมูล\n
\n ) : (\n \"\"\n )}\n {type == \"edit\" ? (\n \n (\n
\n );\n\n const displayContentDelete = (\n คุณต้องการลบ{title}ที่เลือกใช่หรือไม่
\n );\n\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDStationCenter;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport { Link, useHistory, Route, Redirect } from \"react-router-dom\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport Pagination from \"react-js-pagination\";\nimport ModalCRUDStationCenter from \"../../../Components/ModalCRUDStationCenter\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\n\nconst DataHydroManagement = () => {\n const [results, setResults] = useState([]);\n\n const [isLoading, setIsLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n\n const styles = {\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const fetchData = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/StationCenters\")\n .then((res) => {\n setResults(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n const filterSearchFn = () => {\n if (results.length) {\n const result = results?.filter((item) => {\n return (\n item.stationCenterName\n .toLowerCase()\n .includes(searchTerm.toLowerCase()) ||\n item.region?.regionNameTh\n ?.toLowerCase()\n .includes(searchTerm.toLowerCase()) ||\n item.region?.regionNameEn\n ?.toLowerCase()\n .includes(searchTerm.toLowerCase()) ||\n item.stationCenterId?.toString().includes(searchTerm.toLowerCase())\n );\n });\n setFilterBySeachTerm(result);\n }\n };\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchData();\n }, [isAction]);\n\n useEffect(() => {\n filterSearchFn();\n }, [results, searchTerm]);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displaylimitResults = (\n \n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n const displayPagination = (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displayManagement = (\n <>\n | รหัสข้อมูลส่วนอุทกวิทยา | \nชื่อข้อมูลส่วนอุทกวิทยา | \nชื่อสำนักงานภาค | \n||
|---|---|---|---|---|
| {item.stationCenterId} | \n{item.stationCenterName} | \n{item.region?.regionNameTh} | \n\n | \n \n | \n
\n
\n );\n\n return (\n \n
\n\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n \n \n \n
\n \n
\n );\n};\n\nexport default DataHydroManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ModalCRUDRegion = ({ title, detail, type, setIsAction }) => {\n const [regions, setRegions] = useState([]);\n\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchRegions = () => {\n setIsLoading(true);\n dwrApi\n .get(`/Regions/${detail.regionId}`)\n .then((res) => {\n setRegions(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n useEffect(() => {\n if (detail && modalIsOpen) fetchRegions();\n }, [detail, modalIsOpen]);\n\n const defaultValues = {\n id: regions && regions.regionId ? +regions.regionId : \"\",\n nameEn: regions ? regions?.regionNameEn : \"\",\n nameTh: regions ? regions?.regionNameTh : \"\",\n };\n\n const { register, handleSubmit, reset } = useForm();\n\n useEffect(() => {\n if (regions) reset(defaultValues);\n }, [regions]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n reset();\n };\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n\n let subUrl = \"/Regions\";\n\n const data = {\n regionId: detail ? detail.regionId : +ev.id,\n regionNameEn: ev.nameEn,\n regionNameTh: ev.nameTh,\n };\n\n if (type == \"add\") {\n dwrApi\n .post(`${subUrl}`, data)\n .then((res) => {\n addToast(เพิ่ม{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"edit\") {\n dwrApi\n .put(`${subUrl}/${detail.regionId}`, data)\n .then((res) => {\n addToast(แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"delete\") {\n dwrApi\n .delete(`${subUrl}/${detail.regionId}`, data)\n .then((res) => {\n addToast(ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n }\n };\n\n const displayButtonOpenModal = (\n <>\n {type == \"add\" ? (\n\n เพิ่มข้อมูล\n
\n ) : (\n \"\"\n )}\n {type == \"edit\" ? (\n \n
\n );\n\n const displayContentDelete = (\n คุณต้องการลบ{title}ที่เลือกใช่หรือไม่
\n );\n\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDRegion;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport { Link, useHistory, Route, Redirect } from \"react-router-dom\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport Pagination from \"react-js-pagination\";\nimport ModalCRUDRegion from \"../../../Components/ModalCRUDRegion\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\n\nconst DepartmentManagement = () => {\n const [regions, setRegions] = useState([]);\n\n const [isLoading, setIsLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n\n const styles = {\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const fetchRegions = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/Regions\")\n .then((res) => {\n setRegions(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n const filterSearchFn = () => {\n if (regions.length) {\n const result = regions?.filter((item) => {\n const { regionId,regionNameTh, regionNameEn } = item;\n let rid = regionId+''\n return (\n rid.includes(searchTerm.toLowerCase()) ||\n regionNameTh.toLowerCase().includes(searchTerm.toLowerCase()) ||\n regionNameEn.toLowerCase().includes(searchTerm.toLowerCase())\n );\n });\n setFilterBySeachTerm(result);\n }\n };\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchRegions();\n }, [isAction]);\n\n useEffect(() => {\n filterSearchFn();\n }, [regions, searchTerm]);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displaylimitResults = (\n \n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n const displayPagination = (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displayManagement = (\n <>\n | รหัสภาค | \nชื่อสำนักงานภาค (ไทย) | \nชื่อสำนักงานภาค (อังกฤษ) | \n||
|---|---|---|---|---|
| {item.regionId} | \n{item.regionNameTh} | \n{item.regionNameEn} | \n\n | \n \n | \n
\n
\n );\n\n return (\n \n
\n\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n \n \n \n
\n \n
\n );\n};\n\nexport default DepartmentManagement;\n","import React, { useState, useEffect, useMemo } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport Select from \"react-select\";\nimport DatePicker from \"react-datepicker\";\nimport { format } from \"date-fns\";\n\nconst ModalCRUDPerson = ({ title, detail, type, setIsAction }) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [isPreloadValues, setIsPreloadValues] = useState(false);\n const [isOnInit, setIsOnInit] = useState(false);\n\n const [startDate, setStartDate] = useState(\"\");\n const [endDate, setEndDate] = useState(\"\");\n const [provinceInput, setProvinceInput] = useState(false);\n const [districtInput, setDistrictInput] = useState(false);\n const [subDistrictInput, setSubDistrictInput] = useState(false);\n\n const [optionsPosition, setOptionsPosition] = useState([]);\n const [optionsStationCenters, setOptionsStationCenters] = useState([]);\n const [optionProvince, setOptionProvince] = useState([]);\n const [optionDistrict, setOptionDistrict] = useState([]);\n const [optionSubDistrict, setOptionSubDistrict] = useState([]);\n\n const [persons, setPersons] = useState([]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n minWidth: \"500px\",\n },\n };\n\n const fetchPersonDetail = async () => {\n if (detail) {\n setIsLoading(true);\n await dwrApi\n .get(`/Persons/${detail.personId}`)\n .then((res) => {\n setPersons(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n }\n };\n\n const optionsPrename = [\n { label: \"นาย\", value: 1 },\n { label: \"นาง\", value: 2 },\n { label: \"นางสาว\", value: 3 },\n ];\n\n const defaultValues = {\n preNameId: persons\n ? optionsPrename.find((item) => item.value == persons.preNameId)\n : \"\",\n firstName: persons ? persons.firstName : \"\",\n lastName: persons ? persons.lastName : \"\",\n email: persons ? persons.email : \"\",\n tels: persons ? persons.tels : \"\",\n postCode1: persons ? persons.postCode1 : \"\",\n address1: persons ? persons.address1 : \"\",\n isActive: persons && persons.active === \"Y\" ? true : false,\n positionId:\n persons && optionsPosition.length\n ? optionsPosition.find(\n (item) => item.value === persons?.position?.positionId\n )\n : \"\",\n stationCenterId:\n persons && optionsStationCenters.length\n ? optionsStationCenters.find(\n (item) => item.value === persons?.stationCenter?.stationCenterId\n )\n : \"\",\n provinceId:\n persons && optionProvince.length\n ? optionProvince.find(\n (item) => item.value == persons?.subDistrict1?.district?.provinceId\n )\n : \"\",\n districtId:\n persons && optionDistrict.length\n ? optionDistrict.find(\n (item) => item.value == persons?.subDistrict1?.district?.districtId\n )\n : \"\",\n subDistrictId1:\n persons && optionSubDistrict.length\n ? optionSubDistrict.find(\n (item) => item.value == persons?.subDistrict1?.subDistrictId\n )\n : \"\",\n };\n\n const {\n register,\n handleSubmit,\n reset,\n watch,\n control,\n setValue,\n formState: { errors },\n } = useForm();\n\n let anyError = Object.keys(errors).length;\n const provinceIdSelected = watch(\"provinceId\");\n const districtIdSelected = watch(\"districtId\");\n const subDistrictId1Selected = watch(\"subDistrictId1\");\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n setStartDate(\"\");\n setEndDate(\"\");\n reset();\n };\n\n const fetchPosition = async () => {\n setOptionsPosition([]);\n await dwrApi.get(\"/Positions\").then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.positionId,\n label: `${item.positionId} : ${item.positionName}`,\n };\n setOptionsPosition((optionsPosition) => [...optionsPosition, list]);\n });\n });\n };\n\n const fetchStationCenters = async () => {\n setOptionsStationCenters([]);\n await dwrApi.get(\"/StationCenters\").then((res) => {\n res.data.map((item) => {\n const list = {\n value: item.stationCenterId,\n label: `${item.stationCenterId} : ${item.stationCenterName}`,\n };\n setOptionsStationCenters((optionsStationCenters) => [\n ...optionsStationCenters,\n list,\n ]);\n });\n });\n };\n\n const fetchProvince = async () => {\n console.log(\"fetchProvince\");\n setOptionProvince([]);\n await dwrApi.get(`/Provinces`).then(async (res) => {\n const list = await res.data.map((item) => {\n return {\n value: item.provinceId,\n label: `${item.provinceId} : ${item.provinceTh}`,\n };\n });\n\n setOptionProvince(list);\n });\n };\n\n const fetchDistrict = async (provinceId) => {\n if (provinceId) {\n console.log(\"fetchDistrict\");\n setOptionDistrict([]);\n await dwrApi\n .get(`/Districts/Province/${provinceId}`)\n .then(async (res) => {\n const list = await res.data.map((item) => {\n return {\n value: item.districtId,\n label: `${item.districtId} : ${item.districtTh}`,\n };\n });\n\n setOptionDistrict(list);\n });\n }\n };\n\n const fetchSubDistrict = async (districtId) => {\n if (districtId) {\n console.log(\"fetchSubDistrict\");\n setOptionSubDistrict([]);\n await dwrApi\n .get(`/SubDistricts/District/${districtId}`)\n .then(async (res) => {\n const list = await res.data.map((item) => {\n return {\n value: item.subDistrictId,\n label: `${item.subDistrictId} : ${item.subDistrictTh}`,\n };\n });\n\n setOptionSubDistrict(list);\n });\n }\n };\n\n useEffect(async () => {\n if (modalIsOpen) {\n setIsOnInit(true);\n await fetchPersonDetail();\n await fetchPosition();\n await fetchStationCenters();\n await fetchProvince();\n if (detail) {\n await fetchPersonDetail();\n await fetchDistrict(detail?.subDistrict1?.district?.provinceId);\n await fetchSubDistrict(detail?.subDistrict1?.district?.districtId);\n }\n setIsPreloadValues(true);\n setIsOnInit(false);\n }\n }, [modalIsOpen]);\n\n useEffect(() => {\n if (isPreloadValues) {\n reset(defaultValues);\n setIsPreloadValues(false);\n }\n }, [isPreloadValues]);\n\n useEffect(() => {\n if (persons) {\n setStartDate(\n persons && persons.startDate ? new Date(persons.startDate) : \"\"\n );\n setEndDate(persons && persons.endDate ? new Date(persons.endDate) : \"\");\n }\n }, [persons]);\n\n useEffect(() => {\n if (provinceInput) {\n setValue(\"districtId\", null);\n setValue(\"subDistrictId1\", null);\n setOptionDistrict([]);\n setOptionSubDistrict([]);\n if (provinceIdSelected) {\n fetchDistrict(provinceIdSelected.value);\n }\n setProvinceInput(false);\n }\n }, [provinceInput]);\n\n useEffect(() => {\n if (districtInput) {\n setValue(\"subDistrictId1\", null);\n setOptionSubDistrict([]);\n if (districtIdSelected) {\n fetchSubDistrict(districtIdSelected.value);\n }\n setDistrictInput(false);\n }\n }, [districtInput]);\n\n console.log({ startDate });\n\n const onSubmit = (ev) => {\n console.log(\"subnit\");\n setIsLoading(true);\n\n let subUrl = \"/Persons\";\n\n const data = {\n preNameId: +ev.preNameId.value,\n firstName: ev.firstName,\n lastName: ev.lastName,\n email: ev.email,\n tels: ev.tels,\n startDate: format(new Date(startDate), \"yyyy-MM-dd\"),\n endDate: format(new Date(endDate), \"yyyy-MM-dd\"),\n subDistrictId1: ev.subDistrictId1.value,\n postCode1: ev.postCode1,\n address1: ev.address1,\n positionId: +ev.positionId.value,\n stationCenterId: +ev.stationCenterId.value,\n active: ev.isActive ? \"Y\" : \"N\",\n };\n\n if (type == \"add\") {\n dwrApi\n .post(`${subUrl}`, data)\n .then((res) => {\n addToast(เพิ่มข้อมูล{title}สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"edit\") {\n const dataEdit = {\n personId: detail ? +detail.personId : \"\",\n preNameId: +ev.preNameId.value,\n firstName: ev.firstName,\n lastName: ev.lastName,\n email: ev.email,\n tels: ev.tels,\n startDate: format(new Date(startDate), \"yyyy-MM-dd\"),\n endDate: format(new Date(endDate), \"yyyy-MM-dd\"),\n subDistrictId1: ev.subDistrictId1.value,\n postCode1: ev.postCode1,\n address1: ev.address1,\n positionId: +ev.positionId.value,\n stationCenterId: +ev.stationCenterId.value,\n active: ev.isActive ? \"Y\" : \"N\",\n };\n\n dwrApi\n .put(`${subUrl}/${detail?.personId}`, dataEdit)\n .then((res) => {\n addToast(แก้ไขข้อมูล{title}สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"delete\") {\n dwrApi\n .delete(`${subUrl}/${detail?.personId}`, data)\n .then((res) => {\n addToast(ลบข้อมูล{title}สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n if (err.response.status === 400 && title === \"เจ้าหน้าที่\") {\n addToast(\n\n ไม่สามารถลบข้อมูลได้ เนื่องจากรหัสผู้ใช้ถูกนำไปใช้งานแล้ว\n
,\n {\n appearance: \"error\",\n autoDismiss: true,\n }\n );\n } else {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n }\n })\n .finally(() => setIsLoading(false));\n }\n };\n\n const displayButtonOpenModal = (\n <>\n {type == \"add\" ? (\n\n เพิ่มข้อมูล\n
\n ) : (\n \"\"\n )}\n {type == \"edit\" ? (\n \n
\n );\n\n const displayContentDelete = (\n \n
\n\n \n
\n คำนำหน้า
\n \n (\n
\n \n
\n ชื่อ
\n \n
\n \n
\n นามสกุล
\n \n
\n \n
\n\n \n
\n ตำแหน่ง
\n \n (\n \n )}\n />\n
\n \n
\n\n \n
\n ศูนย์สำรวจ
\n \n (\n \n )}\n />\n
\n \n
\n\n \n
\n Email
\n \n
\n \n
\n เบอร์โทรศัพท์
\n \n
\n \n
\n\n \n
\n ที่อยู่ปัจจุบัน
\n \n
\n \n
\n\n \n
\n จังหวัด
\n \n {\n return (\n {\n setProvinceInput(true);\n field.onChange(ev);\n }}\n options={optionProvince}\n isClearable\n />\n );\n }}\n />\n
\n \n
\n อำเภอ
\n \n {\n return (\n {\n setDistrictInput(true);\n field.onChange(ev);\n }}\n options={optionDistrict}\n isClearable\n />\n );\n }}\n />\n
\n \n
\n\n \n
\n ตำบล
\n \n {\n return (\n {\n setSubDistrictInput(true);\n field.onChange(ev);\n }}\n options={optionSubDistrict}\n isClearable\n />\n );\n }}\n />\n
\n \n
\n รหัสไปรษณีย์
\n \n
\n \n
\n\n \n
\n วันที่ปฏิบัติงาน
\n \n
\n \n
\n วันสิ้นสุดปฏิบัติงาน
\n \n
\n \n
\n คุณต้องการลบข้อมูล{title}ที่เลือกใช่หรือไม่
\n );\n\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n {isOnInit && type === \"edit\" ? (\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDPerson;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport Pagination from \"react-js-pagination\";\nimport ModalCRUDPerson from \"../../../Components/ModalCRUDPerson\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\n\nconst PersonManagement = () => {\n const [persons, setPersons] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n\n const styles = {\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const fetchStaff = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/Persons\")\n .then((res) => {\n setPersons(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n const filterSearchFn = () => {\n if (persons.length) {\n const result = persons?.filter((item) => {\n const { firstName, lastName, stationCenter, tels, position } = item;\n return (\n stationCenter?.stationCenterName\n .toLowerCase()\n .includes(searchTerm?.toLowerCase()) ||\n position?.positionName\n .toLowerCase()\n .includes(searchTerm?.toLowerCase()) ||\n tels?.toLowerCase().includes(searchTerm?.toLowerCase()) ||\n firstName?.toLowerCase().includes(searchTerm?.toLowerCase()) ||\n lastName?.toLowerCase().includes(searchTerm?.toLowerCase())\n );\n });\n setFilterBySeachTerm(result);\n }\n };\n\n console.log({ persons });\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchStaff();\n }, [isAction]);\n\n useEffect(() => {\n filterSearchFn();\n }, [persons, searchTerm]);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displaylimitResults = (\n {displaySpiner} กรุณารอ
\n ) : (\n \"\"\n )}\n\n \n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n const displayPagination = (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displayManagement = (\n <>\n | ชื่อ | \nตำแหน่ง | \nศูนย์สำรวจ | \nเบอร์โทร | \n\n | \n \n | \n
|---|---|---|---|---|---|
| \n {item.firstName} {item.lastName}\n | \n{item.position?.positionName} | \n{item.stationCenter?.stationCenterName} | \n{item.tels} | \n\n | \n \n | \n
\n
\n );\n\n return (\n \n
\n\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n \n \n \n
\n \n
\n );\n};\n\nexport default PersonManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ModalCRUDMeteoType = ({ title, meteoDetail, type, setIsAction }) => {\n const [meteoTypes, setMeteoTypes] = useState([]);\n\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchMeteoTypesDetail = () => {\n setIsLoading(true);\n dwrApi\n .get(`/MeteoTypes/${meteoDetail.meteoTypeId}`)\n .then((res) => {\n setMeteoTypes(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n useEffect(() => {\n if (meteoDetail) fetchMeteoTypesDetail();\n }, [meteoDetail]);\n\n const defaultValues = {\n id: meteoTypes ? meteoTypes?.meteoTypeId : \"\",\n nameEn: meteoTypes ? meteoTypes?.meteoTypeEn : \"\",\n nameTh: meteoTypes ? meteoTypes?.meteoTypeTh : \"\",\n isActive: meteoTypes ? meteoTypes?.active : \"\",\n };\n\n const { register, handleSubmit, reset } = useForm();\n\n useEffect(() => {\n if (meteoTypes) reset(defaultValues);\n }, [meteoTypes]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n reset();\n };\n\n const onSubmit = async (ev) => {\n setIsLoading(true);\n\n let subUrl = \"/MeteoTypes\";\n\n const data = {\n meteoTypeId: meteoDetail ? meteoDetail.meteoTypeId : ev.id,\n meteoTypeEn: ev.nameEn,\n meteoTypeTh: ev.nameTh,\n active: ev.isActive,\n };\n\n if (type == \"add\") {\n await dwrApi\n .post(`${subUrl}`, data)\n .then((res) => {\n addToast(เพิ่ม{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"edit\") {\n await dwrApi\n .put(`${subUrl}/${meteoDetail.meteoTypeId}`, data)\n .then((res) => {\n addToast(แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"delete\") {\n await dwrApi\n .delete(`${subUrl}/${meteoDetail.meteoTypeId}`, data)\n .then((res) => {\n addToast(ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n }\n\n if (type !== \"delete\" && ev.isActive === \"N\") {\n await dwrApi\n .put(`${subUrl}/${meteoDetail.meteoTypeId}/UnActive`)\n .then(() => {\n console.log(\"UnActive done\");\n });\n }\n };\n\n const displayButtonOpenModal = (\n <>\n {type == \"add\" ? (\n\n เพิ่มข้อมูล\n
\n ) : (\n \"\"\n )}\n {type == \"edit\" ? (\n \n
\n );\n\n const displayContentDelete = (\n \n
\n สถานะการใช้งาน
\n \n
\n \n
\n \n
\n คุณต้องการลบ{title}ที่เลือกใช่หรือไม่
\n );\n\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDMeteoType;\n","import React, { useState, useEffect } from \"react\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport Pagination from \"react-js-pagination\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport ProtectGate from \"../Tools/ProtectGate/ProtectGate\";\nimport ModalCRUDMeteoType from \"./ModalCRUDMeteoType\";\n\nconst MeteoTypeManagement = ({ setIsLoading }) => {\n const [meteoTypes, setMeteoTypes] = useState([]);\n\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n\n const styles = {\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n\n header: {\n backgroundColor: \"#06538F\",\n height: \"35px\",\n color: \"white\",\n fontSize: \"22px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"200px\",\n margin: \"auto\",\n },\n };\n\n const fetchMeteoTypes = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/MeteoTypes\")\n .then((res) => {\n setMeteoTypes(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n const filterSearchFn = () => {\n if (meteoTypes.length) {\n const result = meteoTypes?.filter((item) => {\n return (\n item?.meteoTypeId?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n item?.meteoTypeTh?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n item?.meteoTypeEn?.toLowerCase().includes(searchTerm.toLowerCase())\n );\n });\n\n setFilterBySeachTerm(result);\n }\n };\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchMeteoTypes();\n }, [isAction]);\n\n useEffect(() => {\n filterSearchFn();\n }, [meteoTypes, searchTerm]);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displaylimitResults = (\n \n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n const displayPagination = (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displayMeteo = (\n <>\n | รหัสข้อมูลอุตุ | \nชื่อข้อมูลอุตุ (ไทย) | \nชื่อข้อมูลอุตุ (อังกฤษ) | \n\n | \n \n | \n
|---|---|---|---|---|
| {item.meteoTypeId} | \n{item.meteoTypeTh} | \n{item.meteoTypeEn} | \n\n | \n \n | \n
\n
\n );\n\n return (\n \n
\n\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n \n \n \n
\n \n {displayHeaderMeteo}\n {displaylimitResults}\n {displayMeteo}\n {displayPagination}\n
\n );\n};\n\nexport default MeteoTypeManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ModalCRUDHydroType = ({ title, detail, type, setIsAction }) => {\n const [hydroTypes, setHydroTypes] = useState([]);\n\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchHydroTypesDetail = () => {\n console.log(\"fetchHydroTypesDetail\");\n setIsLoading(true);\n dwrApi\n .get(`/HydroTypes/${detail.hydroTypeId}`)\n .then((res) => {\n setHydroTypes(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n useEffect(() => {\n if (detail) fetchHydroTypesDetail();\n }, [detail]);\n\n const defaultValues = {\n id: hydroTypes ? hydroTypes?.hydroTypeId : \"\",\n nameEn: hydroTypes ? hydroTypes?.hydroTypeEn : \"\",\n nameTh: hydroTypes ? hydroTypes?.hydroTypeTh : \"\",\n isActive: hydroTypes ? hydroTypes?.active : \"\",\n };\n\n const { register, handleSubmit, reset } = useForm({ defaultValues });\n\n useEffect(() => {\n if (hydroTypes) reset(defaultValues);\n }, [hydroTypes]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n reset();\n };\n\n const onSubmit = async (ev) => {\n setIsLoading(true);\n\n let subUrl = \"/HydroTypes\";\n\n const data = {\n hydroTypeId: detail ? detail.hydroTypeId : ev.id,\n hydroTypeEn: ev.nameEn,\n hydroTypeTh: ev.nameTh,\n active: ev.isActive,\n };\n\n if (type == \"add\") {\n await dwrApi\n .post(`${subUrl}`, data)\n .then((res) => {\n addToast(เพิ่ม{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"edit\") {\n await dwrApi\n .put(`${subUrl}/${detail.hydroTypeId}`, data)\n .then((res) => {\n addToast(แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"delete\") {\n await dwrApi\n .delete(`${subUrl}/${detail.hydroTypeId}`, data)\n .then((res) => {\n addToast(ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n }\n\n if (type !== \"delete\" && ev.isActive === \"N\") {\n await dwrApi.put(`${subUrl}/${detail.hydroTypeId}/UnActive`).then(() => {\n console.log(\"UnActive done\");\n });\n }\n };\n\n const displayButtonOpenModal = (\n <>\n {type == \"add\" ? (\n\n เพิ่มข้อมูล\n
\n ) : (\n \"\"\n )}\n {type == \"edit\" ? (\n \n
\n );\n\n const displayContentDelete = (\n \n
\n สถานะการใช้งาน
\n \n
\n \n
\n \n
\n คุณต้องการลบ{title}ที่เลือกใช่หรือไม่
\n );\n\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDHydroType;\n","import React, { useState, useEffect } from \"react\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport Pagination from \"react-js-pagination\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport ModalCRUDHydroType from \"./ModalCRUDHydroType\";\nimport ProtectGate from \"../Tools/ProtectGate/ProtectGate\";\n\nconst HydroTypeManagement = ({ setIsLoading }) => {\n const [hydroTypes, setHydroTypes] = useState([]);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n\n const styles = {\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n\n header: {\n backgroundColor: \"#06538F\",\n height: \"35px\",\n color: \"white\",\n fontSize: \"22px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"200px\",\n margin: \"auto\",\n },\n };\n\n const fetchHydroTypes = () => {\n setIsLoading(true);\n dwrApi\n .get(\"HydroTypes\")\n .then((res) => {\n setHydroTypes(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n const filterSearchFn = () => {\n if (hydroTypes.length) {\n const result = hydroTypes?.filter((item) => {\n return (\n item?.hydroTypeId?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n item?.hydroTypeTh?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n item?.hydroTypeEn?.toLowerCase().includes(searchTerm.toLowerCase())\n );\n });\n\n setFilterBySeachTerm(result);\n }\n };\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchHydroTypes();\n }, [isAction]);\n\n useEffect(() => {\n filterSearchFn();\n }, [hydroTypes, searchTerm]);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displaylimitResults = (\n \n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n const displayPagination = (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displayHydro = (\n <>\n | รหัสข้อมูลอุทก | \nชื่อข้อมูลอุทก (ไทย) | \nชื่อข้อมูลอุทก (อังกฤษ) | \n\n | \n \n | \n
|---|---|---|---|---|
| {item.hydroTypeId} | \n{item.hydroTypeTh} | \n{item.hydroTypeEn} | \n\n | \n \n | \n
\n
\n );\n\n return (\n \n
\n\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n \n \n \n
\n \n {displayHeaderHydro}\n {displaylimitResults}\n {displayHydro}\n {displayPagination}\n
\n );\n};\n\nexport default HydroTypeManagement;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport MeteoTypeManagement from \"../../../Components/MeteoTypeManagement\";\nimport HydroTypeManagement from \"../../../Components/HydroTypeManagement\";\n\nconst StationTypeManagement = () => {\n const [isLoading, setIsLoading] = useState(false);\n const [activeType, setActiveType] = useState(\"1\");\n\n const styles = {\n activeHeader: {\n backgroundColor: \"#06538F\",\n color: \"white\",\n fontSize: \"22px\",\n width: \"200px\",\n margin: \"auto 10px\",\n },\n inActiveHeader: {\n backgroundColor: \"white\",\n color: \"#06538F\",\n fontSize: \"22px\",\n width: \"200px\",\n margin: \"auto 10px\",\n border: \"1px solid #06538F\",\n },\n };\n\n const displayToggleTabs = (\n \n setActiveType(ev.target.value)}\n />\n \n ข้อมูลอุทกวิทยา\n \n setActiveType(ev.target.value)}\n />\n \n ข้อมูลอุตุนิยมวิทยา\n \n
\n );\n\n return (\n \n
\n );\n};\n\nexport default StationTypeManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport Select from \"react-select\";\nimport { useSelector } from \"react-redux\";\n\nconst ModalCRUDSubBasin = ({\n title,\n subBasinDetail,\n type,\n setIsAction,\n optionsBasin,\n}) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [basinSelected, setBasinSelected] = useState(\"\");\n const [subBasinResults, setSubBasinResults] = useState([]);\n const userDetail = useSelector((state) => state.profileReducer.userDetail);\n\n const fetchSubBasinDetail = () => {\n setIsLoading(true);\n dwrApi\n .get(`/SubBasins/${subBasinDetail.subBasinId}`)\n .then((res) => {\n setSubBasinResults(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => setIsLoading(false));\n };\n\n useEffect(() => {\n if (subBasinDetail && modalIsOpen) fetchSubBasinDetail();\n }, [subBasinDetail, modalIsOpen]);\n\n const defaultValues = {\n id: subBasinResults ? subBasinResults?.subBasinId : \"\",\n nameEn: subBasinResults ? subBasinResults?.subBasinEn : \"\",\n nameTh: subBasinResults ? subBasinResults?.subBasinTh : \"\",\n };\n\n const { register, handleSubmit, reset } = useForm();\n\n useEffect(() => {\n reset(defaultValues);\n }, [subBasinResults]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n setBasinSelected(\"\");\n reset();\n };\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n\n let subUrl = \"/SubBasins\";\n\n const data = {\n basinId: basinSelected.value,\n subBasinId: subBasinDetail ? subBasinDetail.subBasinId : ev.id,\n subBasinEn: ev.nameEn,\n subBasinTh: ev.nameTh,\n // updateUser: userDetail?.fullName,\n // updateDate: new Date(),\n };\n\n if (type == \"add\") {\n dwrApi\n .post(`${subUrl}`, data)\n .then((res) => {\n addToast(เพิ่ม{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"edit\") {\n dwrApi\n .put(`${subUrl}/${subBasinDetail.subBasinId}`, data)\n .then((res) => {\n addToast(แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"delete\") {\n dwrApi\n .delete(`${subUrl}/${subBasinDetail.subBasinId}`, data)\n .then((res) => {\n addToast(ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n }\n };\n\n const setDefaultBasinFn = () => {\n const result = optionsBasin.filter(\n (item) => item.value == subBasinDetail.basinId\n );\n\n if (result.length) setBasinSelected(result[0]);\n };\n\n useEffect(() => {\n if (subBasinDetail) setDefaultBasinFn();\n }, [subBasinDetail, optionsBasin]);\n\n const displayButtonOpenModal = (\n <>\n {type == \"add\" ? (\n\n เพิ่มข้อมูล\n
\n ) : (\n \"\"\n )}\n {type == \"edit\" ? (\n \n (ev ? setBasinSelected(ev) : setBasinSelected(\"\"))}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable\n />\n\n
\n );\n\n const displayContentDelete = (\n คุณต้องการลบ{title}ที่เลือกใช่หรือไม่
\n );\n\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDSubBasin;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport { Link, useHistory, Route, Redirect } from \"react-router-dom\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport Pagination from \"react-js-pagination\";\nimport ModalCRUDSubBasin from \"../../../Components/ModalCRUDSubBasin\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\n\nconst SubBasinManagement = () => {\n const [subBasinResults, setSubBasinResults] = useState([]);\n const [optionsBasin, setOptionsBasin] = useState([]);\n\n const [isLoading, setIsLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n\n const styles = {\n searchContainer: {},\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const fetchBasins = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/Basins\")\n .then((res) => {\n const options = res.data.map((item) => {\n return {\n value: item.basinId,\n label: item.basinTh,\n };\n });\n setOptionsBasin(options);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => setIsLoading(false));\n };\n\n const fetchSubBasins = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/SubBasins\")\n .then((res) => {\n console.log(res.data);\n setSubBasinResults(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n const filterSearchFn = () => {\n if (subBasinResults.length) {\n const result = subBasinResults?.filter((item) => {\n // console.log({item, searchTerm})\n const {subBasinTh, subBasinId, subBasinEn, basin} = item;\n return (\n basin?.basinTh?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n subBasinTh?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n subBasinId?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n subBasinEn?.toLowerCase().includes(searchTerm.toLowerCase())\n );\n });\n console.log(result);\n setFilterBySeachTerm(result);\n }\n };\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchBasins();\n }, []);\n useEffect(() => {\n fetchSubBasins();\n }, [isAction]);\n\n useEffect(() => {\n filterSearchFn();\n }, [subBasinResults, searchTerm]);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displaylimitResults = (\n \n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n const displayPagination = (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displayManagement = (\n <>\n | รหัสลุ่มน้ำสาขา | \nชื่อลุ่มน้ำสาขา (ไทย) | \nชื่อลุ่มน้ำสาขา (อังกฤษ) | \nลุ่มน้ำ | \n||
|---|---|---|---|---|---|
| {item.subBasinId} | \n{item.subBasinTh} | \n{item.subBasinEn} | \n{item.basin.basinTh} | \n\n | \n \n | \n
\n
\n );\n\n return (\n \n
\n\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n \n \n \n
\n \n
\n );\n};\n\nexport default SubBasinManagement;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle, FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\nimport Select from \"react-select\";\n\nconst ModalCRUDMachine = ({ title, machineDetail, type, setIsAction }) => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [optionsMachine, setOptionsMachine] = useState([]);\n const [optionsGroupTypes, setOptionsGroupTypes] = useState([]);\n const [machineSelected, setMachineSelected] = useState(\"\");\n const [groupTypesSelected, setGroupTypesSelected] = useState(\"\");\n\n const [machineResults, setMachineResults] = useState([]);\n\n const fetchMachineDetail = () => {\n setIsLoading(true);\n dwrApi\n .get(`/Machines/${machineDetail.machineId}`)\n .then((res) => {\n setMachineResults(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n useEffect(() => {\n if (machineDetail) fetchMachineDetail();\n }, [machineDetail]);\n\n const defaultValues = {\n nameEn: machineResults ? machineResults?.machineEn : \"\",\n nameTh: machineResults ? machineResults?.machineTh : \"\",\n };\n\n const { register, handleSubmit, reset, control, setValue } = useForm();\n\n useEffect(() => {\n if (machineResults) reset(defaultValues);\n }, [machineResults]);\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n // minHeight: \"300px\",\n\n minWidth: \"400px\",\n },\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n setIsAction(true);\n reset();\n };\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n\n let subUrl = \"/Machines\";\n\n const data = {\n machineTypeId: ev.machineSelected.value,\n groupId: ev.groupTypesSelected.value,\n machineEn: ev.nameEn,\n machineTh: ev.nameTh,\n };\n\n if (type == \"add\") {\n dwrApi\n .post(`${subUrl}`, data)\n .then((res) => {\n addToast(เพิ่ม{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"edit\") {\n dwrApi\n .put(`${subUrl}/${machineDetail.machineId}`, {\n ...data,\n machineId: +machineDetail.machineId,\n })\n .then((res) => {\n addToast(แก้ไข{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n } else if (type == \"delete\") {\n dwrApi\n .delete(`${subUrl}/${machineDetail.machineId}`, data)\n .then((res) => {\n addToast(ลบ{title} สำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n closeModal();\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => setIsLoading(false));\n }\n };\n\n const fetchMachine = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/MachineTypes\")\n .then((res) => {\n const options = res.data.map((item) => {\n return {\n value: item.machineTypeId,\n label: item.machineTypeTh,\n };\n });\n setOptionsMachine(options);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => setIsLoading(false));\n };\n\n const fetchGroupType = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/GroupTypes\")\n .then((res) => {\n const options = res.data.map((item) => {\n return {\n value: item.groupId,\n label: item.groupTh || \"-\",\n };\n });\n setOptionsGroupTypes(options);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => setIsLoading(false));\n };\n\n const setDefaultMachine = () => {\n const result = optionsMachine.find(\n (item) => item.value == machineResults?.machineTypeId\n );\n\n if (result) {\n setValue(\"machineSelected\", result);\n }\n };\n\n const setDefaulGroupTypes = () => {\n const result = optionsGroupTypes.find(\n (item) => item.value == machineResults.groupId\n );\n\n if (result) {\n setValue(\"groupTypesSelected\", result);\n }\n };\n\n useEffect(() => {\n if (machineResults) setDefaultMachine();\n }, [machineResults, optionsMachine]);\n\n useEffect(() => {\n if (machineResults) setDefaulGroupTypes();\n }, [machineResults, optionsGroupTypes]);\n\n useEffect(() => {\n fetchMachine();\n fetchGroupType();\n }, []);\n\n const displayButtonOpenModal = (\n <>\n {type == \"add\" ? (\n\n เพิ่มข้อมูล\n
\n ) : (\n \"\"\n )}\n {type == \"edit\" ? (\n \n (\n \"ไม่พบข้อมูล\"}\n isClearable\n options={optionsMachine}\n className=\"my-4\"\n placeholder=\"เลือกชนิดเครื่องมือ\"\n />\n )}\n />\n (\n \"ไม่พบข้อมูล\"}\n isClearable\n options={optionsGroupTypes}\n className=\"my-4\"\n placeholder=\"เลือกกลุ่มข้อมูล\"\n />\n )}\n />\n\n
\n );\n\n const displayContentDelete = (\n คุณต้องการลบ{title}ที่เลือกใช่หรือไม่
\n );\n\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n \n {displayButtonOpenModal}\n \n {displayHeader}\n
\n \n \n \n \n );\n};\n\nexport default ModalCRUDMachine;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { FaTrashAlt, FaSearch, FaPencilAlt } from \"react-icons/fa\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport Pagination from \"react-js-pagination\";\nimport ModalCRUDMachine from \"../../../Components/ModalCRUDMachine\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\n\nconst MachineManagement = () => {\n const [machineResults, setMachineResults] = useState([]);\n\n const [isLoading, setIsLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [page, setPage] = useState(1);\n const [itemPerPage, setItemPerPage] = useState(10);\n const [filterBySearchTerm, setFilterBySeachTerm] = useState([]);\n const [sliceResult, setSliceResult] = useState([]);\n const [isAction, setIsAction] = useState(false);\n\n const styles = {\n buttonSearch: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const fetchMachine = () => {\n setIsLoading(true);\n dwrApi\n .get(\"/Machines\")\n .then((res) => {\n setMachineResults(res.data);\n })\n .catch((err) => {\n console.log(err);\n })\n .finally(() => {\n setIsLoading(false);\n setIsAction(false);\n });\n };\n\n const filterSearchFn = () => {\n if (machineResults.length) {\n const result = machineResults?.filter((item) => {\n const { machineType, group, machineTh, machineEn } = item;\n return (\n machineTh?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n machineEn?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n machineType?.machineTypeTh?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n group.groupTh?.toLowerCase().includes(searchTerm.toLowerCase())\n );\n });\n\n setFilterBySeachTerm(result);\n }\n };\n\n const sliceResultFn = (page) => {\n let start = page * itemPerPage - itemPerPage;\n let end = page * itemPerPage;\n\n setSliceResult(filterBySearchTerm.slice(start, end));\n };\n\n useEffect(() => {\n fetchMachine();\n }, [isAction]);\n\n useEffect(() => {\n filterSearchFn();\n }, [machineResults, searchTerm]);\n\n useEffect(() => {\n setPage(1);\n }, [searchTerm, itemPerPage]);\n\n useEffect(() => {\n sliceResultFn(page);\n }, [filterBySearchTerm, page, itemPerPage]);\n\n const displaylimitResults = (\n \n แสดง\n setItemPerPage(ev.target.value)}\n defaultValue={itemPerPage}\n className=\"mx-2 form-select\"\n style={{ width: \"fit-content\" }}\n >\n \n \n \n \n \n \n\n แถว\n
\n );\n\n const displayPagination = (\n \n setPage(pageNumber)}\n itemClass=\"page-item\"\n linkClass=\"page-link\"\n nextPageText=\"ถัดไป\"\n prevPageText=\"ก่อนหน้า\"\n />\n
\n );\n\n const displayManagement = (\n <>\n | ชื่อเครื่องมือ (ไทย) | \nชื่อเครื่องมือ (อังกฤษ) | \nชนิดเครื่องมือ | \nกลุ่มข้อมูล | \n||
|---|---|---|---|---|---|
| {item.machineTh} | \n{item.machineEn} | \n{item.machineType?.machineTypeTh} | \n{item.group?.groupTh} | \n\n | \n \n | \n
\n
\n );\n\n return (\n \n
\n\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n \n \n \n
\n \n
\n );\n};\n\nexport default MachineManagement;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport { useSelector } from \"react-redux\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nconst ReportMeteoAuto = () => {\n const optionsTime = [\n { label: \"ราย 15 นาที\", value: \"1\", type: \"date\" },\n { label: \"รายชั่วโมง\", value: \"2\", type: \"month\" },\n { label: \"รายวัน\", value: \"3\", type: \"year\" },\n /* { label: \"รายปี\", value: \"3\", type: \"year\" }, */\n ];\n const [allBasin, setAllBasin] = useState(\"\");\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationsOfBasin, setStationsOfBasin] = useState([]);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationDetail, setStationDetail] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [displayReport, setDisplayReport] = useState(false);\n\n const [timeSelected, setTimeSelected] = useState(optionsTime[0]);\n const [timeFormat, setTimeFormat] = useState(\"\");\n const [reportUrl, setReportUrl] = useState(\"\");\n const localReportUrl = localStorage.getItem(\"reportUrl\");\n const [disableBtn, setDisableBtn] = useState(false);\n\n const userId = useSelector((state) => state.profileReducer.userData.sub);\n\n const token = localStorage.getItem(\"token\");\n const [optionsMeteo, setOptionsMeteo] = useState([]);\n const [stationSelected, setStationSelected] = useState([]);\n const [meteoDataTypeSelected, setMeteoDataTypeSelected] = useState(\"\");\n\n // let optionsBasin = [];\n let optionsStationsOfBasin = [];\n // let stationSelected = [];\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n };\n\n // const fetchAllBasin = () => {\n // dwrApi\n // .get(\"/Basins\")\n // .then((res) => {\n // setAllBasin(res.data);\n // })\n // .catch((err) => {\n // console.log(err.message);\n // });\n // };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations/Meteo?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n const autoStationList = res.data.filter(\n (station) => station.stationTypeId === 2\n );\n setStationsOfBasin(autoStationList);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n // useEffect(() => {\n // fetchAllBasin();\n // }, []);\n\n useEffect(() => {\n fetchStationOfBasin();\n }, [basinIdSelected]);\n\n // if (allBasin) {\n // allBasin.forEach((basin) => {\n // if (basin.basinTh) {\n // const list = {\n // value: basin.basinId,\n // label: `${basin.basinId} : ${basin.basinTh}`,\n // };\n // optionsBasin.push(list);\n // }\n // });\n // }\n\n if (stationsOfBasin) {\n stationsOfBasin.forEach((station) => {\n if (station.stationTh) {\n const list = {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh}`,\n };\n optionsStationsOfBasin.push(list);\n }\n });\n }\n\n const getStationDetail = () => {\n const res = stationsOfBasin.filter((station) => {\n return station.stationId == stationIdSelected.value;\n });\n\n setStationSelected(res);\n };\n\n const getMeteoType = () => {\n let listMeteo = [];\n stationSelected[0]?.configDataStation?.map((item) => {\n if (\n !!item.meteotype &&\n !listMeteo\n .map((item) => item.value)\n .includes(item.meteotype.meteoTypeId)\n ) {\n listMeteo.push({\n value: item.meteotype.meteoTypeId,\n label: item.meteotype.meteoTypeTh || \"\",\n });\n }\n });\n setOptionsMeteo(listMeteo);\n };\n\n useEffect(() => {\n if (stationSelected) getMeteoType();\n }, [stationSelected]);\n\n useEffect(() => {\n if (stationIdSelected) {\n getStationDetail();\n }\n }, [stationIdSelected]);\n\n useEffect(() => {\n setStationIdSelected(\"\");\n setTimeSelected(\"\");\n setTimeFormat(\"\");\n setMeteoDataTypeSelected(\"\");\n }, [basinIdSelected]);\n\n useEffect(() => {\n setTimeSelected(null);\n setTimeFormat(\"\");\n setMeteoDataTypeSelected(\"\");\n }, [stationIdSelected]);\n\n useEffect(() => {\n setTimeFormat(\"\");\n }, [timeSelected]);\n\n useEffect(() => {\n setTimeFormat(\"\");\n }, [meteoDataTypeSelected]);\n\n useEffect(() => {\n setDisplayReport(false);\n setDisableBtn(false);\n }, [\n stationIdSelected,\n basinIdSelected,\n timeSelected,\n timeFormat,\n meteoDataTypeSelected,\n ]);\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n setDisplayReport(true);\n setIsLoading(true);\n\n const baseUrl = `${localReportUrl}/frmMeteo.aspx?`;\n\n const funcId = \"2905\";\n const getYear = new Date(timeFormat).getFullYear();\n\n const url = `${baseUrl}station_id=${\n stationIdSelected.value\n }&UserId=${userId}&ServerTime=${convertDate(timeFormat)}&MeteoTypeId=${\n meteoDataTypeSelected.value\n }&type=${timeSelected.value}&token=${token}&functionid=${funcId}`;\n const urlTypeYear = `${baseUrl}station_id=${stationIdSelected.value}&UserId=${userId}&YearSelect=${getYear}&MeteoTypeId=${meteoDataTypeSelected.value}&type=${timeSelected.value}&token=${token}&functionid=${funcId}`;\n\n if (timeSelected.value == \"3\") {\n setReportUrl(urlTypeYear);\n } else {\n setReportUrl(url);\n }\n\n setDisableBtn(true);\n };\n\n const onHandleLoad = (ev) => {\n const { returnValue } = ev.nativeEvent;\n\n if (returnValue) {\n setIsLoading(false);\n }\n };\n\n const displayForm = (\n \n \n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default ReportMeteoAuto;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport { useSelector } from \"react-redux\";\n\nimport { FaCalendarAlt } from \"react-icons/fa\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nconst ReportMeteoDaily = () => {\n const [allBasin, setAllBasin] = useState(\"\");\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationsOfBasin, setStationsOfBasin] = useState([]);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationDetail, setStationDetail] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [displayReport, setDisplayReport] = useState(false);\n\n const [timeFormat, setTimeFormat] = useState(\"\");\n const [reportUrl, setReportUrl] = useState(\"\");\n const localReportUrl = localStorage.getItem(\"reportUrl\");\n\n const userId = useSelector((state) => state.profileReducer.userData.sub);\n\n const token = localStorage.getItem(\"token\");\n const [optionsMeteo, setOptionsMeteo] = useState([]);\n const [stationSelected, setStationSelected] = useState([]);\n const [meteoDataTypeSelected, setMeteoDataTypeSelected] = useState({});\n const [measureTime, setMeasureTime] = useState(\"\");\n const [disableBtn, setDisableBtn] = useState(false);\n\n // let optionsBasin = [];\n let optionsStationsOfBasin = [];\n // let stationSelected = [];\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"30px\",\n top: \"10px\",\n zIndex: 9,\n },\n };\n\n // const fetchAllBasin = () => {\n // dwrApi\n // .get(\"/Basins\")\n // .then((res) => {\n // setAllBasin(res.data);\n // })\n // .catch((err) => {\n // console.log(err.message);\n // });\n // };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations/Meteo?StationTypeId=1&BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n // useEffect(() => {\n // fetchAllBasin();\n // }, []);\n\n useEffect(() => {\n fetchStationOfBasin();\n }, [basinIdSelected]);\n\n // if (allBasin) {\n // allBasin.forEach((basin) => {\n // if (basin.basinTh) {\n // const list = {\n // value: basin.basinId,\n // label: `${basin.basinId} : ${basin.basinTh}`,\n // };\n // optionsBasin.push(list);\n // }\n // });\n // }\n\n if (stationsOfBasin) {\n stationsOfBasin.forEach((station) => {\n if (station.stationTh) {\n const list = {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh}`,\n configDataStation: station.configDataStation || [],\n };\n optionsStationsOfBasin.push(list);\n }\n });\n }\n\n const getStationDetail = () => {\n const res = stationsOfBasin.filter((station) => {\n return station.stationId == stationIdSelected.value;\n });\n\n setStationSelected(res);\n };\n\n // console.log(\"a\", stationSelected[0]?.configDataStation);\n\n const getMeteoType = () => {\n let listMeteo = [];\n stationSelected[0]?.configDataStation?.map((item) => {\n if (\n !!item.meteotype &&\n !listMeteo\n .map((item) => item.value)\n .includes(item.meteotype.meteoTypeId)\n ) {\n listMeteo.push({\n value: item.meteotype.meteoTypeId || null,\n label: item.meteotype.meteoTypeTh || \"\",\n });\n }\n });\n setOptionsMeteo(listMeteo);\n };\n\n useEffect(() => {\n // console.log({ stationIdSelected, stationsOfBasin })\n if (stationIdSelected) {\n getStationDetail();\n }\n }, [stationIdSelected]);\n\n useEffect(() => {\n if (meteoDataTypeSelected) {\n let station = stationsOfBasin.find(\n (station) => station.stationId === stationIdSelected.value\n ) || { configDataStation: [] };\n // console.log({ station });\n\n let mt = station.configDataStation.find((item) => {\n return item.meteotypeId === meteoDataTypeSelected.value;\n });\n if (mt) {\n // console.log({ mt })\n setMeasureTime(mt.measureTimeId);\n }\n }\n }, [meteoDataTypeSelected]);\n\n useEffect(() => {\n if (stationSelected) {\n getMeteoType();\n }\n }, [stationSelected]);\n\n useEffect(() => {\n setStationIdSelected(\"\");\n setTimeFormat(\"\");\n setMeteoDataTypeSelected(\"\");\n }, [basinIdSelected]);\n\n useEffect(() => {\n setTimeFormat(\"\");\n setMeteoDataTypeSelected(\"\");\n }, [stationIdSelected]);\n\n useEffect(() => {\n setTimeFormat(\"\");\n }, [meteoDataTypeSelected]);\n\n useEffect(() => {\n console.log(\"use effect\");\n setDisplayReport(false);\n setDisableBtn(false);\n }, [stationIdSelected, basinIdSelected, timeFormat, meteoDataTypeSelected]);\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n setIsLoading(true);\n setDisplayReport(true);\n const baseUrl = `${localReportUrl}/frmMeteoHourly.aspx?`;\n const funcId = \"2906\";\n const getDate = new Date(timeFormat);\n const serverTime = `${getDate.getFullYear()}-${getDate.getMonth() + 1}-01`;\n\n const url = `${baseUrl}station_id=${stationIdSelected.value}&UserId=${userId}&MeasureTimeId=${measureTime}&RecordDate=${serverTime}&MeteoTypeID=${meteoDataTypeSelected.value}&token=${token}&functionid=${funcId}`;\n\n setReportUrl(url);\n // setIsLoading(false);\n setDisableBtn(true);\n };\n\n const onHandleLoad = (ev) => {\n const { returnValue } = ev.nativeEvent;\n\n if (returnValue) {\n setIsLoading(false);\n }\n };\n\n const displayForm = (\n \n {displayForm}\n
\n \n {displayReport ? (\n
\n \n \n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default ReportMeteoDaily;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport { useSelector } from \"react-redux\";\n// import { FaCalendarAlt } from \"react-icons/fa\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nconst ReportMeteoMonthly = () => {\n // const [allBasin, setAllBasin] = useState(\"\");\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationsOfBasin, setStationsOfBasin] = useState([]);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationDetail, setStationDetail] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [displayReport, setDisplayReport] = useState(false);\n\n const [timeFormat, setTimeFormat] = useState(\"\");\n const [reportUrl, setReportUrl] = useState(\"\");\n const localReportUrl = localStorage.getItem(\"reportUrl\");\n\n const userId = useSelector((state) => state.profileReducer.userData.sub);\n\n const token = localStorage.getItem(\"token\");\n const [optionsMeteo, setOptionsMeteo] = useState([]);\n const [stationSelected, setStationSelected] = useState([]);\n const [meteoDataTypeSelected, setMeteoDataTypeSelected] = useState(\"\");\n const [disableBtn, setDisableBtn] = useState(false);\n\n // let optionsBasin = [];\n let optionsStationsOfBasin = [];\n // let stationSelected = [];\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"30px\",\n top: \"10px\",\n zIndex: 9,\n },\n };\n\n // const fetchAllBasin = () => {\n // dwrApi\n // .get(\"/Basins\")\n // .then((res) => {\n // setAllBasin(res.data);\n // })\n // .catch((err) => {\n // console.log(err.message);\n // });\n // };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations/Meteo?StationTypeId=1&BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n // useEffect(() => {\n // fetchAllBasin();\n // }, []);\n\n useEffect(() => {\n fetchStationOfBasin();\n }, [basinIdSelected]);\n\n // if (allBasin) {\n // allBasin.forEach((basin) => {\n // if (basin.basinTh) {\n // const list = {\n // value: basin.basinId,\n // label: `${basin.basinId} : ${basin.basinTh}`,\n // };\n // optionsBasin.push(list);\n // }\n // });\n // }\n\n if (stationsOfBasin) {\n stationsOfBasin.forEach((station) => {\n if (station.stationTh) {\n const list = {\n value: station.stationId,\n label: `${station.stationLabel} : ${station.stationTh}`,\n };\n optionsStationsOfBasin.push(list);\n }\n });\n }\n\n const getStationDetail = () => {\n const res = stationsOfBasin.filter((station) => {\n return station.stationId == stationIdSelected.value;\n });\n\n setStationSelected(res);\n };\n\n const getMeteoType = () => {\n let listMeteo = [];\n stationSelected[0]?.configDataStation?.map((item) => {\n if (\n !!item.meteotype &&\n !listMeteo\n .map((item) => item.value)\n .includes(item.meteotype.meteoTypeId)\n ) {\n listMeteo.push({\n value: item.meteotype.meteoTypeId || null,\n label: item.meteotype.meteoTypeTh || \"\",\n });\n }\n });\n setOptionsMeteo(listMeteo);\n };\n\n useEffect(() => {\n if (stationIdSelected) getStationDetail();\n }, [stationIdSelected]);\n\n useEffect(() => {\n if (stationSelected) getMeteoType();\n }, [stationSelected]);\n\n useEffect(() => {\n setStationIdSelected(\"\");\n setTimeFormat(\"\");\n setMeteoDataTypeSelected(null);\n }, [basinIdSelected]);\n\n useEffect(() => {\n setTimeFormat(\"\");\n setMeteoDataTypeSelected(null);\n }, [stationIdSelected]);\n\n useEffect(() => {\n setTimeFormat(\"\");\n }, [meteoDataTypeSelected]);\n\n useEffect(() => {\n setDisplayReport(false);\n setDisableBtn(false);\n }, [stationIdSelected, basinIdSelected, timeFormat, meteoDataTypeSelected]);\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n setDisplayReport(true);\n setIsLoading(true);\n const baseUrl = `${localReportUrl}/frmMeteo.aspx?`;\n\n const funcId = \"2907\";\n const yearSelect = new Date(timeFormat).getFullYear();\n\n const urlTypeYear = `${baseUrl}station_id=${stationIdSelected.value}&UserId=${userId}&YearSelect=${yearSelect}&MeteoTypeId=${meteoDataTypeSelected.value}&type=4&token=${token}&functionid=${funcId}`;\n\n setReportUrl(urlTypeYear);\n\n setDisableBtn(true);\n };\n\n const onHandleLoad = (ev) => {\n const { returnValue } = ev.nativeEvent;\n\n if (returnValue) {\n setIsLoading(false);\n }\n };\n const displayForm = (\n \n {displayForm}\n
\n \n {displayReport ? (\n
\n \n \n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default ReportMeteoMonthly;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { useForm, Controller } from \"react-hook-form\";\n\nimport { dwrApi } from \"../../../api/dwrApi\";\n\nconst ReportSummary = () => {\n const token = localStorage.getItem(\"token\");\n const [searchType, setSearchType] = useState(\"\");\n const [optionsBasin, setOptionsBasin] = useState([]);\n const [optionsStationCenter, setOptionsStationCenter] = useState([]);\n const [optionsSubBasin, setOptionsSubBasin] = useState([]);\n const [optionsStation, setOptionsStation] = useState([]);\n const [optionsProvince, setOptionsProvince] = useState([]);\n const [reportUrl, setReportUrl] = useState(\"\");\n const [disableThaiBtn, setDisableThaiBtn] = useState(false);\n const [disableEngBtn, setDisableEngBtn] = useState(false);\n\n const { register, handleSubmit, control, reset, watch, setValue } = useForm();\n const localReportUrl = localStorage.getItem(\"reportUrl\");\n const watchValue = watch();\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n };\n\n const onSubmit = (ev, lang) => {\n const funcId = 2102;\n\n let baseUrl;\n if (lang === 1) {\n baseUrl = `${localReportUrl}/frmSearchStation.aspx?`;\n setDisableThaiBtn(true);\n setDisableEngBtn(false);\n } else {\n baseUrl = `${localReportUrl}/frmstation.aspx?`;\n setDisableThaiBtn(false);\n setDisableEngBtn(true);\n }\n\n let subUrl;\n if (searchType == \"station\") {\n // subUrl = `/stationId/${ev.station}`;\n subUrl = `OptionSel=station&Value=${ev.station}`;\n } else if (searchType == \"basin\") {\n // subUrl = `/basinId/${ev.basin.value}`;\n subUrl = `OptionSel=basin&Value=${ev.basin.value}`;\n } else if (searchType == \"subBasin\") {\n // subUrl = `/subBasinId/${ev.subBasin.value}`;\n subUrl = `OptionSel=subbasin&Value=${ev.subBasin.value}`;\n } else if (searchType == \"province\") {\n // subUrl = `/provinceId/${ev.province.value}`;\n subUrl = `OptionSel=province&Value=${ev.province.value}`;\n } else if (searchType == \"stationCenter\") {\n subUrl = `optionsel=stationcenter&value=${ev.stationCenter.value}`;\n }\n\n let fullUrl = `${baseUrl}${subUrl}&token=${token}&functionid=${funcId}`;\n\n setReportUrl(fullUrl);\n };\n\n const fetchOptionsStation = () => {\n dwrApi\n .get(\"/Stations\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.stationTh,\n value: item.stationId,\n };\n });\n\n setOptionsStation(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n const fetchOptionsStationCenter = () => {\n dwrApi\n .get(\"/StationCenters\")\n .then((res) => {\n console.log(\"StationCenters\", res);\n const list = res.data.map((item) => {\n return {\n label: `${item.stationCenterId} : ${item.stationCenterName}`,\n value: item.stationCenterId,\n };\n });\n\n setOptionsStationCenter(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchOptionsBasin = () => {\n dwrApi\n .get(\"/Basins\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.basinTh,\n value: item.basinId,\n };\n });\n\n setOptionsBasin(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n const fetchOptionsSubBasins = () => {\n dwrApi\n .get(\"/subBasins\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.subBasinTh,\n value: item.subBasinId,\n };\n });\n\n setOptionsSubBasin(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n const fetchOptionsProvinces = () => {\n dwrApi\n .get(\"/Provinces\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.provinceTh,\n value: item.provinceId,\n };\n });\n\n setOptionsProvince(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n fetchOptionsStationCenter();\n fetchOptionsStation();\n fetchOptionsBasin();\n fetchOptionsSubBasins();\n fetchOptionsProvinces();\n }, []);\n\n const onHandleSelectType = (ev) => {\n setSearchType(ev.target.value);\n };\n\n useEffect(() => {\n if (searchType) {\n setValue(\"station\", null);\n setValue(\"basin\", null);\n setValue(\"subBasin\", null);\n setValue(\"province\", null);\n setValue(\"stationCenter\", null);\n }\n }, [searchType]);\n\n useEffect(() => {\n setDisableThaiBtn(false);\n setDisableEngBtn(false);\n }, [\n watchValue.station,\n watchValue.basin,\n watchValue.subBasin,\n watchValue.province,\n watchValue.stationCenter,\n searchType,\n ]);\n\n const displayForm = (\n \n {displayForm}\n
\n \n {displayReport ? (\n
\n \n \n
\n );\n\n return (\n \n
\n );\n};\n\nexport default ReportSummary;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nconst ReportStationDetaiil = () => {\n const [optionsBasin, setOptionsBasin] = useState([]);\n const [reportUrl, setReportUrl] = useState(\"\");\n const token = localStorage.getItem(\"token\");\n const localReportUrl = localStorage.getItem(\"reportUrl\");\n const [isLoading, setIsLoading] = useState(false);\n const [disableBtn, setDisableBtn] = useState(false);\n\n const [basinSelected, setBasinSelected] = useState(\"\");\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n };\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n setIsLoading(true);\n const baseUrl = `${localReportUrl}/frmstation.aspx?`;\n const funcId = \"2103\";\n\n const url = `${baseUrl}basinid=${basinSelected.value}&token=${token}&functionid=${funcId}`;\n console.log({ url });\n setReportUrl(url);\n setDisableBtn(true);\n };\n\n const onHandleLoad = (ev) => {\n const { returnValue } = ev.nativeEvent;\n\n if (returnValue) {\n setIsLoading(false);\n }\n };\n\n const fetchOptionsBasin = () => {\n dwrApi\n .get(\"/Basins\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: `${item.basinId} : ${item.basinTh}`,\n value: item.basinId,\n };\n });\n\n setOptionsBasin(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n fetchOptionsBasin();\n }, []);\n\n useEffect(() => {\n setReportUrl(null);\n setDisableBtn(false);\n }, [basinSelected]);\n\n const displayForm = (\n \n {displayForm}\n
\n \n \n
\n \n \n
\n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default ReportStationDetaiil;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport DatePicker from \"react-datepicker\";\nimport moment from \"moment\";\n\nconst MeteoTransferStatus = () => {\n const [optionsBasin, setOptionsBasin] = useState([]);\n const [optionsMeteoType, setOptionsMeteoType] = useState([]);\n const [basinSelected, setBasinSelected] = useState(\"\");\n const [dateSelected, setDateSelected] = useState(\"\");\n const [meteoTypeSelected, setMeteoTypeSelected] = useState(\"\");\n const [response, setResponse] = useState([]);\n const [displayResult, setDisplayResult] = useState(false);\n\n const [totalDay, setTotalDay] = useState([]);\n\n const dateConvert = new Date(dateSelected + \"-01\");\n const monthSelected = dateConvert.getMonth() + 1;\n const yearSelected = dateConvert.getFullYear();\n const daysInMonth = new Date(yearSelected, monthSelected, 0).getDate();\n const [alertMessage, setAlertMessage] = useState(\"\");\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear() + 543;\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${monthNames[month]} ${year}`;\n };\n\n useEffect(() => {\n const _daysInMonth = moment(dateSelected).daysInMonth();\n setTotalDay([]);\n\n for (let i = 0; i < _daysInMonth; i++) {\n let el = i + 1;\n\n if (el < 10) {\n el = \"0\" + el;\n }\n\n setTotalDay((day) => [...day, el.toString()]);\n }\n }, [dateSelected]);\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n dwrApi\n .get(\n `/DailyMeteos/Basin/${basinSelected.value}?MeteoTypeId=${meteoTypeSelected.value}&month=${month}&year=${year}`\n )\n .then((res) => {\n setResponse(res.data);\n setDisplayResult(true)\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchOptionsBasin = () => {\n dwrApi\n .get(\"/Basins\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: `${item.basinId} : ${item.basinTh}`,\n value: item.basinId,\n };\n });\n\n setOptionsBasin(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchOptionsMeteoTypes = () => {\n dwrApi\n .get(\"/MeteoTypes/Active\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: `${item.meteoTypeId} : ${item.meteoTypeTh}`,\n value: item.meteoTypeId,\n };\n });\n\n setOptionsMeteoType(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n fetchOptionsBasin();\n fetchOptionsMeteoTypes();\n }, []);\n\n useEffect(() => {\n setDateSelected('');\n setMeteoTypeSelected(null)\n }, [basinSelected]);\n\n useEffect(() => {\n setMeteoTypeSelected(null)\n }, [dateSelected]);\n\n useEffect(() => {\n // console.log('setDisplayResult')\n setDisplayResult(false)\n setAlertMessage('');\n }, [basinSelected, dateSelected, meteoTypeSelected]);\n\n const displayForm = (\n \n {displayForm}\n
\n \n
\n \n \n
\n );\n\n console.log({ response });\n\n const displayTable = (\n \n \n \n
\n
\n );\n\n return (\n \n I = ส่งข้อมูลสู่ฐานส่วนกลาง, C= ยืนยันข้อมูลโดยเจ้าหน้าที่ส่วนกลาง, S\n ยืนยันข้อมูลโดยเจ้าหน้าที่ศูนย์, H = มีข้อมูลในฐานข้อมูล, - ไม่มีข้อมูล\n
\n | \n รายงานการส่งข้อมูลเดือน {convertDate(dateSelected)}\n | \n||
|---|---|---|
| รหัสสถานี | \nชื่อสถานี | \n {totalDay.map((day) => {\n return{day} | ;\n })}\n
| {item.stationLabel} | \n{item.stationTh} | \n {totalDay.map((day) => {\n let filterResult = item.dailyMeteo.find(\n (data) => new Date(data.meteoDate).getDate() == day\n );\n let status = \"-\";\n if (filterResult && +filterResult.dataStatusID == 5) {\n status = \"I\";\n } else if (\n filterResult &&\n filterResult.dailyMeteo !== null && filterResult.dataStatusID == 4\n ) {\n status = \"C\";\n } else if (\n filterResult &&\n filterResult.dailyMeteo !== null && filterResult.dataStatusID == 3\n ) {\n status = \"S\";\n } else if (\n filterResult &&\n filterResult.dailyMeteo !== null && filterResult.dataStatusID == 2\n ) {\n status = \"H\";\n }\n else if (\n filterResult &&\n filterResult.dailyMeteo !== null && filterResult.dataStatusID === null\n ) {\n status = \"H\";\n }\n\n else {\n status = \"-\";\n }\n\n return{status} | ;\n })}\n
\n
\n );\n};\n\nexport default MeteoTransferStatus;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport DatePicker from \"react-datepicker\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport moment from \"moment\";\n\nconst HydroTransferStatus = () => {\n const [optionsBasin, setOptionsBasin] = useState([]);\n const [optionsHydroType, setOptionsHydroType] = useState([]);\n const [basinSelected, setBasinSelected] = useState(\"\");\n const [dateSelected, setDateSelected] = useState(\"\");\n const [hydroTypeSelected, setHydroTypeSelected] = useState(\"\");\n const [response, setResponse] = useState([]);\n const [totalDay, setTotalDay] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [displayResult, setDisplayResult] = useState(false);\n\n const dateConvert = new Date(dateSelected + \"-01\");\n const monthSelected = dateConvert.getMonth() + 1;\n const yearSelected = dateConvert.getFullYear();\n const daysInMonth = new Date(yearSelected, monthSelected, 0).getDate();\n\n const [alertMessage, setAlertMessage] = useState(\"\");\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear() + 543;\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${monthNames[month]} ${year}`;\n };\n\n useEffect(() => {\n const _daysInMonth = moment(dateSelected).daysInMonth();\n setTotalDay([]);\n\n for (let i = 0; i < _daysInMonth; i++) {\n let el = i + 1;\n\n if (el < 10) {\n el = \"0\" + el;\n }\n\n setTotalDay((day) => [...day, el.toString()]);\n }\n }, [dateSelected]);\n\n useEffect(() => {\n setDateSelected('');\n setHydroTypeSelected(null)\n }, [basinSelected]);\n\n useEffect(() => {\n setHydroTypeSelected(null)\n }, [dateSelected]);\n\n useEffect(() => {\n setDisplayResult(false)\n setAlertMessage('');\n }, [basinSelected, dateSelected, hydroTypeSelected]);\n\n const onSubmit = (ev) => {\n ev.preventDefault();\n setIsLoading(true);\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n dwrApi\n .get(\n `/DailyGageHeights/Basin/${basinSelected.value}?month=${month}&year=${year}`\n )\n .then((res) => {\n setResponse(res.data);\n setDisplayResult(true)\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n })\n .catch((err) => {\n console.log(err.message);\n })\n .finally(() => setIsLoading(false));\n };\n\n const fetchOptionsBasin = () => {\n dwrApi\n .get(\"/Basins\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: `${item.basinId} : ${item.basinTh}`,\n value: item.basinId,\n };\n });\n\n setOptionsBasin(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchOptionsMeteoTypes = () => {\n dwrApi\n .get(\"/HydroTypes/Active\")\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: `${item.hydroTypeId} : ${item.hydroTypeTh}`,\n value: item.hydroTypeId,\n };\n });\n\n setOptionsHydroType(list);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n fetchOptionsBasin();\n fetchOptionsMeteoTypes();\n }, []);\n\n const displayForm = (\n \n
\n \n {displayForm}\n
\n {displayResult && response.length ? (\n {displayTable}
\n ) : (\n {alertMessage}
\n )}\n \n \n
\n );\n // dateSelected\n\n const displayTable = (\n \n \n \n
\n
\n );\n\n return (\n \n I = ส่งข้อมูลสู่ฐานส่วนกลาง, C= ยืนยันข้อมูลโดยเจ้าหน้าที่ส่วนกลาง, S\n ยืนยันข้อมูลโดยเจ้าหน้าที่ศูนย์, H = มีข้อมูลในฐานข้อมูล, - ไม่มีข้อมูล\n
\n | \n รายงานการส่งข้อมูลเดือน {convertDate(dateSelected)}\n | \n||
|---|---|---|
| รหัสสถานี | \nชื่อสถานี | \n {totalDay.map((day) => {\n return{day} | ;\n })}\n
| {item.stationLabel} | \n{item.stationTh} | \n {totalDay.map((day) => {\n let filterResult = item.dailyGageHeight.find(\n (data) => new Date(data.gageHeightDate).getDate() == day\n );\n let status = \"-\";\n\n if (filterResult && +filterResult.dataStatusID == 5) {\n status = \"I\";\n } else if (\n filterResult &&\n filterResult.dailyGageHeight !== null && filterResult.dataStatusID == 4\n ) {\n status = \"C\";\n } else if (\n filterResult &&\n filterResult.dailyGageHeight !== null && filterResult.dataStatusID == 3\n ) {\n status = \"S\";\n } else if (\n filterResult &&\n filterResult.dailyGageHeight !== null && filterResult.dataStatusID == 2\n ) {\n status = \"H\";\n } else if (\n filterResult &&\n filterResult.dailyGageHeight !== null && filterResult.dataStatusID == null\n ) {\n status = \"H\";\n\n } else {\n status = \"-\";\n }\n\n return{status} | ;\n })}\n
\n
\n );\n};\n\nexport default HydroTransferStatus;\n","import React from \"react\";\nimport Select from \"react-select\";\n\nconst SelectControlInput = ({\n title,\n Controller,\n control,\n options,\n required,\n keyName,\n defaultValue,\n column=[4,8]\n}) => {\n return (\n \n {isLoading ?
\n \n {displayForm}\n
\n {displayResult && response.length ? (\n {displayTable}
\n ) : (\n {alertMessage}
\n )}\n \n
\n );\n};\n\nexport default SelectControlInput;\n","import React from \"react\";\n\nconst RadiosInput = ({\n title,\n keyName,\n options,\n register,\n defValue,\n watch,\n column = [4, 8],\n}) => {\n return (\n {title}
\n \n {\n return (\n \"ไม่พบข้อมูล\"}\n isClearable={true}\n defaultValue={defaultValue}\n />\n );\n }}\n />\n
\n \n
\n \n );\n};\n\nexport default RadiosInput;\n","import React, { useState, useEffect } from \"react\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport DatePicker from \"react-datepicker\";\nimport TextInput from \"../../../Components/TextInput\";\nimport SelectInput from \"../../../Components/SelectInput\";\nimport SelectControlInput from \"../../../Components/SelectControlInput\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport RadiosInput from \"../../../Components/RadiosInput\";\nimport ModalDeleteEl from \"../../../Components/ModalDeleteEl\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport Select from \"react-select\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport { useToasts } from \"react-toast-notifications\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\n\nconst WaterServey = () => {\n const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [dateSelected, setDateSelected] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const { addToast } = useToasts();\n\n const [optionsMachineGroup, setOptionsMachineGroup] = useState([]);\n const [optionsDisOperType, setOptionsDisOperType] = useState([]);\n const [optionsPersonStationCenter, setOptionsPersonStationCenter] = useState(\n []\n );\n const [discOperResponse, setDiscOperResponse] = useState(null);\n const [allowDisplayContent, setAllowDisplayContent] = useState(false);\n\n const { register, handleSubmit, control, reset, watch, setValue } = useForm();\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n select: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n width: \"60px\",\n },\n inputField: {\n backgroundColor: \"white\",\n color: \"black\",\n border: \"1px solid rgb(204,204,204)\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const setDefaultValues = (data) => {\n const defaultValues = {\n discOperatId: data?.discOperatId,\n stationId: stationIdSelected?.value,\n surveyNo: data?.surveyNo,\n measureDate: data?.measureDate,\n scopeMeasure: data?.scopeMeasure,\n wideRiver: data?.wideRiver,\n surveyPersonId: optionsPersonStationCenter.find(\n (item) => item.value === data?.surveyPersonId\n ),\n calculatePersonId: optionsPersonStationCenter.find(\n (item) => item.value === data?.calculatePersonId\n ),\n approvePersonId: optionsPersonStationCenter.find(\n (item) => item.value === data?.approvePersonId\n ),\n totalMeasure: data?.totalMeasure,\n machineId: optionsMachineGroup.find(\n (item) => item.value === data?.machineId\n ),\n machineNo: data?.machineNo,\n ratio: data?.ratio,\n pendulumWeight: data?.pendulumWeight,\n pendulumUnitId: data?.pendulumUnitId,\n startTime: data?.startTime,\n endTime: data?.endTime,\n sgageHeight: data?.sgageHeight,\n egageHeight: data?.egageHeight,\n remark: data?.remark,\n dataStatusId: data?.dataStatusId,\n updateUser: data?.updateUser,\n updateDate: data?.updateDate,\n confirmUser: data?.confirmUser,\n confirmDate: data?.confirmDate,\n confirmType: data?.confirmType,\n measureDataStatusId: data?.measureDataStatusId,\n measureConfirmType: data?.measureConfirmType,\n measureUpdateUser: data?.measureUpdateUser,\n measureUpdateDate: data?.measureUpdateDate,\n confirmMeasureUser: data?.confirmMeasureUser,\n confirmMeasureDate: data?.confirmMeasureDate,\n active: data?.active,\n totalArea: data?.totalArea,\n totalDischarge: data?.totalDischarge,\n dischargeCalculateResult: data?.dischargeCalculateResult,\n dischargeMeasure: data?.dischargeMeasure,\n discoperResult: data?.discoperResult,\n };\n\n reset(defaultValues);\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const getMachineGroup = () => {\n dwrApi.get(`/Machines/GroupId/2`).then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.machineTh,\n value: item.machineId,\n };\n });\n\n setOptionsMachineGroup(list);\n });\n };\n\n const getPersonStationCenter = () => {\n if (stationDetail.length) {\n dwrApi\n .get(`/Persons/StationCenter/${stationDetail[0].stationCenterId}`)\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: `${item.firstName} ${item.lastName}`,\n value: item.personId,\n };\n });\n\n setOptionsPersonStationCenter(list);\n });\n }\n };\n\n const getDiscOperType = () => {\n dwrApi.get(`/DiscOperType`).then((res) => {\n const list = res.data.map((item) => {\n return {\n label: item.discOperTypeDesc,\n value: item.discOperTypeId,\n info: item.disoperTypeInfo.map((info) => {\n return {\n value: info.disOperTypeInfoId,\n label: info.disOperTypeInfoDesc,\n };\n }),\n };\n });\n\n setOptionsDisOperType(list);\n });\n };\n\n const onHandleRequest = async () => {\n await dwrApi\n .get(\n `/DischargeOpertable/Station/${stationIdSelected.value\n }/DiscOperResult?recdate=${convertDate(dateSelected)}`\n )\n .then((res) => {\n setDiscOperResponse(res.data);\n if (res.data) {\n setDefaultValues(res.data);\n } else {\n reset({});\n }\n })\n .catch((err) => {\n reset({});\n setDiscOperResponse(null);\n })\n .finally(() => {\n setAllowDisplayContent(true);\n });\n };\n\n useEffect(() => {\n setAllowDisplayContent(false);\n }, [dateSelected, stationIdSelected]);\n\n useEffect(() => {\n if (stationIdSelected && dateSelected) {\n getMachineGroup();\n getDiscOperType();\n }\n }, [dateSelected, stationIdSelected]);\n\n useEffect(() => {\n if (stationDetail.length) getPersonStationCenter();\n }, [stationDetail]);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n const displayForm = (\n {title}
\n \n
\n \n {options.length\n ? options.map((item, index) => {\n return (\n \n \n item.value == watch(keyName)\n ? (ev.target.checked = false)\n : \"\"\n }\n type=\"radio\"\n value={item.value}\n defaultChecked={\n defValue && item.value == defValue ? true : false\n }\n {...register(keyName)}\n />\n \n
\n );\n })\n : \"\"}\n \n
\n );\n\n const onHandleSubmit = (data) => {\n const discOperTypeKey = Object.keys(data).filter((key) =>\n key.startsWith(\"discOperTypeID\")\n );\n\n const discOperType = Object.keys(data)\n .filter((key) => discOperTypeKey.includes(key))\n .reduce((obj, key) => {\n obj[key] = data[key];\n return obj;\n }, {});\n\n const discOperResult = Object.keys(discOperType).map((e) => ({\n discOperatId: null,\n disOperTypeInfoId: discOperType[e],\n }));\n\n const datas = {\n stationId: +stationIdSelected?.value,\n surveyNo: +data?.surveyNo,\n measureDate: convertDate(dateSelected),\n scopeMeasure: data?.scopeMeasure,\n wideRiver: +data?.wideRiver,\n surveyPersonId: +data?.surveyPersonId?.value,\n calculatePersonId: +data?.calculatePersonId?.value,\n approvePersonId: +data?.approvePersonId?.value,\n totalMeasure: +data?.totalMeasure,\n machineId: +data?.machineId?.value,\n machineNo: data?.machineNo,\n ratio: data?.ratio,\n pendulumWeight: +data?.pendulumWeight,\n pendulumUnitId: +data?.pendulumUnitId,\n startTime: data?.startTime,\n sgageHeight: +data?.sgageHeight,\n endTime: data?.endTime,\n egageHeight: +data?.egageHeight,\n remark: data?.remark,\n discOperResult,\n };\n\n if (!discOperResponse) {\n dwrApi\n .post(`/DischargeOpertable`, datas)\n .then((res) => {\n onHandleRequest();\n addToast(\n
\n วัน / เดือน / ปี
\n \n
\n \n \n จัดการข้อมูล\n \n
\n บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n window.scrollTo({\n top: 0,\n left: 0,\n behavior: \"smooth\",\n });\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n } else {\n dwrApi\n .put(`/DischargeOpertable/${discOperResponse?.discOperatId}`, {\n ...datas,\n discOperatId: discOperResponse?.discOperatId,\n })\n .then((res) => {\n console.log(\"res edit\", res);\n onHandleRequest();\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n window.scrollTo({\n top: 0,\n left: 0,\n behavior: \"smooth\",\n });\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n }\n };\n\n const onHandleDelete = () => {\n dwrApi\n .delete(`/DischargeOpertable/${discOperResponse?.discOperatId}`)\n .then(async (res) => {\n addToast(ลบข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n setIsModalDeleteOpen(false);\n setAllowDisplayContent(false);\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n };\n\n const displayContent = (\n\n
\n );\n const onHandleDefaultValue = async (requestAgain = false, isReset = false) => {\n const defaultValueSelect = {\n surveyPersonId: null,\n calculatePersonId: null,\n approvePersonId: null,\n machineId: null,\n };\n\n if (discOperResponse) {\n reset();\n } else {\n reset(defaultValueSelect);\n }\n\n if (requestAgain) {\n onHandleRequest();\n }\n\n if (isReset) {\n reset({});\n setDefaultValues();\n setDiscOperResponse(null);\n }\n\n };\n\n const displayButtonGroup = (\n \n
\n \n
\n\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n\n \n
\n \n
\n เวลาเริ่ม
\n \n
\n \n
\n\n \n
\n \n
\n เวลาสิ้นสุด
\n \n
\n \n
\n\n \n
\n\n {optionsDisOperType.length\n ? optionsDisOperType.map((item, index) => {\n const getType = discOperResponse?.discoperResult?.find(\n (data) => data.disOperTypeInfoId?.slice(0, 2) == item.value\n );\n\n return (\n \n
\n );\n })\n : \"\"}\n \n onHandleDefaultValue(true)}\n >\n คืนค่าเดิม\n
\n \n
\n );\n};\n\nexport default WaterServey;\n","import React from \"react\";\nimport Modal from \"react-modal\";\n\nconst ModalDeleteConfirm = ({\n text,\n onHandleDelete,\n modalIsOpen,\n setModalIsOpen,\n isLoading, \n}) => {\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"10px\",\n\n minWidth: \"400px\",\n },\n };\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n };\n\n const displayContent = (\n \n \n
\n ) : (\n \"\"\n )}\n {isLoading ? {text}
\n );\n const displaySpiner = (\n \n Loading...\n
\n );\n\n return (\n เพิ่มข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n });\n\n if (\n +dischargeOpertableResponse.length + 1 ===\n +startDate?.dischargeMeasures?.totalMeasure\n ) {\n setIsLoading(true);\n const lastData = {\n orderNo: dischargeOpertableResponse.length + 2,\n distant: +ev.distance,\n depth: +ev.depth / 2,\n discOperatId: startDate?.discOperatId,\n dischargeMeasureDetail: [],\n };\n\n await dwrApi\n .post(`/DischargeMeasures`, lastData)\n .then((res) => {\n console.log(\"เพิ่มข้อมูลสรุปสำเร็จ\", res.data);\n fetchDischargeOpertable();\n addToast(มีการกรอกข้อมูลวัดน้ำครบทุกจุดแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n\n await dwrApi\n .post(`/DischargeOpertable/${startDate?.discOperatId}/Approve/measure`, {\n discOperatId: startDate?.discOperatId,\n })\n .then((res) => {\n console.log(\"อัพเดทสถานะการบันทึกข้อมูล\");\n setTableDataTemp(\"\");\n })\n .catch((err) => {\n console.log(\"err\", err.response.data);\n });\n };\n\n const onHandleSubmitEdit = async (ev) => {\n setIsLoading(true);\n\n const getMeasurement = ev.waterMeasurement.map((item) => {\n return {\n depthPointId: item.depthPointId.toString(),\n depthWaterSurface: +item.depthWaterSurface,\n measureTime: +item.time,\n machineRetio: +item.round,\n velocityPoint: +item.velocityPoint,\n };\n });\n\n const data = {\n discMeasureId: itemEditSelected.discMeasureId,\n orderNo: itemEditSelected.orderNo,\n distant: +ev.distance,\n depth: +ev.depth,\n discOperatId: startDate?.discOperatId,\n dischargeMeasureDetail: getMeasurement,\n };\n\n dwrApi\n .put(`/DischargeMeasures/${itemEditSelected.discMeasureId}`, data)\n .then((res) => {\n fetchDischargeOpertable();\n addToast(มีการกรอกข้อมูลวัดน้ำครบทุกจุดแล้ว
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(ไม่สามารถบันทึกข้อมูลได้
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n });\n };\n\n const onHandleDelete = () => {\n setIsLoading(true);\n dwrApi\n .delete(`/DischargeMeasures/DischargeOpertable/${startDate.discOperatId}`)\n .then((res) => {\n fetchDischargeOpertable();\n addToast(ลบข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoading(false);\n });\n };\n\n const onEditData = async (item) => {\n setItemEditSelected(item);\n setIsLoading(true);\n\n const waterMeasurement = item.dischargeMeasureDetail.map((list) => {\n return {\n round: list.machineRetio,\n time: list.measureTime,\n depthWaterSurface: list.depthWaterSurface,\n velocityPoint: list.velocityPoint,\n };\n });\n\n const templateData = {\n depth: item.depth,\n depthPointId: item.dischargeMeasureDetail.length,\n distance: item.distant,\n waterMeasurement: waterMeasurement,\n };\n\n setValue(\"depth\", item.depth);\n setValue(\"distance\", item.distant);\n setValue(\"depthPointId\", item.dischargeMeasureDetail.length.toString());\n\n setTimeout(() => {\n for (let i = 0; i < waterMeasurement.length; i++) {\n setValue(`waterMeasurement[${i}].time`, waterMeasurement[i].time);\n setValue(`waterMeasurement[${i}].round`, waterMeasurement[i].round);\n setValue(\n `waterMeasurement[${i}].velocityPoint`,\n waterMeasurement[i].velocityPoint\n );\n }\n }, 2000);\n\n setIsLoading(false);\n };\n\n const onCancelForm = () => {\n reset();\n setItemEditSelected(\"\");\n };\n\n const onHandleCalculate = () => {\n if (userDetail) {\n let department;\n\n if (userDetail.stationCenterId) {\n department = \"region\";\n } else {\n department = \"center\";\n }\n\n const data = {\n discOperatId: +startDate?.discOperatId,\n };\n\n dwrApi\n .post(\n `/DischargeOpertable/${startDate.discOperatId}/Approve/${department}`,\n data\n )\n .then((res) => {\n addToast(ยืนยันข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(\n\n บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด Code :{err.response.status}\n
,\n {\n appearance: \"error\",\n autoDismiss: true,\n }\n );\n });\n }\n };\n\n const onHandleInput = (index) => {\n console.log(\"onHandleInput\");\n let time;\n let round;\n let velocity;\n\n setTimeout(() => {\n time = watch(`waterMeasurement.${index}.time`);\n round = watch(`waterMeasurement.${index}.round`);\n velocity = watch(`waterMeasurement.${index}.velocityPoint`);\n setValue(`waterMeasurement.${index}.velocityPoint`, null);\n\n if (round && time) {\n calculateVelocity(time, round).then((res) => {\n // console.log('calculateVelocity',res)\n if (res) {\n setValue(\n `waterMeasurement.${index}.velocityPoint`,\n res?.velocityPoint1 || velocity\n );\n } else {\n setValue(`waterMeasurement.${index}.velocityPoint`, null);\n }\n });\n } else if ((!round && time) || (round && !time)) {\n setValue(`waterMeasurement.${index}.velocityPoint`, null);\n } else {\n setValue(`waterMeasurement.${index}.velocityPoint`, velocity);\n }\n setTableDataTemp(watch(`waterMeasurement`));\n }, 300);\n };\n\n useEffect(() => {\n console.log(\"1\");\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n console.log(\"2\");\n setStartDate(\"\");\n if (stationIdSelected) {\n fetchDischargeTable();\n }\n }, [stationIdSelected]);\n\n useEffect(() => {\n console.log({ watchDepthPoint });\n if ((watchDepthPoint, watchDepth)) {\n calculateDischarge();\n }\n }, [watchDepthPoint, watchDepth]);\n\n useEffect(() => {\n console.log(\"4\");\n setDischargeOpertableResponse([]);\n setAlertMessage(\"\");\n setIsShowContent(false);\n setItemEditSelected();\n }, [stationIdSelected, startDate]);\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n const displayForm = (\n <>\n \n
\n วันที่วัดน้ำ
\n \n setStartDate(ev)}\n value={startDate}\n noOptionsMessage={() => \"ไม่พบข้อมูลการวัดน้ำ\"}\n isClearable={true}\n />\n
\n \n \n {!isFetching ? \"จัดการข้อมูล\" : displaySpiner}\n \n
\n \n );\n\n const displayWaterMeasurements = (\n \n
\n );\n\n console.log({ fields });\n\n const displayTable = (\n <>\n \n ลำดับที่ :{\" \"}\n {itemEditSelected\n ? itemEditSelected.orderNo\n : +dischargeOpertableResponse.length >=\n +startDate?.dischargeMeasures?.totalMeasure\n ? \"-\"\n : dischargeOpertableResponse.length + 1}{\" \"}\n (จำนวนจุดที่วัดทั้งหมด{\" \"}\n {!!startDate && startDate.dischargeMeasures.totalMeasure\n ? startDate.dischargeMeasures.totalMeasure\n : \"0\"}{\" \"}\n จุด){\" \"}\n \n {itemEditSelected ? \"กำลังแก้ไข\" : \"\"}\n \n
\n \n
\n\n จำนวนความลึกที่จุดวัด :
\n \n
\n \n
\n ระยะห่างจากจุดเริ่มต้น :
\n \n =\n startDate.dischargeMeasures.totalMeasure\n ? true\n : false\n }\n />\n
\n ความลึก :
\n \n =\n startDate.dischargeMeasures.totalMeasure\n ? true\n : false\n }\n />\n
\n | ความลึกที่จุดวัด | \nความลึกของเครื่องผิวน้ำ | \nเวลาวัดได้ (วินาที) | \nจำนวนรอบที่เครื่อง | \nความเร็วที่จุดวัด | \n
|---|---|---|---|---|
| {item.depthPoint} | \n\n | \n \n | \n \n | \n \n | \n
\n \n \n
\n
\n );\n\n const displayContent = (\n | ลำดับที่ | \nความกว้าง (เมตร/วินาที) | \nความลึก (เมตร/วินาที) | \n\n เนื้อที่เฉลี่ย (ตารางเมตร)\n | \nความเร็ว (เมตร/วินาที) | \n\n อัตราการไหล (ลูกบาศก์เมตร/วินาที)\n | \nแก้ไข | \n|||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ระยะห่างจากจุดเริ่ม | \nความกว้าง (เมตร) | \nความลึกของเครื่องจากผิวน้ำ | \nมุมเบนในแนวดิ่ง | \nความลึกที่ต้องแก้ | \nความลึกจริง | \nความลึกเฉลี่ย | \nความลึก | \nเวลาวัดได้วินาที | \nจำนวนรอบที่เครื่อง | \nความเร็วที่จุดวัด | \nความเร็วเฉลี่ยในด้านตั้ง | \nความเร็วเฉลี่ยที่แก้แล้ว | \nความเร็วในรูปตัด | \n||||
| {item.orderNo} | \n{convertDecimals(item.distant)} | \n{convertDecimals(item.width)} | \n{convertDecimals(item.depth)} | \n{convertDecimals(item.angle)} | \n{convertDecimals(item.correctDepth)} | \n{convertDecimals(item.trueDepth)} | \n{convertDecimals(item.avgDepth)} | \n{convertDecimals(item.avgArea)} | \n\n\n {sortingDetail.length\n ? sortingDetail.map((el) => {\n return (\n \n {convertDecimals(el.depthWaterSurface) || \"-\"}\n \n );\n })\n : \"\"}\n | \n \n {sortingDetail.length\n ? sortingDetail.map((el) => {\n return {el.measureTime || \"-\"} ;\n })\n : \"\"}\n | \n \n {sortingDetail.length\n ? sortingDetail.map((el) => {\n return (\n {convertDecimals(el.machineRetio) || \"-\"} \n );\n })\n : \"\"}\n | \n \n {sortingDetail.length\n ? sortingDetail.map((el) => {\n return (\n \n {convertDecimals(el.velocityPoint) || \"-\"}\n \n );\n })\n : \"\"}\n | \n\n {convertDecimals(item.avgVelocityVertical)} | \n{convertDecimals(item.correctAvgVelocity)} | \n{convertDecimals(item.velocity)} | \n{convertDecimals(item.discharge)} | \n\n {index + 1 <= +startDate?.dischargeMeasures.totalMeasure ? (\n | \n
| \n {alertMessage}\n | \n|||||||||||||||||
| รวม | \n\n | \n | \n | \n | \n | \n | \n | \n {dischargeOpertableResponse.length\n ? sumNumberWithFixDigit(\n dischargeOpertableResponse.map((value) => value.avgArea)\n )\n : \"\"}\n | \n\n | \n | \n | \n | \n | \n | \n | \n {dischargeOpertableResponse.length\n ? sumNumberWithFixDigit(\n dischargeOpertableResponse.map((value) => value.discharge)\n )\n : \"\"}\n | \n\n |
\n
\n {disableForm && (\n \n
\n ข้อมูลวัดน้ำ
\n \n ไม่สามารถเพิ่มข้อมูลได้ เนื่องจากมีข้อมูลจุดวัดน้ำครบทุกจุดแล้ว\n
\n )}\n \n \n );\n\n const displayButtonGroup = (\n \n {userDetail &&\n userDetail.stationCenterId &&\n dischargeOpertable &&\n dischargeOpertable.measureDataStatusId == 2 ? (\n <>\n \n \n ยืนยันข้อมูลทั้งหมดกับส่วนกลาง และคำนวณค่าวัดน้ำ\n
\n \n\n \n {isLoading ?
\n );\n};\n\nexport default WaterMeasurement;\n","import React, { useState } from \"react\";\nimport moment from \"moment\";\nimport DatePicker from \"react-datepicker\";\nimport { FaCalendarAlt } from \"react-icons/fa\";\n\nconst ThaiDateInput = ({\n title,\n required,\n keyName,\n control,\n Controller,\n minDate,\n maxDate,\n}) => {\n const styles = {\n input: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n\n inputField: {\n backgroundColor: \"white\",\n color: \"black\",\n border: \"1px solid rgb(204,204,204)\",\n width: \"100%\",\n fontSize: \"1rem\",\n fontFamily: \"THSarabun\",\n padding: \"8px\",\n },\n unit: {\n position: \"absolute\",\n display: \"block\",\n right: \"30px\",\n top: \"10px\",\n cursor: \"pointer\",\n },\n };\n\n const CustomInput = ({ value, onClick }) => (\n \n {displayForm}\n
\n\n \n {isShowContent ? (\n <>\n {displayContent}\n {displayTableDetail}\n {displayButtonGroup}\n \n ) : (\n \"\"\n )}\n
\n \n \n \n
\n );\n\n return (\n <>\n \n
\n \n );\n};\n\nexport default ThaiDateInput;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport {\n FaTimesCircle,\n FaPencilAlt,\n FaTrashAlt,\n FaChevronCircleLeft,\n FaChevronCircleRight,\n} from \"react-icons/fa\";\n\nimport { getMonth } from \"date-fns\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport TextInput from \"./TextInput\";\nimport ThaiDateInput from \"./ThaiDateInput\";\nimport SelectControlInput from \"./SelectControlInput\";\n\nconst ModalCRUDWaterAnalysis = ({\n stationDetail,\n type,\n setIsAction,\n optionsPerson,\n elmentDetail,\n startDate,\n}) => {\n const { register, handleSubmit, reset, control } = useForm();\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n\n // console.log({\n // stationDetail,\n // type,\n // setIsAction,\n // optionsPerson,\n // elmentDetail,\n // startDate,\n // });\n\n useEffect(() => {\n if (elmentDetail) {\n const getCalcPerson = optionsPerson?.find(\n (item) => item.value == elmentDetail.calculatePersonId\n );\n\n const defaultValues = {\n measureDate: elmentDetail.measureDate\n ? new Date(elmentDetail.measureDate)\n : null,\n calculatePersonId: getCalcPerson ? getCalcPerson : null,\n totalWidth: +elmentDetail.totalWidth || null,\n totalArea: +elmentDetail.totalArea || null,\n meanVelocity: +elmentDetail.meanVelocity || null,\n avgGageHeight: +elmentDetail.avgGageHeight || null,\n totalDischarge: +elmentDetail.totalDischarge || null,\n meas: elmentDetail.meas,\n ghchange: +elmentDetail.ghchange || null,\n ghtime: elmentDetail.ghtime ? elmentDetail.ghtime : null,\n measRate: +elmentDetail.measRate || null,\n waterTemp: +elmentDetail.waterTemp || null,\n remark: elmentDetail?.remark,\n stationId: stationDetail[0]?.stationId,\n };\n\n reset(defaultValues);\n }\n }, [optionsPerson, elmentDetail]);\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n padding: \"0\",\n minWidth: \"600px\",\n },\n };\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n textInput: {\n background: \"white\",\n },\n };\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n if (type === \"add\") {\n const defaultValues = {\n measureDate: null,\n calculatePersonId: null,\n totalWidth: null,\n totalArea: null,\n meanVelocity: null,\n avgGageHeight: null,\n totalDischarge: null,\n meas: [],\n ghchange: null,\n ghtime: null,\n measRate: null,\n waterTemp: null,\n remark: null,\n stationId: null,\n };\n reset(defaultValues);\n } else if (elmentDetail && optionsPerson && optionsPerson.length) {\n const getCalcPerson = optionsPerson.find(\n (item) => item.value == elmentDetail.calculatePersonId\n );\n\n const defaultValues = {\n measureDate: elmentDetail.measureDate\n ? new Date(elmentDetail.measureDate)\n : null,\n calculatePersonId: getCalcPerson ? getCalcPerson : null,\n totalWidth: +elmentDetail.totalWidth || null,\n totalArea: +elmentDetail.totalArea || null,\n meanVelocity: +elmentDetail.meanVelocity || null,\n avgGageHeight: +elmentDetail.avgGageHeight || null,\n totalDischarge: +elmentDetail.totalDischarge || null,\n meas: elmentDetail.meas,\n ghchange: +elmentDetail.ghchange || null,\n ghtime: elmentDetail.ghtime ? elmentDetail.ghtime : null,\n measRate: +elmentDetail.measRate || null,\n waterTemp: +elmentDetail.waterTemp || null,\n remark: elmentDetail?.remark,\n stationId: stationDetail[0]?.stationId,\n };\n\n reset(defaultValues);\n }\n\n setModalIsOpen(false);\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const onSubmit = (ev) => {\n setIsLoading(true);\n\n const data = {\n measureDate: convertDate(ev.measureDate) || null,\n calculatePersonId: +ev.calculatePersonId?.value || null,\n totalWidth: +ev.totalWidth || null,\n totalArea: +ev.totalArea || null,\n meanVelocity: +ev.meanVelocity || null,\n avgGageHeight: +ev.avgGageHeight || null,\n totalDischarge: +ev.totalDischarge || null,\n meas: +ev.meas || null,\n ghchange: +ev.ghchange || null,\n ghtime: ev.ghtime || null,\n measRate: +ev.measRate || null,\n waterTemp: +ev.waterTemp || null,\n remark: ev.remark || null,\n stationId: stationDetail[0]?.stationId,\n };\n\n dwrApi\n .post(`/DischargeCalculateResults`, data)\n .then((res) => {\n closeModal();\n addToast({title}
\n \n (\n
\n เพิ่มข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n reset();\n })\n .catch((err) => {\n addToast(มีบางอย่างผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsAction(true);\n setIsLoading(false);\n });\n };\n\n const onSubmitEdit = (ev) => {\n setIsLoading(true);\n\n const data = {\n discCalResultId: elmentDetail.discCalResultId,\n measureDate: convertDate(ev.measureDate) || null,\n calculatePersonId: +ev.calculatePersonId?.value,\n totalWidth: +ev.totalWidth,\n totalArea: +ev.totalArea,\n meanVelocity: +ev.meanVelocity,\n avgGageHeight: +ev.avgGageHeight,\n totalDischarge: +ev.totalDischarge,\n meas: +ev.meas,\n ghchange: +ev.ghchange,\n ghtime: ev.ghtime,\n measRate: +ev.measRate,\n waterTemp: +ev.waterTemp,\n remark: ev.remark,\n stationId: stationDetail[0]?.stationId,\n };\n\n dwrApi\n .put(`/DischargeCalculateResults/${elmentDetail.discCalResultId}`, data)\n .then((res) => {\n closeModal();\n addToast(แก้ไขข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(มีบางอย่างผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsAction(true);\n setIsLoading(false);\n });\n };\n\n const onSubmitDelete = () => {\n setIsLoading(true);\n\n dwrApi\n .delete(`/DischargeCalculateResults/${elmentDetail.discCalResultId}`)\n .then((res) => {\n closeModal();\n addToast(ลบข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n addToast(มีบางอย่างผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsAction(true);\n setIsLoading(false);\n });\n };\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n const displayAddButton = (\n \n
\n );\n\n const displayFaPencil = (\n \n เพิ่มข้อมูล\n
\n \n \n ยกเลิก\n
\n \n \n );\n\n const displayDeleteMessage = (\n \n \n {!isLoading ? \"บันทึก\" : displaySpiner}\n
\n \n \n ยกเลิก\n
\n \n \n );\n\n return (\n ยืนยันการลบข้อมูล
\n \n \n {!isLoading ? \"ยืนยัน\" : displaySpiner}\n
\n \n {type === \"add\" ? displayAddButton : \"\"}\n {type === \"edit\" ? displayFaPencil : \"\"}\n {type === \"delete\" ? displayFaTrash : \"\"}\n \n {displayHeader}\n
\n );\n};\n\nexport default ModalCRUDWaterAnalysis;\n","import React, { useState, useEffect } from \"react\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\nimport ModalCRUDWaterAnalysis from \"../../../Components/ModalCRUDWaterAnalysis\";\n\nconst WaterAnalysis = () => {\n const [isAction, setIsAction] = useState(false);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [optionsYear, setOptionsYear] = useState([]);\n const [isFetching, setIsFetching] = useState(false);\n const [startDate, setStartDate] = useState(\"\");\n const [dischargeResults, setDischargeResults] = useState([]);\n const [personsStationCenter, setPersonsStationCeter] = useState([]);\n const [optionsPerson, setOptionsPerson] = useState([]);\n const [alertMessage, setAlertMessage] = useState(\"\");\n const [isShowButtonAdd, setIsShowButtonAdd] = useState(false);\n\n const styles = {\n inputField: {\n backgroundColor: \"white\",\n color: \"black\",\n border: \"1px solid rgb(204,204,204)\",\n width: \"100%\",\n fontSize: \"16px\",\n fontFamily: \"THSarabun\",\n padding: \"10px\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n tableHeader: {\n backgroundColor: \"rgba(223,244,255,0.5)\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n tableContainer: {\n overflowX: \"scroll\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear();\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${date} ${monthNames[month]} ${year}`;\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations?&BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const getYearOptions = () => {\n let yearOptions = [];\n const firstYear = 1962;\n const thisYear = new Date().getFullYear();\n\n for (let i = firstYear; i <= thisYear; i++) {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n };\n\n yearOptions.push(list);\n }\n\n setOptionsYear(yearOptions);\n };\n\n const fetchDischargeCalc = () => {\n setIsFetching(true);\n dwrApi\n .get(\n `/DischargeCalculateResults/Station/${stationIdSelected.value}?yearselect=${startDate.value}`\n )\n .then((res) => {\n setDischargeResults(res.data);\n setIsShowButtonAdd(true);\n\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n })\n .finally(() => {\n setIsFetching(false);\n setIsAction(false);\n });\n\n dwrApi\n .get(`/Persons/StationCenter/${stationDetail[0].stationCenterId}`)\n .then((res) => {\n const getOptions = res.data.map((item) => {\n return {\n label: `${item.firstName} ${item.lastName}`,\n value: item.personId,\n };\n });\n setOptionsPerson(getOptions);\n setPersonsStationCeter(res.data);\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n });\n };\n\n useEffect(() => {\n getYearOptions();\n }, []);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n setStartDate('');\n setStationIdSelected('')\n }, [basinIdSelected]);\n\n useEffect(() => {\n setDischargeResults([]);\n setIsShowButtonAdd(false);\n setAlertMessage(\"\");\n }, [basinIdSelected, stationIdSelected, startDate]);\n\n useEffect(() => {\n setStartDate('');\n }, [stationIdSelected]);\n\n\n\n\n\n useEffect(() => {\n if (isAction) fetchDischargeCalc();\n }, [isAction]);\n\n useEffect(() => {\n setStartDate(\"\");\n }, [stationIdSelected]);\n\n const displaySpiner = (\n \n \n
\n \n \n Loading...\n
\n );\n\n const displayForm = (\n <>\n \n
\n วันที่วัดน้ำ
\n \n setStartDate(ev)}\n value={startDate}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={true}\n />\n
\n \n \n {!isFetching ? \"จัดการข้อมูล\" : displaySpiner}\n \n
\n \n );\n\n const displayTable = (\n \n \n \n
\n
\n );\n\n return (\n | No | \nDate | \nMade by | \nWidth (m) | \nArea (m²) | \nMean Velocity (m/sec) | \nGage Height (m) | \nDischarge cumecs | \nMeas (Secs no) | \nG.H. Change (m) | \nTime (hrs) | \nMeas : rated | \nWater Temp (°c) | \nRemark | \nแก้ไข | \nลบ | \n
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {index + 1} | \n\n {convertDate(item.measureDate)}\n | \n\n {getPerson?.firstName} {getPerson?.lastName}\n | \n{item.totalWidth} | \n{item.totalArea} | \n{item.meanVelocity} | \n{item.avgGageHeight} | \n{item.totalDischarge} | \n{item.meas} | \n{item.ghchange} | \n{item.ghtime} | \n{item.measRate} | \n{item.waterTemp} | \n{item.remark} | \n\n | \n \n | \n
\n
\n );\n};\n\nexport default WaterAnalysis;\n","import React, { useState, useEffect } from \"react\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { useForm, useFieldArray } from \"react-hook-form\";\nimport _ from \"lodash\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport { useToasts } from \"react-toast-notifications\";\nimport ModalDeleteConfirm from \"../../../Components/ModalDeleteConfirm\";\n\nconst StationCoefficient = () => {\n const [isFetching, setIsFetching] = useState(false);\n const [showContents, setShowContents] = useState(false);\n const [startDate, setStartDate] = useState(\"\");\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [optionsYear, setOptionsYear] = useState([]);\n const [coefDischargeRes, setCoefDischargeRes] = useState();\n const [coefDischargeTable, setCoefDischargeTable] = useState([]);\n const [ratingCurveSelected, setRatingCurveSelected] = useState({\n label: 1,\n value: 1,\n });\n\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n\n const { addToast } = useToasts();\n\n const { register, handleSubmit, control, reset, watch, setValue } = useForm();\n\n const { fields } = useFieldArray({\n control: control,\n name: \"ratingCurveInfo\",\n });\n\n const optionsRatingCurve = [\n { label: 1, value: 1 },\n { label: 2, value: 2 },\n ];\n\n const styles = {\n inputField: {\n backgroundColor: \"white\",\n color: \"black\",\n border: \"1px solid rgb(204,204,204)\",\n width: \"100%\",\n fontSize: \"16px\",\n fontFamily: \"THSarabun\",\n padding: \"10px\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n tableHeader: {\n backgroundColor: \"rgba(223,244,255,0.5)\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const getYearOptions = () => {\n let yearOptions = [];\n const firstYear = 1962;\n const thisYear = new Date().getFullYear();\n\n for (let i = firstYear; i <= thisYear; i++) {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n };\n\n yearOptions.push(list);\n }\n\n setOptionsYear(yearOptions);\n };\n\n const fetchCoefDischarge = () => {\n dwrApi\n .get(\n `/CoefDischarge/Station/${stationIdSelected.value}/Year/${startDate.value}`\n )\n .then((res) => {\n setShowContents(true);\n\n const line1 = [\"coefa1\", \"coefb1\", \"coefc1\", \"coefR1\"];\n const line2 = [\"coefa2\", \"coefb2\", \"coefc2\", \"coefR2\"];\n\n const filterLine1 = _.pick(res.data, line1);\n const filterLine2 = _.pick(res.data, line2);\n\n const newObgLine1 = {\n ratingCurveOrder: 1,\n coefA: filterLine1[\"coefa1\"],\n coefB: filterLine1[\"coefb1\"],\n coefC: filterLine1[\"coefc1\"],\n coefR: filterLine1[\"coefR1\"],\n };\n const newObgLine2 = {\n ratingCurveOrder: 2,\n coefA: filterLine2[\"coefa2\"],\n coefB: filterLine2[\"coefb2\"],\n coefC: filterLine2[\"coefc2\"],\n coefR: filterLine2[\"coefR2\"],\n };\n\n const newArr = [newObgLine1, newObgLine2];\n\n setCoefDischargeRes(res.data);\n setCoefDischargeTable(newArr);\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n });\n };\n\n const onHandleSubmitEdit = (ev) => {\n const line1 = ev.ratingCurveInfo.find((item) => item.ratingCurveOrder == 1);\n const line2 = ev.ratingCurveInfo.find((item) => item.ratingCurveOrder == 2);\n\n const data = {\n coefDischargeId: +coefDischargeRes.coefDischargeId,\n stationId: +stationIdSelected.value,\n year: `${startDate.value}-01-01T00:00:00+07:00`,\n line: +ev.ratingCurveInfo.length,\n ratingTypeId: 0,\n coefa1: line1 ? +line1.coefA : null,\n coefb1: line1 ? +line1.coefB : null,\n coefc1: line1 ? +line1.coefC : null,\n coefR1: line1 ? +line1.coefR : null,\n coefa2: line2 ? +line2.coefA : null,\n coefb2: line2 ? +line2.coefB : null,\n coefc2: line2 ? +line2.coefC : null,\n coefR2: line2 ? +line2.coefR : null,\n };\n\n dwrApi\n .put(`/CoefDischarge/${coefDischargeRes.coefDischargeId}`, data)\n .then((res) => {\n console.log(\"res put\", res.data);\n addToast(\n {displayForm}\n
\n \n {isShowButtonAdd ? (\n
\n {alertMessage}
\n )}\n บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n\n fetchCoefDischarge();\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n\n addToast(มีบางอย่างผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n };\n\n const onHandleSubmitAdd = (ev) => {\n const line1 = ev.ratingCurveInfo.find((item) => item.ratingCurveOrder == 1);\n const line2 = ev.ratingCurveInfo.find((item) => item.ratingCurveOrder == 2);\n\n const data = {\n stationId: +stationIdSelected.value,\n year: `${startDate.value}-01-01T00:00:00+07:00`,\n line: +ev.ratingCurveInfo.length,\n ratingTypeId: 0,\n coefa1: line1 ? +line1.coefA : null,\n coefb1: line1 ? +line1.coefB : null,\n coefc1: line1 ? +line1.coefC : null,\n coefR1: line1 ? +line1.coefR : null,\n coefa2: line2 ? +line2.coefA : null,\n coefb2: line2 ? +line2.coefB : null,\n coefc2: line2 ? +line2.coefC : null,\n coefR2: line2 ? +line2.coefR : null,\n };\n\n dwrApi\n .post(`/CoefDischarge`, data)\n .then((res) => {\n console.log(\"res post\", res.data);\n\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n\n fetchCoefDischarge();\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n\n addToast(มีบางอย่างผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n };\n\n const onHandleDelete = () => {\n dwrApi\n .delete(`/CoefDischarge/${coefDischargeRes.coefDischargeId}`)\n .then((res) => {\n console.log(\"res delete\", res.data);\n\n addToast(ลบข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n\n fetchCoefDischarge();\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n\n addToast(มีบางอย่างผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n };\n\n useEffect(() => {\n getYearOptions();\n }, []);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n if (ratingCurveSelected?.value == 1) {\n const filterData = coefDischargeTable.filter(\n (item) => item.ratingCurveOrder == ratingCurveSelected.value\n );\n setValue(\"ratingCurveInfo\", filterData);\n } else {\n setValue(\"ratingCurveInfo\", coefDischargeTable);\n }\n }, [ratingCurveSelected, coefDischargeTable]);\n\n useEffect(() => {\n setShowContents(false);\n }, [stationIdSelected, startDate]);\n\n useEffect(() => {\n if (coefDischargeRes && coefDischargeRes.line) {\n const getSelect = optionsRatingCurve.find(\n (item) => item.value == coefDischargeRes.line\n );\n setRatingCurveSelected(getSelect);\n } else {\n setRatingCurveSelected(optionsRatingCurve[0]);\n }\n }, [coefDischargeRes]);\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n const displayRatingCurveSelect = (\n <>\n \n
\n \n );\n\n const displayTable = (\n <>\n เส้น Rating Curve
\n \n setRatingCurveSelected(ev)}\n value={ratingCurveSelected}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n // isClearable={true}\n />\n
\n | เส้น Rating Curve | \nค่า a | \nค่า b | \nค่า c | \nค่า R2 | \n
|---|---|---|---|---|
| \n {item.ratingCurveOrder} \n | \n \n | \n \n | \n \n | \n \n | \n
\n \n คืนค่าเดิม\n
\n \n
\n ปี
\n \n setStartDate(ev)}\n value={startDate}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={true}\n />\n
\n \n \n {!isFetching ? \"จัดการข้อมูล\" : displaySpiner}\n \n
\n \n );\n\n return (\n \n {isLoading ?
\n );\n};\n\nexport default StationCoefficient;\n","import React, { useState, useEffect } from \"react\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport DatePicker from \"react-datepicker\";\nimport Select from \"react-select\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport _ from \"lodash\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst RatingTableImportAuto = () => {\n const { addToast } = useToasts();\n\n const [isLoading, setIsLoading] = useState(false);\n\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n\n const [dateSelected, setDateSelected] = useState(\"\");\n const [minValue, setMinValue] = useState(\"\");\n const [maxValue, setMaxValue] = useState(\"\");\n\n const [ratingResponse, setRatingResponse] = useState(\"\");\n const [ratingResponseSelected, setRatingResponseSelected] = useState(\"\");\n const [ratingTableData, setRatingTableData] = useState([]);\n const [chunkRatingTable, setChunkRatingTable] = useState([]);\n const [optionsYear, setOptionsYear] = useState([]);\n\n const [alertMessage, setAlertMessage] = useState(\"\");\n const [xlsFile, setXlsFile] = useState(\"\");\n const [dataFromXls, setDataFromXls] = useState(\"\");\n const [displayExcelBtn, setDisplayExcelBtn] = useState(false);\n const handleRequest = document.getElementById(\"handle-request\");\n\n const fetchStationOfBasin = () => {\n let stationTypeId = \"2\";\n dwrApi\n // .get(\n // `/Stations/Hydro?StationTypeId=${stationTypeId}&BasinId=${basinIdSelected.value}`\n // )\n .get(`/Stations?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const init = () => {\n setDateSelected(\"\");\n setMaxValue(\"\");\n setMinValue(\"\");\n setRatingResponse(\"\");\n setRatingResponseSelected(\"\");\n setRatingTableData([]);\n setDisplayExcelBtn(false);\n };\n\n // useEffect(() => {\n // if (ratingResponse) {\n // setDateSelected(new Date(ratingResponse.year));\n // setMaxValue(ratingResponse.maxLine1);\n // setMinValue(ratingResponse.minLine1);\n // }\n // }, [ratingResponse]);\n\n useEffect(() => {\n if (!stationIdSelected) init();\n }, [stationIdSelected]);\n\n useEffect(() => {\n setDisplayExcelBtn(false);\n setRatingTableData([]);\n setAlertMessage(\"\");\n }, [dateSelected]);\n\n const fetchRatingTable = async () => {\n // setIsLoading(true);\n await dwrApi\n .get(`/RatingMasters/station/${stationIdSelected.value}`)\n .then((res) => {\n setRatingResponse(res.data);\n // setRatingResponseSelected(res.data.length ? res.data[0] : \"\");\n // setRatingTableData(\n // res.data && res.data[0] ? res.data[0].ratingTable : []\n // );\n\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n\n // if (res.status === 200) {\n // setDisplayExcelBtn(true);\n // }\n\n const list = res.data.filter((data) => data.ratingTypeId === 2);\n\n let onlyYear = list.map((item) => new Date(item.year).getFullYear());\n\n if (!onlyYear.length) {\n onlyYear = [new Date().getFullYear()];\n }\n\n const min = onlyYear.reduce((a, b) => Math.min(a, b), Infinity);\n const max = onlyYear.reduce((a, b) => Math.max(a, b), -Infinity);\n\n const minPart = [];\n const middlePart = [];\n const maxPart = [];\n\n for (let i = min - 10; i < min; i++) {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n ratingMasterId: null,\n };\n minPart.push(list);\n }\n\n for (let i = max + 1; i < max + 6; i++) {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n ratingMasterId: null,\n };\n maxPart.push(list);\n }\n\n const genList = list.map((item) => {\n const getYear = new Date(item.year).getFullYear();\n return {\n label: `${getYear} (${getYear + 543}) ${\n item.ratingTypeId === 2 ? \"มีข้อมูล\" : \"\"\n }`,\n value: getYear,\n ratingMasterId: item.ratingMasterId,\n };\n });\n\n for (let i = min; i <= max; i++) {\n const matchingYear = genList.find((item) => item.value === i);\n\n if (matchingYear) {\n middlePart.push(matchingYear);\n } else {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n ratingMasterId: null,\n };\n\n middlePart.push(list);\n }\n }\n\n const yearList = [...minPart, ...middlePart, ...maxPart];\n\n setOptionsYear(yearList);\n\n if (dateSelected) {\n const dateSL = yearList.find(\n (item) => item.value == dateSelected.value\n );\n setDateSelected(dateSL);\n }\n })\n .catch((err) => {\n console.log(\"err\", err);\n })\n .finally(() => setIsLoading(false));\n };\n\n useEffect(() => {\n if (stationIdSelected) fetchRatingTable();\n }, [stationIdSelected]);\n\n const onHandleRequest = async () => {\n if (dateSelected && ratingResponse) {\n setDisplayExcelBtn(true);\n const getMatchData = await ratingResponse.find(\n (item) => item.ratingMasterId == dateSelected.ratingMasterId\n );\n console.log({ getMatchData });\n\n setRatingResponseSelected(getMatchData ? getMatchData : \"\");\n setRatingTableData(\n getMatchData && getMatchData ? getMatchData.ratingTable : []\n );\n\n if (!getMatchData) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n }\n };\n\n console.log({ dateSelected, ratingResponse });\n\n const onInsertXls = (ev) => {\n setXlsFile(ev.target.files[0]);\n\n const data = new FormData();\n data.append(\"excelFile\", ev.target.files[0]);\n\n dwrApi\n .post(`/RatingMasters/ReadExcel`, data)\n .then((res) => {\n setRatingTableData(res.data);\n })\n .catch((err) => console.log(err));\n };\n\n const onHandleSubmit = async () => {\n setIsLoading(true);\n\n const getGageHeight = ratingTableData.map((item) => item.gageHeight);\n const min = getGageHeight.reduce((a, b) => Math.min(a, b), Infinity);\n const max = getGageHeight.reduce((a, b) => Math.max(a, b), -Infinity);\n\n const ratingTableLean = ratingTableData.map((item) => {\n return {\n ratingLineNo: 1,\n gageHeight: +item.gageHeight,\n discharge: +item.discharge,\n };\n });\n\n if (ratingResponseSelected && ratingResponseSelected.ratingMasterId) {\n const data = {\n ratingMasterId: +ratingResponseSelected.ratingMasterId,\n stationId: +ratingResponseSelected.stationId,\n ratingTypeId: 2,\n // ratingTypeId: +ratingResponseSelected.ratingTypeId,\n year: `${dateSelected.value}-01-01`,\n ratingLineAmount: ratingResponseSelected.ratingLineAmount,\n maxLine1: +max,\n minLine1: +min,\n beginLine1Date1: new Date(ratingResponseSelected.beginLine1Date1),\n endLine1Date1: new Date(ratingResponseSelected.endLine1Date1),\n beginLine1Date2: new Date(ratingResponseSelected.beginLine1Date2),\n endLine1Date2: new Date(ratingResponseSelected.endLine1Date2),\n beginLine1Date3: new Date(ratingResponseSelected.beginLine1Date3),\n endLine1Date3: new Date(ratingResponseSelected.endLine1Date3),\n beginLine1Date4: new Date(ratingResponseSelected.beginLine1Date4),\n endLine1Date4: new Date(ratingResponseSelected.endLine1Date4),\n beginLine1Date5: new Date(ratingResponseSelected.beginLine1Date5),\n endLine1Date5: new Date(ratingResponseSelected.endLine1Date5),\n ratingTable: ratingTableLean,\n };\n\n await dwrApi\n .put(`/RatingMasters/${ratingResponseSelected.ratingMasterId}`, data)\n .then(async (res) => {\n console.log(res.data);\n await fetchRatingTable();\n handleRequest.click();\n\n addToast(\n {displayForm}\n
\n {showContents ? (\n \n
\n ) : (\n \"\"\n )}\n \n
\n \n {displayRatingCurveSelect}
\n บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n console.log(err.message);\n })\n .finally(() => setIsLoading(false));\n } else {\n const newData = {\n stationId: +stationIdSelected.value,\n ratingTypeId: 2,\n year: `${dateSelected.value}-01-01`,\n ratingLineAmount: 1,\n maxLine1: +max,\n minLine1: +min,\n ratingTable: ratingTableLean,\n };\n\n await dwrApi\n .post(`/RatingMasters`, newData)\n .then(async (res) => {\n console.log(res.data);\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n await fetchRatingTable();\n handleRequest.click();\n })\n .catch((err) => {\n console.log(err.message);\n })\n .finally(() => setIsLoading(false));\n }\n };\n\n useEffect(() => {\n if (ratingTableData) {\n const row = Math.floor(ratingTableData.length / 6);\n const chunkData = _.chunk(ratingTableData, row);\n console.log(\n \"🚀 ~ file: RatingTableImportAuto.js ~ line 318 ~ useEffect ~ chunkData\",\n chunkData\n );\n setChunkRatingTable(chunkData);\n }\n }, [ratingTableData]);\n\n const displayTable = (\n\n
\n \n );\n\n return (\n \n \n ค่าต่ำสุด : {ratingResponseSelected?.minLine1}\n \n \n ค่าสูงสุด : {ratingResponseSelected?.maxLine1}\n \n
\n\n \n {chunkRatingTable.map((ch) => {\n return (\n
\n\n \n \n \n
\n
\n );\n })}\n | GH | \nDischarge | \n
|---|---|
| {item.gageHeight} | \n{item.discharge} | \n
\n \n บันทึกข้อมูล\n
\n \n {isLoading ?
\n {displayExcelBtn && (\n \n
\n \n
\n\n ปี :
\n \n setDateSelected(ev)}\n value={dateSelected}\n noOptionsMessage={() => \"ไม่พบปี\"}\n isClearable={true}\n />\n
\n \n \n จัดการข้อมูล\n
\n \n \n \n ดาวน์โหลดไฟล์ตัวอย่าง\n \n
\n )}\n\n \n {ratingTableData.length ? (\n displayTable\n ) : (\n
\n \n );\n};\n\nexport default RatingTableImportAuto;\n","import React, { useState, useEffect } from \"react\";\nimport { Line } from \"react-chartjs-2\";\n\nconst ChartRatingTable = ({ ratingTableData }) => {\n const [chartData, setChartData] = useState();\n\n const chartGenerate = async () => {\n const chartLabel = ratingTableData[0].ratingTable\n .filter((item) => item.gageHeight.toFixed(2).slice(-1) == \"0\")\n .map((item) => item.discharge);\n\n const dataDistributed = ratingTableData.map((dataList, dataIndex) => {\n const ratingTableAbs = dataList.ratingTable.filter((item) => {\n return item.gageHeight.toFixed(2).slice(-1) == \"0\";\n });\n\n const chartDataLine1 = ratingTableAbs\n .filter((data) => data.ratingLineNo == 1)\n .map((item) => item.gageHeight);\n\n const chartDataLine2 = ratingTableAbs\n .filter((data) => data.ratingLineNo == 2)\n .map((item) => item.gageHeight);\n\n const random_rgba = () => {\n var o = Math.round,\n r = Math.random,\n s = 255;\n return (\n \"rgba(\" +\n o(r() * s) +\n \",\" +\n o(r() * s) +\n \",\" +\n o(r() * s) +\n \",\" +\n r().toFixed(1) +\n \")\"\n );\n };\n\n let setColor = random_rgba();\n\n if (dataIndex == 0) {\n setColor = \"red\";\n } else if (dataIndex == 1) {\n setColor = \"blue\";\n } else if (dataIndex == 2) {\n setColor = \"black\";\n } else if (dataIndex == 3) {\n setColor = \"orange\";\n } else if (dataIndex == 4) {\n setColor = \"green\";\n } else if (dataIndex == 5) {\n setColor = \"purple\";\n }\n\n return {\n label: `${dataList.label}`,\n data: chartDataLine1,\n type: \"line\",\n backgroundColor: setColor,\n borderColor: setColor,\n fill: false,\n pointRadius: 1,\n tension: 0.1,\n };\n });\n\n setChartData({\n labels: chartLabel,\n datasets: dataDistributed,\n });\n };\n\n let options = {\n scales: {\n x: {\n ticks: {\n maxTicksLimit: 10,\n maxRotation: 90,\n minRotation: 90,\n },\n },\n },\n plugins: {\n zoom: {\n zoom: {\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: true,\n },\n mode: \"x\",\n },\n pan: {\n enabled: true,\n mode: \"xy\",\n speed: 1,\n threshold: 1,\n },\n },\n },\n };\n\n useEffect(() => {\n if (ratingTableData.length) {\n chartGenerate();\n } else {\n setChartData();\n }\n }, [ratingTableData]);\n \n return (\n {alertMessage}
\n )}\n \n {chartData ?
\n );\n};\n\nexport default ChartRatingTable;\n","import React, { useEffect, useState } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimes, FaPencilAlt } from \"react-icons/fa\";\nimport { useForm } from \"react-hook-form\";\nimport TextInput from \"../../../Components/TextInput\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport Select from \"react-select\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport DatePicker from \"react-datepicker\";\nimport ChartRatingTable from \"../../../Components/ChartRatingTable\";\nimport { useToasts } from \"react-toast-notifications\";\nimport ModalConfirm from \"../../../Components/ModalConfirm\";\n\nconst ModalAddRatingModel = ({ type, ratingData, setIsAction }) => {\n const { addToast } = useToasts();\n\n const [isLoading, setIsLoading] = useState(false);\n\n const { register, handleSubmit, watch, reset, setValue } = useForm();\n const [modalIsOpen, setModalIsOpen] = useState(false);\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [dateSelected, setDateSelected] = useState(\"\");\n const [optionsYear, setOptionsYear] = useState([]);\n const [optionsYearRatingCurve, setOptionsYearRatingCurve] = useState([]);\n const [yearDataToDisplay, setYearDataToDisplay] = useState([]);\n const [yearDataToSelected, setYearDataToSelected] = useState(\"\");\n const [defValueRatingCurve, setDefValueRatingCurve] = useState([]);\n\n const [ratingResponse, setRatingResponse] = useState(\"\");\n const [ratingMasters, setRatingMasters] = useState(\"\");\n const [ratingTableData, setRatingTableData] = useState([]);\n const [modalConfirmOpen, setModalConfirmOpen] = useState(false);\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n padding: \"0\",\n minHeight: \"600px\",\n maxHeight: \"80vh\",\n minWidth: \"600px\",\n },\n };\n\n const styles = {\n container: {\n fontSize: \"18px\",\n width: \"100%\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n header: {\n backgroundColor: \"#065389\",\n height: \"35px\",\n color: \"white\",\n fontSize: \"18px\",\n marginBottom: \"5px\",\n },\n input: {\n height: \"30px\",\n fontSize: \"12px\",\n fontWeight: \"normal\",\n width: \"380px\",\n },\n addUserButton: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n },\n };\n\n const init = () => {\n setDateSelected(\"\");\n setYearDataToDisplay([]);\n setYearDataToSelected();\n setStationIdSelected();\n setStationsOfBasin();\n setBasinIdSelected();\n // setStationDetail();\n };\n\n const openModal = () => {\n setModalIsOpen(true);\n };\n\n const closeModal = () => {\n setModalIsOpen(false);\n init();\n };\n\n const onChangeYear = (dateString) => {\n if (!dateString) return null;\n\n const newYear = dateString.split(\"-\");\n newYear[0] = dateSelected.value;\n\n return newYear.join(\"-\");\n };\n\n const getYearOptions = () => {\n let yearOptions = [];\n const firstYear = 1962;\n const thisYear = new Date().getFullYear();\n\n for (let i = firstYear; i <= thisYear; i++) {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n };\n\n yearOptions.push(list);\n }\n\n setOptionsYear(yearOptions);\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchRatingMaster = () => {\n setIsLoading(true);\n dwrApi\n .get(`/RatingMasters/${ratingData.ratingMasterId}`)\n .then((res) => {\n setRatingMasters(res.data);\n })\n .catch((err) => {\n console.log(\"err RatingMasters\", err);\n })\n .finally(() => setIsLoading(false));\n };\n\n const fetchAllRatingMaster = () => {\n setIsLoading(true);\n dwrApi\n .get(`/RatingMasters`)\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: `${item.ratingMasterId} : ${new Date(\n item.year\n ).getFullYear()} ${item.ratingType.ratingTypeName}`,\n value: item,\n };\n });\n setOptionsYearRatingCurve(list);\n })\n .catch((err) => {\n console.log(\"err RatingMasters\", err);\n })\n .finally(() => setIsLoading(false));\n };\n\n const fetchRatingTable = () => {\n setIsLoading(true);\n dwrApi\n .get(`/RatingMasters/station/${stationIdSelected.value}`)\n .then((res) => {\n const list = res.data.map((item) => {\n return {\n label: `${item.ratingMasterId} : ${new Date(\n item.year\n ).getFullYear()} ${item.ratingType.ratingTypeName}`,\n value: item,\n };\n });\n setOptionsYearRatingCurve(list);\n\n setRatingResponse(res.data.length ? res.data[0] : \"\");\n })\n .catch((err) => {\n console.log(\"err fetchRatingTable\", err);\n })\n .finally(() => setIsLoading(false));\n };\n\n const checkRating = async () => {\n try {\n if (yearDataToSelected) {\n const { ratingMasterId, ratingTypeId, year, stationId } =\n yearDataToSelected?.value;\n const yearSelected = new Date(year).getFullYear();\n\n // เช็คด้วยปี\n const getData = await dwrApi.get(\n `/RatingMasters/Station/${stationId}/RatingType/${ratingTypeId}/Year/${dateSelected.value}`\n );\n\n // const ratingById = await dwrApi.get(`/RatingMasters/${ratingMasterId}`);\n\n // console.log(\"if\", getData?.data && ratingById?.data ? true : false);\n\n // if (getData?.data && ratingById?.data) {\n if (getData?.data) {\n setModalConfirmOpen(true);\n } else {\n onHandleSubmit();\n }\n }\n } catch (err) {\n console.error(err);\n }\n };\n\n const onHandleSubmit = async () => {\n setIsLoading(true);\n if (yearDataToSelected) {\n const { ratingMasterId, ratingTypeId, year, stationId } =\n yearDataToSelected?.value;\n const yearSelected = new Date(year).getFullYear();\n\n try {\n // const getData = await dwrApi.get(\n // `/RatingMasters/Station/${stationId}/RatingType/${ratingTypeId}/Year/${yearSelected}`\n // );\n\n const getData = await dwrApi.get(\n `/RatingMasters/Station/${stationId}/RatingType/${ratingTypeId}/Year/${dateSelected.value}`\n );\n\n const ratingById = await dwrApi.get(`/RatingMasters/${ratingMasterId}`);\n\n // console.log({ getData, ratingById });\n // if (!ratingById.data) {\n // throw \"บันทึกข้อมูลผิดพลาด\";\n // }\n\n console.log({ ratingData, getData, ratingById });\n\n const data = {\n stationId: ratingById?.data?.stationId,\n // ratingTypeId: ratingData?.ratingTypeId,\n ratingTypeId: ratingById?.data?.ratingTypeId,\n // year: ratingById?.data?.year, //year ของไฟล์รึว่า,\n year: String(dateSelected.value).concat(\"-01-01T00:00:00\"),\n ratingLineAmount: ratingById?.data?.ratingLineAmount,\n maxLine1: ratingById?.data?.maxLine1,\n minLine1: ratingById?.data?.minLine1,\n maxLine2: ratingById?.data?.maxLine2,\n minLine2: ratingById?.data?.minLine2,\n beginLine1Date1: onChangeYear(ratingById?.data?.beginLine1Date1),\n endLine1Date1: onChangeYear(ratingById?.data?.endLine1Date1),\n beginLine1Date2: onChangeYear(ratingById?.data?.beginLine1Date2),\n endLine1Date2: onChangeYear(ratingById?.data?.endLine1Date2),\n beginLine1Date3: onChangeYear(ratingById?.data?.beginLine1Date3),\n endLine1Date3: onChangeYear(ratingById?.data?.endLine1Date3),\n beginLine1Date4: onChangeYear(ratingById?.data?.beginLine1Date4),\n endLine1Date4: onChangeYear(ratingById?.data?.endLine1Date4),\n beginLine1Date5: onChangeYear(ratingById?.data?.beginLine1Date5),\n endLine1Date5: onChangeYear(ratingById?.data?.endLine1Date5),\n ratingTable: ratingById?.data?.ratingTable.map((item) => {\n return {\n ratingLineNo: item.ratingLineNo,\n gageHeight: item.gageHeight,\n discharge: item.discharge,\n };\n }),\n };\n\n let resRatingMaster = \"\";\n console.log({ getData, ratingData });\n\n if (type == \"edit\") {\n if (getData?.data) {\n console.log(\"case 1 : put edit\");\n resRatingMaster = await dwrApi.put(\n `/RatingMasters/${ratingData.ratingMasterId}`,\n {\n ...data,\n ratingMasterId: ratingData.ratingMasterId,\n }\n );\n\n await dwrApi\n .post(`/RatingMasters/${getData?.data?.ratingMasterId}/Active`)\n .then((res) => {\n setIsAction(true);\n })\n .catch((err) => {});\n } else {\n console.log(\"case 2 : post edit\");\n resRatingMaster = await dwrApi.post(`/RatingMasters`, data);\n await dwrApi\n .post(\n `/RatingMasters/${resRatingMaster?.data?.ratingMasterId}/Active`\n )\n .then((res) => {\n setIsAction(true);\n })\n .catch((err) => {});\n }\n } else {\n if (getData.data) {\n console.log(\"case 3 : put create\");\n resRatingMaster = await dwrApi.put(\n `/RatingMasters/${getData.data.ratingMasterId}`,\n {\n ...data,\n ratingMasterId: getData.data.ratingMasterId,\n }\n );\n\n await dwrApi\n .post(`/RatingMasters/${getData.data.ratingMasterId}/Active`)\n .then((res) => {\n setIsAction(true);\n })\n .catch((err) => {});\n } else {\n console.log(\"case 4 : post create\");\n resRatingMaster = await dwrApi.post(`/RatingMasters`, data);\n\n await dwrApi\n .post(\n `/RatingMasters/${resRatingMaster.data.ratingMasterId}/Active`\n )\n .then((res) => {\n setIsAction(true);\n })\n .catch((err) => {});\n }\n }\n\n console.log({ resRatingMaster });\n\n const coefData = await dwrApi.get(\n `/CoefDischarge/Station/${stationId}/Year/${dateSelected.value}`\n );\n\n const dataCoef = {\n stationId: stationId,\n // stationId: coefData?.data?.stationId,\n year: `${dateSelected.value}-01-01`,\n // year: ratingById?.data?.year,\n line: coefData?.data?.line,\n ratingTypeId: coefData?.data?.ratingTypeId,\n coefa1: coefData?.data?.coefa1,\n coefb1: coefData?.data?.coefb1,\n coefc1: coefData?.data?.coefc1,\n coefR1: coefData?.data?.coefR1,\n coefa2: coefData?.data?.coefa2,\n coefb2: coefData?.data?.coefb2,\n coefc2: coefData?.data?.coefc2,\n coefR2: coefData?.data?.coefR2,\n };\n\n if (coefData.data && coefData.data.coefDischargeId) {\n await dwrApi\n .put(`/CoefDischarge/${coefData.data.coefDischargeId}`, {\n ...dataCoef,\n coefDischargeId: coefData?.data?.coefDischargeId,\n })\n .then((res) => {\n console.log(\"put CoefDischarge\", res.data);\n });\n } else {\n await dwrApi.post(`/CoefDischarge`, dataCoef).then((res) => {\n console.log(\"post CoefDischarge\", res.data);\n });\n }\n\n closeModal();\n setModalConfirmOpen(false);\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n setIsLoading(false);\n } catch (err) {\n console.log({ err }, err?.response);\n addToast({err?.response?.data ?? \"มีบางอย่างผิดพลาด\"}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n setIsLoading(false);\n }\n }\n };\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n if (modalIsOpen) {\n // fetchAllRatingMaster();\n\n if (ratingData) {\n fetchRatingMaster();\n }\n }\n }, [modalIsOpen, ratingData]);\n\n useEffect(() => {\n if (stationIdSelected) {\n fetchRatingTable();\n }\n }, [stationIdSelected]);\n\n useEffect(() => {\n const getYear = optionsYear.find(\n (item) => item.value == new Date(ratingMasters.year).getFullYear()\n );\n\n if (ratingMasters && optionsYear.length) {\n setDateSelected(getYear);\n }\n }, [ratingMasters, optionsYear]);\n\n useEffect(() => {\n if (modalIsOpen && type === \"edit\" && optionsYearRatingCurve.length) {\n const getDefValueRatingCurve = optionsYearRatingCurve.find(\n (item) => item.value.ratingMasterId == ratingData.ratingMasterId\n );\n\n console.log({ getDefValueRatingCurve });\n\n setYearDataToDisplay([getDefValueRatingCurve]);\n }\n }, [optionsYearRatingCurve, ratingData, modalIsOpen]);\n\n useEffect(() => {\n let ratingTableList = [];\n \n if (yearDataToDisplay.length) {\n yearDataToDisplay.map((item) => {\n \n if (item.value.ratingLineAmount == 1) {\n const list = item.value.ratingTable.filter(\n (data) => data.ratingLineNo == 1\n );\n const obj = {\n label: item.label,\n ratingTable: list,\n };\n ratingTableList.push(obj);\n } else {\n const obj = {\n label: item.label,\n ratingTable: item.value.ratingTable,\n };\n ratingTableList.push(obj);\n }\n });\n }\n setRatingTableData(ratingTableList);\n }, [yearDataToDisplay]);\n\n useEffect(() => {\n if (!dateSelected) {\n setYearDataToDisplay([]);\n // setRatingTableData([]);\n }\n }, [dateSelected]);\n\n useEffect(() => {\n setBasinIdSelected();\n getYearOptions();\n }, []);\n\n return (\n\n {type === \"add\" ? (\n \n ดูกราฟเปรียบเทียบ Rating Curve และเลือก Rating Table เพื่อใช้งาน\n
\n ) : (\n \n \n
\n สร้างไฟล์ Rating Table เพื่อใช้งานใน Model
\n \n
\n \n
\n \n \n {/* */}\n \n
\n\n ปี :
\n \n setDateSelected(ev)}\n value={dateSelected}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={true}\n isDisabled={type == \"edit\" ? true : false}\n maxMenuHeight={180}\n />\n
\n \n
\n ปี และประเภทการทำ Rating :
\n \n setYearDataToDisplay(ev)}\n value={yearDataToDisplay}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={true}\n maxMenuHeight={180}\n />\n
\n \n
\n \n
\n\n เลือก Rating Curve เพื่อใช้กับโมเดล
\n \n setYearDataToSelected(ev)}\n value={yearDataToSelected}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={true}\n />\n
\n \n \n บันทึก\n
\n \n
\n );\n};\n\nexport default RatingTableModel;\n","import React, { useState, useEffect } from \"react\";\nimport DatePicker from \"react-datepicker\";\n\nconst PeriodDateInput = ({\n inputId,\n title,\n required,\n keyName1,\n keyName2,\n checkbox,\n form,\n Controller,\n prevMindate,\n maxDate,\n}) => {\n const { register, handleSubmit, control, reset, watch, setValue } = form;\n\n const [checkValue, setCheckValue] = useState(false);\n const value1 = watch(keyName1);\n const value2 = watch(keyName2);\n const checkboxEl = document.getElementById(inputId);\n\n const onHandleCheck = (ev) => {\n setCheckValue(ev.target.checked);\n\n if (ev.target.checked === false) {\n setValue(keyName1, \"\");\n setValue(keyName2, \"\");\n }\n };\n\n // useEffect(() => {\n // if (!checkValue) {\n // setValue(keyName1, \"\");\n // setValue(keyName2, \"\");\n // }\n // }, [checkValue]);\n\n useEffect(() => {\n if (value1 && value2 && checkboxEl) {\n console.log(\"checked\");\n checkboxEl.checked = true;\n setCheckValue(true);\n }\n }, [value1, value2, checkboxEl]);\n\n return (\n \n setSearchTerm(ev.target.value)}\n />\n
\n \n \n
\n );\n};\n\nexport default PeriodDateInput;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { FaTimesCircle } from \"react-icons/fa\";\n\nconst ModalRatingTableDetail = ({\n ratingTableDetail,\n isModalPreviewOpen,\n setIsModalPreviewOpen,\n isLoadingSubmit,\n ratingMasterId,\n onEditRatingTable,\n onSubmitRatingTable,\n dataTable,\n isCreateOnce,\n}) => {\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxWidth: \"90vw\",\n maxHeight: \"90vh\",\n },\n };\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n };\n\n const openModal = () => {\n setIsModalPreviewOpen(true);\n };\n\n const closeModal = () => {\n setIsModalPreviewOpen(false);\n };\n\n const displayGhTableDetail1 = (\n \n
\n \n {checkbox ? (\n
\n \n
\n \n
\n \n \n
\n \n (\n
\n \n
\n \n \n
\n \n (\n
\n \n \n \n
\n
\n );\n const displayGhTableDetail2 = (\n Rating Table 1
\n | unit | \n0.00 | \n0.01 | \n0.02 | \n0.03 | \n0.04 | \n0.05 | \n0.06 | \n0.07 | \n0.08 | \n0.09 | \ndiff | \n{item[0].gh.toFixed(2)} | \n {item.map((data, index) => {\n const existing =\n data.gh.toFixed(2).slice(-1) == index;\n\n return (\n <>\n {existing ? (\n\n {data.discharge} \n | \n ) : (\n - | \n )}\n \n );\n })}\n {filledItem.length\n ? filledSurplus.map((f) => {\n return (\n\n {f.toFixed(2)} \n | \n );\n })\n : \"\"}\n {item[0].diff} | \n \n );\n })\n : \"\"}\n \n );\n })}\n
|---|
\n \n \n
\n
\n );\n\n const displaySpiner = (\n Rating Table 2
\n | unit | \n0.00 | \n0.01 | \n0.02 | \n0.03 | \n0.04 | \n0.05 | \n0.06 | \n0.07 | \n0.08 | \n0.09 | \ndiff | \n{item[0].gh.toFixed(2)} | \n {item.map((data, index) => {\n const existing =\n data.gh.toFixed(2).slice(-1) == index;\n\n return (\n <>\n {existing ? (\n\n {data.discharge} \n | \n ) : (\n - | \n )}\n \n );\n })}\n {filledItem.length\n ? filledSurplus.map((f) => {\n return (\n\n {f.toFixed(2)} \n | \n );\n })\n : \"\"}\n {item[0].diff} | \n \n );\n })\n : \"\"}\n \n );\n })}\n
|---|
\n Loading...\n
\n );\n return (\n \n \n
\n );\n};\n\nexport default ModalRatingTableDetail;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"react-modal\";\nimport { Line } from \"react-chartjs-2\";\nimport { FaTimesCircle } from \"react-icons/fa\";\nimport { dwrApi } from \"../api/dwrApi\";\nimport { useToasts } from \"react-toast-notifications\";\n\nconst ModalRatingCurveChart = ({\n ratingMasterRes,\n data,\n modalRatingCurveOpen,\n setModalRatingCurveOpen,\n ratingTableResponse,\n ratingObsResponse,\n showSaveBtn,\n}) => {\n const [chartData, setChartData] = useState();\n const { addToast } = useToasts();\n const [isTable2, setIstable2] = useState(false);\n const [minCalulate, setMinCalulate] = useState(0);\n const [maxCalulate, setMaxCalulate] = useState(0);\n const [stepSize, setStepSize] = useState(10);\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538f\",\n color: \"#231F20\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n };\n\n const customStyles = {\n content: {\n top: \"50%\",\n left: \"50%\",\n right: \"auto\",\n bottom: \"auto\",\n marginRight: \"-50%\",\n transform: \"translate(-50%, -50%)\",\n maxHeight: \"90vh\",\n minWidth: \"800px\",\n padding: \"0\",\n },\n };\n\n const openModaRatingCurve = () => {\n setModalRatingCurveOpen(true);\n };\n\n const closeModaRatingCurve = () => {\n setModalRatingCurveOpen(false);\n };\n\n // var stepSize = 10;\n\n const chartGenerate = async () => {\n // let tempLabel1 = ratingTableResponse?.table1.map(\n // (item) => item.discharge\n // ) || [];\n // let tempLabel2 = ratingTableResponse?.table2.map(\n // (item) => item.discharge\n // ) || [];\n setIstable2(ratingTableResponse?.table2.length > 0 ? true : false);\n let sortArray =\n ratingTableResponse?.table1.concat(ratingTableResponse?.table2) || [];\n // console.log('sortArray 1', sortArray)\n sortArray?.sort((a, b) => a.discharge - b.discharge);\n // console.log('sortedArray', sortArray)\n const chartLabels = sortArray.map((item) => item.discharge) || [];\n\n let tableTemp1 =\n ratingTableResponse?.table1.map((item) => {\n return { ...item, tableNo: 1 };\n }) || [];\n let tableTemp2 =\n ratingTableResponse?.table2.map((item) => {\n return { ...item, tableNo: 2 };\n }) || [];\n\n // let concatTableTemp = tableTemp1.concat(tableTemp2);\n\n // let fullTableTempWithNull = tableTemp1.concat(tableTemp2)\n // let fullTableTemp = fullTableTempWithNull.filter((item, i) => {\n // return item.discharge != 0 || (item.discharge == 0 && i > 0 ? fullTableTempWithNull[i - 1].discharge != 0 : false)\n\n // })\n // fullTableTemp.sort((a, b) => a.discharge - b.discharge)\n // console.log('fullTableTemp', fullTableTemp)\n // const chartValues1 = fullTableTemp.map(item => {\n // return item.tableNo == 1 ? item.gh : null\n // })\n // const chartValues2 = fullTableTemp.map(item => {\n // return item.tableNo == 2 ? item.gh : null\n // })\n // console.log('c l', chartLabels);\n // console.log('c 1', chartValues1);\n // console.log('c 2', chartValues2);\n\n // const chartValues1 = ratingTableResponse?.table1.map((item) => item.gh);\n // const chartValues2 = ratingTableResponse?.table2.map((item) => item.gh);\n\n const chartValues1 = tableTemp1.map((item, i) => {\n return item.discharge != 0\n ? { x: item.discharge, y: item.gh }\n : { x: null, y: null };\n });\n\n const chartValues2 = tableTemp2.map((item, i) => {\n return item.discharge != 0\n ? { x: item.discharge, y: item.gh }\n : { x: null, y: null };\n });\n const concatArrayTemp = chartValues1.concat(chartValues2);\n const arrX = concatArrayTemp.map((item) => item.x || 0);\n const arrY = concatArrayTemp.map((item) => item.y || 0);\n\n setMinCalulate(Math.min(...arrY));\n setMaxCalulate(Math.max(...arrY));\n let minTemp = Math.abs(Math.min(...arrX));\n let maxTemp = Math.max(...arrX);\n let step = Math.ceil((minTemp + maxTemp) / concatArrayTemp.length);\n // stepSize = step;\n console.log({ arrX, min: Math.min(...arrX), max: Math.max(...arrX), step });\n setStepSize(step);\n // concatArrayTemp.map((item) => {\n // return Math.min(item.discharge);\n // })\n\n const scatterDatas = ratingObsResponse?.observe.map((item) => {\n return {\n x: item.totalDischarge,\n y: item.avgGageHeight,\n };\n });\n\n let datasets = [\n {\n label: \"Rating observe\",\n data: scatterDatas,\n type: \"scatter\",\n backgroundColor: \"#FF4081\",\n borderColor: \"#FF4081\",\n fill: false,\n pointRadius: 4,\n tension: 0.1,\n },\n {\n label: \"Rating Curve 1\",\n data: chartValues1,\n type: \"scatter\",\n showLine: true,\n backgroundColor: \"blue\",\n borderColor: \"blue\",\n fill: false,\n borderWidth: 2,\n pointRadius: 0,\n tension: 0.1,\n },\n ];\n\n if (chartValues2.length > 0) {\n datasets = [\n ...datasets,\n {\n label: \"Rating Curve 2\",\n data: chartValues2,\n type: \"scatter\",\n showLine: true,\n backgroundColor: \"red\",\n borderColor: \"red\",\n fill: false,\n borderWidth: 2,\n pointRadius: 0,\n tension: 0.1,\n },\n ];\n }\n setChartData({\n // labels: chartLabels.filter((value, i, self) => self.indexOf(value) === i),\n labels: chartLabels,\n datasets: datasets,\n });\n };\n\n let options = {\n scales: {\n x: {\n type: \"linear\",\n ticks: {\n maxRotation: 90,\n minRotation: 90,\n stepSize: stepSize,\n },\n },\n y: {\n suggestedMin: minCalulate,\n suggestedMax: maxCalulate,\n ticks: {},\n },\n },\n plugins: {\n zoom: {\n zoom: {\n wheel: {\n enabled: true,\n },\n pinch: {\n enabled: true,\n },\n mode: \"x\",\n },\n pan: {\n enabled: false,\n mode: \"xy\",\n speed: 1,\n threshold: 1,\n },\n },\n },\n };\n\n const onHandleSubmit = async () => {\n try {\n const {\n ratingTable,\n stationId,\n year,\n minLine1: watchMinLine1,\n maxLine1: watchMaxLine1,\n minLine2: watchMinLine2,\n maxLine2: watchMaxLine2,\n beginLine1Date1,\n endLine1Date1,\n beginLine1Date2,\n endLine1Date2,\n beginLine1Date3,\n endLine1Date3,\n beginLine1Date4,\n endLine1Date4,\n beginLine1Date5,\n endLine1Date5,\n type,\n } = data;\n\n let minLine1 =\n ratingTable >= 1 && !isNaN(watchMinLine1) ? +watchMinLine1 : null;\n let maxLine1 =\n ratingTable >= 1 && !isNaN(watchMaxLine1) ? +watchMaxLine1 : null;\n let minLine2 =\n ratingTable >= 2 && !isNaN(watchMinLine2) ? +watchMinLine2 : null;\n let maxLine2 =\n ratingTable >= 2 && !isNaN(watchMaxLine2) ? +watchMaxLine2 : null;\n\n let payload = { ...data, minLine1, maxLine1, minLine2, maxLine2 };\n\n let resDetail = await dwrApi.post(\n `/RatingMasters/RatingTable/Detail`,\n payload\n );\n const yearSelected = new Date(year).getFullYear();\n\n const getData = await dwrApi.get(\n `RatingMasters/Station/${stationId}/RatingType/${type}/Year/${yearSelected}`\n );\n console.log(\"getData\", getData);\n const { table1, table2 } = resDetail.data;\n let ratingData = {\n ratingMasterId: 0,\n ratingLineAmount: ratingTable,\n ratingTypeId: 1,\n minLine1,\n maxLine1,\n minLine2,\n maxLine2,\n ratingLineNo: table2.length > 0 ? 2 : 1,\n };\n let ratingTable1 = table1.map((item) => {\n return {\n ratingLineNo: 1,\n gageHeight: item.gh,\n discharge: item.discharge,\n };\n });\n let ratingTable2 = table2.map((item) => {\n return {\n ratingLineNo: 2,\n gageHeight: item.gh,\n discharge: item.discharge,\n };\n });\n let ratingData2 = {\n stationId: stationId,\n ratingTypeId: type,\n year: year,\n ratingMasterId: 0,\n ratingLineAmount: ratingTable,\n minLine1: watchMinLine1,\n maxLine1: watchMaxLine1,\n minLine2: watchMinLine2,\n maxLine2: watchMaxLine2,\n ratingTable: ratingTable1 ? ratingTable1.concat(ratingTable2) : [],\n beginLine1Date1,\n endLine1Date1,\n beginLine1Date2,\n endLine1Date2,\n beginLine1Date3,\n endLine1Date3,\n beginLine1Date4,\n endLine1Date4,\n beginLine1Date5,\n endLine1Date5,\n };\n // ratingTable: getData?.data?.ratingTable.map((item) => {\n // return {\n // ratingLineNo: item.ratingLineNo,\n // gageHeight: item.gageHeight,\n // discharge: item.discharge,\n // };\n // }),\n // if (!!ratingMasterRes && !!ratingMasterRes.ratingMasterId) {\n // let res = await dwrApi.put(`/RatingMasters`, ratingData);\n // console.log({ PUT: res });\n // addToast(\n
\n\n \n
\n \n
\n \n {ratingTableDetail?.fitlerTable1.flat().length\n ? displayGhTableDetail1\n : \"\"}\n {ratingTableDetail?.fitlerTable2.flat().length\n ? displayGhTableDetail2\n : \"\"}\n
\n \n \n ratingMasterId\n ? onEditRatingTable(dataTable)\n : onSubmitRatingTable(dataTable)\n }\n >\n {!isLoadingSubmit ? \"บันทึกข้อมูล\" : displaySpiner}\n \n
\n \n บันทึกข้อมูลสำเร็จ
, {\n // appearance: \"success\",\n // autoDismiss: true,\n // });\n // } else {\n // let res = await dwrApi.post(`/RatingMasters`, ratingData);\n\n // console.log({ POST: res });\n // addToast(บันทึกข้อมูลสำเร็จ
, {\n // appearance: \"success\",\n // autoDismiss: true,\n // });\n // }\n let res;\n if (getData.data) {\n res = await dwrApi.put(\n `/RatingMasters/${getData.data.ratingMasterId}`,\n {\n ...ratingData2,\n ratingMasterId: getData?.data?.ratingMasterId,\n }\n );\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n } else if (!getData.data) {\n res = await dwrApi.post(`/RatingMasters`, ratingData2);\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n }\n } catch (err) {\n console.error(err);\n\n addToast(บันทึกข้อมูลไม่สำเร็จ
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n }\n\n // await dwrApi.post(`/RatingMasters/RatingTable/Detail`, data).then((res) => {\n // console.log({ res })\n\n // // if (!ratingMasterRes && ratingMasterRes.ratingMasterId) {\n // // await dwrApi\n // // .post(`/RatingMasters`, ratingData)\n // // .then((res) => {\n // // console.log(res.data);\n // // })\n // // .catch((err) => {\n // // console.log(err);\n // // });\n // // }\n\n // }).catch(err => {\n // console.log(err);\n // })\n\n // const ratingData = {};\n // await dwrApi\n // .post(`/RatingMasters/RatingTable/Detail`, data)\n // .then((res) => {\n // console.log(res.data);\n // })\n // .catch((err) => {\n // console.log(err);\n // });\n // if (!ratingMasterRes && ratingMasterRes.ratingMasterId) {\n // await dwrApi\n // .post(`/RatingMasters`, ratingData)\n // .then((res) => {\n // console.log(res.data);\n // })\n // .catch((err) => {\n // console.log(err);\n // });\n // } else {\n // await dwrApi\n // .put(`/RatingMasters`, ratingData)\n // .then((res) => {\n // console.log(res.data);\n // })\n // .catch((err) => {\n // console.log(err);\n // });\n // }\n };\n useEffect(() => {\n setTimeout(() => {\n chartGenerate();\n }, 1000);\n }, [ratingTableResponse, ratingObsResponse]);\n\n const displayHeader = (\n\n
\n );\n\n return (\n สมการที่ใช้คำนวณ Q = c * (h-a)^b
\n {ratingObsResponse &&\n ratingObsResponse.coefc1 !== null &&\n ratingObsResponse.coefa1 !== null &&\n ratingObsResponse.r1 !== null ? (\n \n Rating Curve 1\n \n Q = {ratingObsResponse?.coefc1} * (h - {ratingObsResponse?.coefa1}\n )^\n {ratingObsResponse?.coefc1} R2 = {ratingObsResponse?.r1}\n \n
\n ) : (\n \"\"\n )}\n\n {isTable2 &&\n ratingObsResponse &&\n ratingObsResponse.coefc2 !== null &&\n ratingObsResponse.coefa2 !== null &&\n ratingObsResponse.r2 !== null ? (\n \n Rating Curve 2\n \n Q = {ratingObsResponse?.coefc2} * (h - {ratingObsResponse?.coefa2}\n )^\n {ratingObsResponse?.coefc2} R2 = {ratingObsResponse?.r2}\n \n
\n ) : (\n \"\"\n )}\n \n \n {displayHeader}\n
\n \n \n );\n};\n\nexport default ModalRatingCurveChart;\n","import React, { useState, useEffect } from \"react\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport TextInput from \"../../../Components/TextInput\";\nimport { useForm, useFieldArray, Controller } from \"react-hook-form\";\nimport PeriodDateInput from \"../../../Components/PeriodDateInput\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { FaChevronLeft } from \"react-icons/fa\";\nimport _ from \"lodash\";\nimport ModalRatingTableDetail from \"../../../Components/ModalRatingTableDetail\";\nimport ModalRatingCurveChart from \"../../../Components/ModalRatingCurveChart\";\nimport { useHistory } from \"react-router-dom\";\n\nconst RatingTableManual = () => {\n const { addToast } = useToasts();\n const history = useHistory();\n const [isModalPreviewOpen, setIsModalPreviewOpen] = useState(false);\n\n const optionsRatingTable = [\n { label: 1, value: 1 },\n { label: 2, value: 2 },\n ];\n\n const [isCalculating, setIsCalculating] = useState(false);\n const [isFetching, setIsFetching] = useState(false);\n const [isCreateOnce, setIsCreateOnce] = useState(false);\n const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);\n const [startDate, setStartDate] = useState(\"\");\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [optionsYear, setOptionsYear] = useState([]);\n const [ratingTableSelected, setRatingTableSelected] = useState(\n optionsRatingTable[0]\n );\n\n const [ratingMasterRes, setRatingMasterRes] = useState(\"\");\n const [ratingMasterId, setRatingMasterId] = useState(\"\");\n\n const [isShowRatingTable, setIsShowRatingTable] = useState(false);\n const [modalRatingCurveOpen, setModalRatingCurveOpen] = useState(false);\n const [isShowRatingTableDetail, setIsShowRatingTableDetail] = useState(false);\n const [dailyGageHeight, setDailyGageHeight] = useState(\"\");\n\n const [ratingObsResponse, setRatingObsResponse] = useState();\n const [ratingTableResponse, setRatingTableResponse] = useState();\n\n const [ratingTableDetail, setRatingTableDetail] = useState();\n const [validButton, setValidButton] = useState(false);\n\n const hooksForm = useForm();\n const { register, handleSubmit, control, reset, watch, setValue } = hooksForm;\n\n const { fields: ratingTable1Field } = useFieldArray({\n control: control,\n name: \"ratingTable1\",\n });\n const { fields: ratingTable2Field } = useFieldArray({\n control: control,\n name: \"ratingTable2\",\n });\n\n const watchRatingTable1 = watch(\"ratingTable1\");\n const watchRatingTable2 = watch(\"ratingTable2\");\n\n const dataTable = {\n ratingTable1: watchRatingTable1,\n ratingTable2: watchRatingTable2,\n };\n\n const watchMinLine1 = watch(\"minLine1\");\n const watchMaxLine1 = watch(\"maxLine1\");\n const watchMinLine2 = watch(\"minLine2\");\n const watchMaxLine2 = watch(\"maxLine2\");\n\n const watchBeginLine1Date1 = watch(\"beginLine1Date1\");\n const watchEndLine1Date1 = watch(\"endLine1Date1\");\n const watchBeginLine1Date2 = watch(\"beginLine1Date2\");\n const watchEndLine1Date2 = watch(\"endLine1Date2\");\n const watchBeginLine1Date3 = watch(\"beginLine1Date3\");\n const watchEndLine1Date3 = watch(\"endLine1Date3\");\n const watchBeginLine1Date4 = watch(\"beginLine1Date4\");\n const watchEndLine1Date4 = watch(\"endLine1Date4\");\n const watchBeginLine1Date5 = watch(\"beginLine1Date5\");\n const watchEndLine1Date5 = watch(\"endLine1Date5\");\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n headerTitle: {\n backgroundColor: \"#06538F\",\n height: \"35px\",\n color: \"white\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n textInput: {\n background: \"white\",\n },\n detailBox: {\n background: \"#06538F\",\n minHeight: \"50px\",\n maxWidth: \"400px\",\n margin: \"auto\",\n color: \"white\",\n padding: \"5px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertDateY = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const getYearOptions = () => {\n let yearOptions = [];\n const firstYear = 1962;\n const thisYear = new Date().getFullYear();\n\n for (let i = firstYear; i <= thisYear; i++) {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n };\n\n yearOptions.push(list);\n }\n\n setOptionsYear(yearOptions);\n };\n\n const fetchRatingTable = async () => {\n // console.log('fetchRatingTable', stationIdSelected, startDate)\n if (stationIdSelected && startDate) {\n setIsFetching(true);\n setIsShowRatingTableDetail(true);\n let type = 0;\n await dwrApi\n .get(\n `/RatingMasters/station/${stationIdSelected.value}/RatingType/${type}/Year/${startDate.value}`\n )\n .then((res) => {\n // console.log(\"res RatingMasters\", res);\n // console.log(\"res RatingMasters data\", res?.data);\n setRatingMasterRes(res.data);\n setRatingMasterId(res?.data?.ratingMasterId);\n })\n .catch((err) => {\n console.log(\"err RatingMasters\", err.message);\n })\n .finally(() => {\n setIsFetching(false);\n });\n\n await dwrApi\n .get(\n `/DailyGageHeights/Station/${stationIdSelected.value}/Year/${startDate.value}/GetMaxMin`\n )\n .then((res) => {\n setDailyGageHeight(res.data);\n })\n .catch((err) => {\n console.log(\"err GetMin\", err.message);\n });\n }\n };\n\n const onFetchRatingTable = async () => {\n setIsCalculating(true);\n\n const data = {\n ratingTable: +ratingTableSelected.value,\n stationId: +stationIdSelected.value,\n year: `${startDate.value}-01-01`,\n // year: `${startDate.value}`,\n minLine1: +watchMinLine1,\n maxLine1: +watchMaxLine1 + 0.09,\n minLine2: +watchMinLine2,\n maxLine2: +watchMaxLine2 + (+ratingTableSelected.value == 2 ? 0.09 : 0),\n };\n\n await dwrApi\n .post(`/RatingMasters/RatingTable`, data)\n .then((res) => {\n setRatingTableResponse(res.data);\n setValue(\"ratingTable1\", res.data[\"table1\"]);\n setValue(\"ratingTable2\", res.data[\"table2\"]);\n // console.log(\"watchMinLine\", watchMinLine1, watchMaxLine1);\n // console.log(\"data\", res.data.table1);\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n })\n .finally(() => {\n setIsCalculating(false);\n setIsShowRatingTable(true);\n });\n };\n\n const filterTableData = (tableData) => {\n const filter00 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 1;\n });\n const filter10 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"1\";\n });\n const filter20 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"2\";\n });\n const filter30 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"3\";\n });\n const filter40 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"4\";\n });\n const filter50 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"5\";\n });\n const filter60 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"6\";\n });\n const filter70 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"7\";\n });\n const filter80 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"8\";\n });\n const filter90 = tableData.filter((item) => {\n const getNum = Math.trunc(item.gh).toString();\n return getNum.length === 2 && getNum.slice(0, 1) == \"9\";\n });\n\n const listFilter = [\n filter00,\n filter10,\n filter20,\n filter30,\n filter40,\n filter50,\n filter60,\n filter70,\n filter80,\n filter90,\n ];\n\n const chunkListFilter = listFilter.map((item) => {\n return _.chunk(item, 10);\n });\n\n return chunkListFilter;\n };\n\n const onPerviewRatingTableDetail = async () => {\n const data = {\n ratingTable: +ratingTableSelected.value,\n stationId: +stationIdSelected.value,\n year: `${startDate.value}-01-01`,\n minLine1: +watchMinLine1,\n maxLine1: +watchMaxLine1 + 0.09,\n minLine2: +watchMinLine2,\n maxLine2: +watchMaxLine2 + (+ratingTableSelected.value == 2 ? 0.09 : 0),\n };\n console.log(\"Detail\", data);\n await dwrApi\n .post(`/RatingMasters/RatingTable/Detail`, data)\n .then((res) => {\n const fitlerTable1 = filterTableData(res.data.table1);\n const fitlerTable2 = filterTableData(res.data.table2);\n\n setRatingTableDetail({ fitlerTable1, fitlerTable2 });\n setIsModalPreviewOpen(true);\n })\n .catch((err) => {\n console.log(\"err\", err.message);\n });\n };\n const fetchRatingTableId = async (ev) => {\n await dwrApi\n .get(\n `/RatingMasters/station/${stationIdSelected.value}/RatingType/0/Year/${startDate.value}`\n )\n .then((res) => {\n setRatingMasterId(res?.data?.ratingMasterId);\n })\n .catch((err) => {\n console.log(\"err RatingMasters\", err.message);\n })\n .finally(() => {\n setIsFetching(false);\n });\n };\n const onSubmitRatingTable = (ev) => {\n setIsLoadingSubmit(true);\n const ratingTableArr1 = ev.ratingTable1.map((item, index) => {\n return {\n ratingLineNo: 1,\n gageHeight: +item.gh,\n discharge: +item.discharge,\n };\n });\n const ratingTableArr2 = ev.ratingTable2.map((item, index) => {\n return {\n ratingLineNo: 2,\n gageHeight: +item.gh,\n discharge: +item.discharge,\n };\n });\n\n let data = {\n stationId: stationIdSelected.value,\n ratingTypeId: 0,\n year: `${startDate.value}-01-01`,\n // year: `${startDate.value}`,\n ratingLineAmount: +ratingTableSelected.value,\n minLine1: +watchMinLine1,\n maxLine1: +watchMaxLine1,\n minLine2: watchMinLine2 ? +watchMinLine2 : null,\n maxLine2: watchMinLine2 ? +watchMaxLine2 : null,\n ratingTable: ratingTableArr1.concat(ratingTableArr2),\n };\n\n if (+ratingTableSelected.value > 1) {\n data = {\n ...data,\n beginLine1Date1: watch(\"beginLine1Date1\")\n ? convertDateY(watch(\"beginLine1Date1\"))\n : null,\n endLine1Date1: watch(\"endLine1Date1\")\n ? convertDateY(watch(\"endLine1Date1\"))\n : null,\n beginLine1Date2: watch(\"beginLine1Date2\")\n ? convertDateY(watch(\"beginLine1Date2\"))\n : null,\n endLine1Date2: watch(\"endLine1Date2\")\n ? convertDateY(watch(\"endLine1Date2\"))\n : null,\n beginLine1Date3: watch(\"beginLine1Date3\")\n ? convertDateY(watch(\"beginLine1Date3\"))\n : null,\n endLine1Date3: watch(\"endLine1Date3\")\n ? convertDateY(watch(\"endLine1Date3\"))\n : null,\n beginLine1Date4: watch(\"beginLine1Date4\")\n ? convertDateY(watch(\"beginLine1Date4\"))\n : null,\n endLine1Date4: watch(\"endLine1Date4\")\n ? convertDateY(watch(\"endLine1Date4\"))\n : null,\n beginLine1Date5: watch(\"beginLine1Date5\")\n ? convertDateY(watch(\"beginLine1Date5\"))\n : null,\n endLine1Date5: watch(\"endLine1Date5\")\n ? convertDateY(watch(\"endLine1Date5\"))\n : null,\n };\n }\n\n dwrApi\n .post(`RatingMasters`, data)\n .then((res) => {\n addToast(\n {chartData ?
\n \n {showSaveBtn ? (\n \n บันทึก Rating Table\n
\n ) : (\n \"\"\n )}\n บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n\n setTimeout(() => {\n // history.go();\n setIsModalPreviewOpen(false);\n setIsShowRatingTable(false);\n }, 1000);\n })\n .catch((err) => {\n addToast({err.response.data}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoadingSubmit(false);\n setIsCreateOnce(true);\n fetchRatingTableId(ev);\n });\n };\n\n const onEditRatingTable = (ev) => {\n setIsLoadingSubmit(true);\n\n const ratingTableArr1 = ev.ratingTable1.map((item, index) => {\n return {\n ratingLineNo: 1,\n gageHeight: +item.gh,\n discharge: +item.discharge,\n };\n });\n\n const ratingTableArr2 = ev.ratingTable2.map((item, index) => {\n return {\n ratingLineNo: 2,\n gageHeight: +item.gh,\n discharge: +item.discharge,\n };\n });\n\n let data = {\n ratingMasterId: isCreateOnce\n ? ratingMasterId\n : +ratingMasterRes?.ratingMasterId,\n stationId: +stationIdSelected.value,\n ratingTypeId: 0,\n year: `${startDate.value}-01-01`,\n ratingLineAmount: +ratingTableSelected.value,\n minLine1: +watchMinLine1,\n maxLine1: +watchMaxLine1,\n minLine2: watchMinLine2 ? +watchMinLine2 : null,\n maxLine2: watchMinLine2 ? +watchMaxLine2 : null,\n\n ratingTable: ratingTableArr1.concat(ratingTableArr2),\n beginLine1Date1: null,\n beginLine1Date2: null,\n beginLine1Date3: null,\n beginLine1Date4: null,\n beginLine1Date5: null,\n beginLine2Date1: null,\n beginLine2Date2: null,\n endLine1Date1: null,\n endLine1Date2: null,\n endLine1Date3: null,\n endLine1Date4: null,\n endLine1Date5: null,\n endLine2Date1: null,\n endLine2Date2: null,\n };\n if (+ratingTableSelected.value > 1) {\n data = {\n ...data,\n beginLine1Date1: watch(\"beginLine1Date1\")\n ? convertDateY(watch(\"beginLine1Date1\"))\n : null,\n endLine1Date1: watch(\"endLine1Date1\")\n ? convertDateY(watch(\"endLine1Date1\"))\n : null,\n beginLine1Date2: watch(\"beginLine1Date2\")\n ? convertDateY(watch(\"beginLine1Date2\"))\n : null,\n endLine1Date2: watch(\"endLine1Date2\")\n ? convertDateY(watch(\"endLine1Date2\"))\n : null,\n beginLine1Date3: watch(\"beginLine1Date3\")\n ? convertDateY(watch(\"beginLine1Date3\"))\n : null,\n endLine1Date3: watch(\"endLine1Date3\")\n ? convertDateY(watch(\"endLine1Date3\"))\n : null,\n beginLine1Date4: watch(\"beginLine1Date4\")\n ? convertDateY(watch(\"beginLine1Date4\"))\n : null,\n endLine1Date4: watch(\"endLine1Date4\")\n ? convertDateY(watch(\"endLine1Date4\"))\n : null,\n beginLine1Date5: watch(\"beginLine1Date5\")\n ? convertDateY(watch(\"beginLine1Date5\"))\n : null,\n endLine1Date5: watch(\"endLine1Date5\")\n ? convertDateY(watch(\"endLine1Date5\"))\n : null,\n };\n }\n\n dwrApi\n .put(\n `RatingMasters/${\n isCreateOnce ? ratingMasterId : +ratingMasterRes?.ratingMasterId\n }`,\n data\n )\n .then((res) => {\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n\n setTimeout(() => {\n // history.go();\n setIsModalPreviewOpen(false);\n setIsShowRatingTable(false);\n }, 1000);\n })\n .catch((err) => {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n setIsLoadingSubmit(false);\n });\n };\n\n const onGetRatingCurve = async () => {\n const dataObs = {\n ratingTable: ratingTableSelected.value == \"1\" ? 1 : 2,\n stationId: stationIdSelected?.value,\n year: `${startDate.value}-01-01`,\n };\n await dwrApi\n .post(`/RatingMasters/observe`, dataObs)\n .then((res) => {\n console.log(\"observe\", res.data);\n setRatingObsResponse(res.data);\n })\n .catch((err) => {\n console.log(\"err observe\", err.message);\n });\n\n setModalRatingCurveOpen(true);\n };\n\n useEffect(() => {\n getYearOptions();\n }, []);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n reset({\n minLine1: \"\",\n maxLine1: \"\",\n minLine2: \"\",\n maxLine2: \"\",\n });\n }, [stationIdSelected, startDate]);\n\n useEffect(() => {\n // console.log(\"asd\", ratingMasterRes?.beginLine1Date1);\n\n const resValue = {\n beginLine1Date1: ratingMasterRes?.beginLine1Date1\n ? new Date(ratingMasterRes?.beginLine1Date1)\n : null,\n beginLine1Date2: ratingMasterRes?.beginLine1Date2\n ? new Date(ratingMasterRes?.beginLine1Date2)\n : null,\n beginLine1Date3: ratingMasterRes?.beginLine1Date3\n ? new Date(ratingMasterRes?.beginLine1Date3)\n : null,\n beginLine1Date4: ratingMasterRes?.beginLine1Date4\n ? new Date(ratingMasterRes?.beginLine1Date4)\n : null,\n beginLine1Date5: ratingMasterRes?.beginLine1Date5\n ? new Date(ratingMasterRes?.beginLine1Date5)\n : null,\n beginLine2Date1: ratingMasterRes?.beginLine2Date1\n ? new Date(ratingMasterRes?.beginLine2Date1)\n : null,\n beginLine2Date2: ratingMasterRes?.beginLine2Date2\n ? new Date(ratingMasterRes?.beginLine2Date2)\n : null,\n endLine1Date1: ratingMasterRes?.endLine1Date1\n ? new Date(ratingMasterRes?.endLine1Date1)\n : null,\n endLine1Date2: ratingMasterRes?.endLine1Date2\n ? new Date(ratingMasterRes?.endLine1Date2)\n : null,\n endLine1Date3: ratingMasterRes?.endLine1Date3\n ? new Date(ratingMasterRes?.endLine1Date3)\n : null,\n endLine1Date4: ratingMasterRes?.endLine1Date4\n ? new Date(ratingMasterRes?.endLine1Date4)\n : null,\n endLine1Date5: ratingMasterRes?.endLine1Date5\n ? new Date(ratingMasterRes?.endLine1Date5)\n : null,\n endLine2Date1: ratingMasterRes?.endLine2Date1\n ? new Date(ratingMasterRes?.endLine2Date1)\n : null,\n endLine2Date2: ratingMasterRes?.endLine2Date2\n ? new Date(ratingMasterRes?.endLine2Date2)\n : null,\n maxLine1: ratingMasterRes?.maxLine1,\n maxLine2: ratingMasterRes?.maxLine2,\n minLine1: ratingMasterRes?.minLine1,\n minLine2: ratingMasterRes?.minLine2,\n // maxLine1: \"\",\n // maxLine2: \"\",\n // minLine1: \"\",\n // minLine2: \"\",\n };\n\n if (ratingMasterRes) {\n const getRatingLine = optionsRatingTable.find(\n (item) => item.value == ratingMasterRes.ratingLineAmount\n );\n\n setRatingTableSelected(getRatingLine);\n reset(resValue);\n }\n }, [ratingMasterRes]);\n\n useEffect(() => {\n setIsShowRatingTableDetail(false);\n setRatingTableSelected(optionsRatingTable[0]);\n }, [stationIdSelected, startDate]);\n\n useEffect(() => {\n setStartDate(\"\");\n }, [stationIdSelected]);\n\n useEffect(() => {\n let valid = false;\n if (ratingTableSelected?.value == 1) {\n valid = watchMinLine1 && watchMaxLine1 ? false : true;\n } else {\n valid =\n watchMinLine1 && watchMaxLine1 && watchMinLine2 && watchMaxLine2\n ? false\n : true;\n }\n setValidButton(valid);\n }, [\n ratingTableSelected,\n watchMinLine1,\n watchMaxLine1,\n watchMinLine2,\n watchMaxLine2,\n ]);\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n const displaySubDetailBox = (\n \n
\n );\n\n const displayDetailBox = (\n รายละเอียดของตาราง
\n \n \n ค่าระดับน้ำต่ำที่สุดของปี{\" \"}\n {dailyGageHeight?.dailyGageHeightMinYear != null\n ? dailyGageHeight?.dailyGageHeightMinYear\n : \"-\"}{\" \"}\n เมตร\n \n \n เมื่อวันที่{\" \"}\n {!!dailyGageHeight?.dailyGageHeightMinYearDate\n ? convertDate(dailyGageHeight?.dailyGageHeightMinYearDate)\n : \"-\"}{\" \"}\n \n
\n \n \n ค่าระดับน้ำสูงที่สุดของปี{\" \"}\n {dailyGageHeight?.dailyGageHeightMaxYear != null\n ? dailyGageHeight?.dailyGageHeightMaxYear\n : \"-\"}{\" \"}\n เมตร\n \n \n เมื่อวันที่{\" \"}\n {!!dailyGageHeight?.dailyGageHeightMaxYearDate\n ? convertDate(dailyGageHeight?.dailyGageHeightMaxYearDate)\n : \"-\"}{\" \"}\n \n
\n \n
\n );\n\n const displayStationDetailBox = (\n \n \n
\n {displaySubDetailBox}
\n \n
\n );\n\n const displayForm = (\n <>\n \n
\n {/* จำนวน Rating Table
\n \n setRatingTableSelected(ev)}\n value={ratingTableSelected}\n defaultValues={optionsRatingTable[0]}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n />\n
\n \n \n
*/}\n \n
\n \n
\n \n สถานี : \n {stationDetail.length ? (\n \n {stationDetail[0].stationLabel} : {stationDetail[0].stationTh}\n \n ) : (\n \"\"\n )}\n
\n \n ปี ค.ศ. (พ.ศ.) : \n {startDate ? {startDate.value} : \"\"}\n
\n \n จำนวน Rating Table : \n {ratingTableSelected ? (\n {ratingTableSelected.value} ตาราง\n ) : (\n \"\"\n )}\n
\n \n
\n\n ปี
\n \n setStartDate(ev)}\n value={startDate}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={true}\n />\n
\n \n \n {!isFetching ? \"จัดการข้อมูล\" : displaySpiner}\n \n
\n \n );\n\n const displayRatingTable1 = (\n \n
\n );\n\n const displayGhTable1 = (\n Rating Table
\n \n
\n {ratingTableSelected.value == 2 ? (\n <>\n ตารางที่ 1
\n \n
\n \n
\n \n
\n \n ) : (\n \"\"\n )}\n ตารางที่ 2
\n \n
\n \n
\n \n \n \n
\n
\n );\n const displayGhTable2 = (\n | Rating Table ที่ : 1 | \n|
|---|---|
| GH | \nDischarge | \n
| \n | \n \n | \n
\n \n \n
\n
\n );\n\n const displayGageHeighTable = (\n \n );\n\n return (\n | Rating Table ที่ : 2 | \n|
|---|---|
| GH | \nDischarge | \n
| \n | \n \n | \n
\n
\n \n\n {displaySubDetailBox}\n {displayGageHeighTable}\n \n ) : (\n <>\n \n \n setIsShowRatingTable(false)}\n >\n
\n \n บันทึก/แก้ไข ข้อมูล Rating Table แบบ Manual\n
\n \n \n {displayForm}\n {isShowRatingTableDetail ? (\n <>\n {displayStationDetailBox}\n {displayDetailBox}\n\n {displayRatingTable1}\n
\n \n )}\n \n );\n};\n\nexport default RatingTableManual;\n","import React, { useState, useEffect } from \"react\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport TextInput from \"../../../Components/TextInput\";\nimport PeriodDateInput from \"../../../Components/PeriodDateInput\";\nimport ModalRatingCurveChart from \"../../../Components/ModalRatingCurveChart\";\n\nconst RatingTableAuto = () => {\n const { addToast } = useToasts();\n\n const defaultValues = {\n ratingTable: null,\n hoValue: \"\",\n minLine1: \"\",\n maxLine1: \"\",\n minLine2: \"\",\n maxLine2: \"\",\n period1: \"\",\n period2: \"\",\n };\n\n const convertDateY = (value) => {\n if (!value) {\n return null;\n }\n\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const form = useForm({ defaultValues });\n const { register, handleSubmit, control, reset, watch, setValue } = form;\n\n const [isFetching, setIsFetching] = useState(false);\n const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);\n const [startDate, setStartDate] = useState(\"\");\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [optionsYear, setOptionsYear] = useState([]);\n\n const [modalRatingCurveOpen, setModalRatingCurveOpen] = useState(false);\n\n const [ratingMasterRes, setRatingMasterRes] = useState(\"\");\n const [isShowContent, setIsShowContent] = useState(false);\n const [ghMin, setGhMin] = useState(\"\");\n const [ghMax, setGhMax] = useState(\"\");\n const [dischargeCalcMin, setDischargeCalcMin] = useState(\"\");\n const [dischargeCalcMax, setDischargeCalcMax] = useState(\"\");\n const [ratingTableResponse, setRatingTableResponse] = useState();\n const [ratingObsResponse, setRatingObsResponse] = useState();\n const watchRatingTable = watch(\"ratingTable\");\n const watchMinLine1 = watch(\"minLine1\");\n const watchMaxLine1 = watch(\"maxLine1\");\n const watchMinLine2 = watch(\"minLine2\");\n const watchMaxLine2 = watch(\"maxLine2\");\n const watchHoValue = watch(\"hoValue\");\n const watchBeginLine1Date1 = watch(\"beginLine1Date1\");\n const watchBeginLine1Date2 = watch(\"beginLine1Date2\");\n const watchBeginLine1Date3 = watch(\"beginLine1Date3\");\n const watchBeginLine1Date4 = watch(\"beginLine1Date4\");\n const watchBeginLine1Date5 = watch(\"beginLine1Date5\");\n const watchEndLine1Date1 = watch(\"endLine1Date1\");\n const watchEndLine1Date2 = watch(\"endLine1Date2\");\n const watchEndLine1Date3 = watch(\"endLine1Date3\");\n const watchEndLine1Date4 = watch(\"endLine1Date4\");\n const watchEndLine1Date5 = watch(\"endLine1Date5\");\n const [validButton, setValidButton] = useState(false);\n\n const getData = {\n ratingTable: watchRatingTable && watchRatingTable.value == \"3\" ? 2 : 1,\n stationId: stationIdSelected?.value,\n year: `${startDate.value}-01-01`,\n // year: `${startDate.value}`,\n minLine1: +watchMinLine1,\n maxLine1: +watchMaxLine1,\n minLine2: +watchMinLine2,\n maxLine2: +watchMaxLine2,\n\n type: 1,\n // endLine1Date1: '',\n // beginLine2Date1: '',\n // endLine2Date1: '',\n // beginLine3Date1: '',\n // endLine3Date1: '',\n // beginLine4Date1: '',\n // endLine4Date1: '',\n // beginLine5Date1: '',\n // endLine5Date1: ''\n };\n\n const getDataWithTime = {\n ratingTable: watchRatingTable && watchRatingTable.value == \"3\" ? 2 : 1,\n stationId: stationIdSelected?.value,\n year: `${startDate.value}-01-01`,\n minLine1: +watchMinLine1,\n maxLine1: +watchMaxLine1,\n minLine2: +watchMinLine2,\n maxLine2: +watchMaxLine2,\n type: 1,\n beginLine1Date1: convertDateY(watchBeginLine1Date1),\n endLine1Date1: convertDateY(watchEndLine1Date1),\n beginLine1Date2: convertDateY(watchBeginLine1Date2),\n endLine1Date2: convertDateY(watchEndLine1Date2),\n beginLine1Date3: convertDateY(watchBeginLine1Date3),\n endLine1Date3: convertDateY(watchEndLine1Date3),\n beginLine1Date4: convertDateY(watchBeginLine1Date4),\n endLine1Date4: convertDateY(watchEndLine1Date4),\n beginLine1Date5: convertDateY(watchBeginLine1Date5),\n endLine1Date5: convertDateY(watchEndLine1Date5),\n };\n\n const styles = {\n header: {\n background: \"#06538F\",\n height: \"34px\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n textInput: {\n background: \"white\",\n },\n detailBox: {\n background: \"rgba(223,244,255,0.5)\",\n minHeight: \"50px\",\n padding: \"5px\",\n },\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n };\n\n const optionsRatingCurve = [\n { label: \"Rating Curve แบบเส้นเดียว\", value: \"1\" },\n { label: \"Rating Curve แบบเส้นเดียว แต่เปลี่ยนแนวโน้ม\", value: \"2\" },\n { label: \"Rating Curve แบบสองเส้น \", value: \"3\" },\n ];\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}-${month}-${year}`;\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const getYearOptions = () => {\n let yearOptions = [];\n const firstYear = 1962;\n const thisYear = new Date().getFullYear();\n\n for (let i = firstYear; i <= thisYear; i++) {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n };\n\n yearOptions.push(list);\n }\n\n setOptionsYear(yearOptions);\n };\n\n const fetchRatingTable = async () => {\n if (stationIdSelected && startDate) {\n setIsShowContent(true);\n setIsFetching(true);\n let type = 1;\n await dwrApi\n .get(\n `/RatingMasters/station/${stationIdSelected.value}/RatingType/${type}/Year/${startDate.value}`\n )\n .then((res) => {\n setRatingMasterRes(res.data);\n\n const list = optionsRatingCurve.find(\n (item) => item.value == res.data.ratingLineAmount\n );\n\n setValue(\"ratingTable\", list);\n setValue(\"minLine1\", res.data.minLine1);\n setValue(\"minLine2\", res.data.minLine2);\n setValue(\"maxLine1\", res.data.maxLine1);\n setValue(\"maxLine2\", res.data.maxLine2);\n\n setValue(\n \"beginLine1Date1\",\n res.data.beginLine1Date1 ? new Date(res.data.beginLine1Date1) : null\n );\n setValue(\n \"endLine1Date1\",\n res.data.endLine1Date1 ? new Date(res.data.endLine1Date1) : null\n );\n setValue(\n \"beginLine1Date2\",\n res.data.beginLine1Date2 ? new Date(res.data.beginLine1Date2) : null\n );\n setValue(\n \"endLine1Date2\",\n res.data.endLine1Date2 ? new Date(res.data.endLine1Date2) : null\n );\n setValue(\n \"beginLine1Date3\",\n res.data.beginLine1Date3 ? new Date(res.data.beginLine1Date3) : null\n );\n setValue(\n \"endLine1Date3\",\n res.data.endLine1Date3 ? new Date(res.data.endLine1Date3) : null\n );\n setValue(\n \"beginLine1Date4\",\n res.data.beginLine1Date4 ? new Date(res.data.beginLine1Date4) : null\n );\n setValue(\n \"endLine1Date4\",\n res.data.endLine1Date4 ? new Date(res.data.endLine1Date4) : null\n );\n setValue(\n \"beginLine1Date5\",\n res.data.beginLine1Date5 ? new Date(res.data.beginLine1Date5) : null\n );\n setValue(\n \"endLine1Date5\",\n res.data.endLine1Date5 ? new Date(res.data.endLine1Date5) : null\n );\n })\n .catch((err) => {\n console.log(\"err RatingMasters\", err.message);\n })\n .finally(() => {\n setIsFetching(false);\n });\n\n await dwrApi\n .get(\n `/DailyGageHeights/Station/${stationIdSelected.value}/Year/${startDate.value}/GetMaxMin`\n )\n .then((res) => {\n // const { dailyGageHeightMinYear, dailyGageHeightMaxYear } = res.data;\n setGhMin(res.data);\n setGhMax(res.data);\n })\n .catch((err) => {\n console.log(\"err GetMin\", err.message);\n });\n // await dwrApi\n // .get(\n // `/DailyGageHeight/Station/${stationIdSelected.value}/Year/${startDate.value}/GetMin`\n // )\n // .then((res) => {\n // setGhMin(res.data);\n // })\n // .catch((err) => {\n // console.log(\"err GetMin\", err.message);\n // });\n\n // await dwrApi\n // .get(\n // `/DailyGageHeight/Station/${stationIdSelected.value}/Year/${startDate.value}/GetMax`\n // )\n // .then((res) => {\n // setGhMax(res.data);\n // })\n // .catch((err) => {\n // console.log(\"err GetMax\", err.message);\n // });\n\n // await dwrApi\n // .get(\n // `/DischargeCalculateResults/Station/${stationIdSelected.value}/Year/${startDate.value}/GetMin`\n // )\n // .then((res) => {\n // setDischargeCalcMin(res.data);\n // })\n // .catch((err) => {\n // console.log(\"err dc\", err.message);\n // });\n\n // await dwrApi\n // .get(\n // `/DischargeCalculateResults/Station/${stationIdSelected.value}/Year/${startDate.value}/GetMax`\n // )\n // .then((res) => {\n // setDischargeCalcMax(res.data);\n // })\n // .catch((err) => {\n // console.log(\"err dc\", err.message);\n // });\n }\n };\n\n const onHandleSubmit = async (ev) => {\n setIsLoadingSubmit(true);\n let ratingTable = watchRatingTable && watchRatingTable.value == \"3\" ? 2 : 1;\n let minLine1 =\n ratingTable >= 1 && !isNaN(watchMinLine1) ? +watchMinLine1 : null;\n let maxLine1 =\n ratingTable >= 1 && !isNaN(watchMaxLine1) ? +watchMaxLine1 : null;\n let minLine2 =\n ratingTable >= 2 && !isNaN(watchMinLine2) ? +watchMinLine2 : null;\n let maxLine2 =\n ratingTable >= 2 && !isNaN(watchMaxLine2) ? +watchMaxLine2 : null;\n\n if (ratingTable == 1 && (minLine1 == null || maxLine1 == null)) {\n addToast(\n \n {!isCalculating ? \"คำนวณ\" : displaySpiner}\n \n {/* disabled={\n (ratingTableSelected.value == \"1\" &&\n !isNaN(watchMinLine1) &&\n !isNaN(watchMaxLine1)) ||\n (ratingTableSelected.value == \"2\" &&\n !isNaN(watchMinLine1) &&\n !isNaN(watchMaxLine1) &&\n !isNaN(watchMinLine2) &&\n !isNaN(watchMaxLine2))\n ? false\n : true\n } */}\n
\n \n ) : (\n \"\"\n )}\n กรุณากรอกข้อมูล ที่ช่อง Text box
, {\n appearance: \"warning\",\n autoDismiss: true,\n });\n return;\n }\n if (\n ratingTable >= 2 &&\n (minLine1 == null ||\n maxLine1 == null ||\n minLine2 == null ||\n maxLine2 == null)\n ) {\n addToast(กรุณากรอกข้อมูล ที่ช่อง Text box
, {\n appearance: \"warning\",\n autoDismiss: true,\n });\n return;\n }\n\n const data = {\n ratingTable,\n stationId: stationIdSelected?.value,\n year: `${startDate.value}-01-01`,\n minLine1,\n maxLine1,\n minLine2,\n maxLine2,\n };\n\n const dataObs = {\n ratingTable: watchRatingTable && watchRatingTable.value == \"3\" ? 2 : 1,\n stationId: stationIdSelected?.value,\n year: `${startDate.value}-01-01`,\n };\n\n await dwrApi\n .post(`/RatingMasters/RatingTable`, data)\n .then((res) => {\n setRatingTableResponse(res.data);\n })\n .catch((err) => {\n console.log(\"err RatingTable\", err.message);\n })\n .finally(() => {\n setIsLoadingSubmit(false);\n });\n\n await dwrApi\n .post(`/RatingMasters/observe`, dataObs)\n .then((res) => {\n setRatingObsResponse(res.data);\n })\n .catch((err) => {\n console.log(\"err observe\", err.message);\n })\n .finally(() => {\n setIsLoadingSubmit(false);\n });\n\n setModalRatingCurveOpen(true);\n };\n\n useEffect(() => {\n getYearOptions();\n }, []);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n setIsShowContent(false);\n reset();\n setDischargeCalcMax();\n setDischargeCalcMin();\n }, [stationIdSelected, startDate]);\n\n useEffect(() => {\n let valid = false;\n if (watchRatingTable?.value == 1) {\n valid = watchHoValue && watchMinLine1 && watchMaxLine1 ? false : true;\n } else {\n valid =\n watchHoValue &&\n watchMinLine1 &&\n watchMaxLine1 &&\n watchMinLine2 &&\n watchMaxLine2\n ? false\n : true;\n }\n setValidButton(valid);\n }, [\n watchRatingTable,\n watchHoValue,\n watchMinLine1,\n watchMaxLine1,\n watchMinLine2,\n watchMaxLine2,\n ]);\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n const displayForm = (\n <>\n \n
\n ปี
\n \n setStartDate(ev)}\n value={startDate}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={true}\n />\n
\n \n \n {!isFetching ? \"จัดการข้อมูล\" : displaySpiner}\n \n
\n \n );\n\n const displayRatingCurveDetail = (\n \n
\n );\n\n const displayRatingTableLimit = (\n เลือกประเภท Rating Curve และกำหนดรายละเอียด
\n \n (\n \"ไม่พบข้อมูล\"}\n isClearable\n options={optionsRatingCurve}\n className=\"my-4\"\n placeholder=\"กรุณาเลือก\"\n />\n )}\n />\n
\n จากข้อมูลระดับน้ำรายชั่วโมง
\n \n ค่าระดับน้ำต่ำที่สุดของปี {!!ghMin ? ghMin.dailyGageHeightMinYear : \"-\"}{\" \"}\n เมตร เมื่อวันที่{\" \"}\n {!!ghMin && !!ghMin.dailyGageHeightMinYearDate\n ? convertDate(ghMin.dailyGageHeightMinYearDate)\n : \"-\"}\n
\n \n ค่าระดับน้ำสูงที่สุดของปี {!!ghMax ? ghMax.dailyGageHeightMaxYear : \"-\"}{\" \"}\n เมตร เมื่อวันที่{\" \"}\n {!!ghMax && !!ghMax.dailyGageHeightMaxYearDate\n ? convertDate(ghMax.dailyGageHeightMaxYearDate)\n : \"-\"}\n
\n จากข้อมูลวัดน้ำ
\n \n ค่าระดับน้ำต่ำที่สุดของปี{\" \"}\n {dischargeCalcMin ? dischargeCalcMin.avgGageHeight : \"-\"} เมตร\n เมื่อวันที่{\" \"}\n {dischargeCalcMin && dischargeCalcMin.measureDate\n ? convertDate(dischargeCalcMin.measureDate)\n : \"-\"}\n
\n \n ค่าระดับน้ำสูงที่สุดของปี{\" \"}\n {dischargeCalcMax ? dischargeCalcMax.avgGageHeight : \"-\"} เมตร\n เมื่อวันที่{\" \"}\n {dischargeCalcMax && dischargeCalcMax.measureDate\n ? convertDate(dischargeCalcMax.measureDate)\n : \"-\"}\n
\n \n
\n );\n\n const displayButtonGroup = (\n กำหนดค่า Rating Table สูงสุด/ต่ำสุด
\n กำหนดค่า ระดับท้องน้ำ
\n \n
\n (ค่าระดับท้อน้ำเป็นค่าบวก ศูนย์ หรือติดลบ)
\n กำหนดค่า Rating Table :
\n Curve ที่ 1:
\n \n
\n\n {watchRatingTable && watchRatingTable.value !== \"1\" ? (\n <>\n \n
\n\n \n
\n \n
*/}\n \n \n \n
\n Curve ที่ 2:
\n \n
\n \n ) : (\n \"\"\n )}\n \n
\n\n \n
\n \n {\n reset();\n }}\n >\n คืนค่าเดิม\n
\n \n
\n );\n};\n\nexport default RatingTableAuto;\n","import React, { useState, useEffect } from \"react\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\n\nconst RatingTableComparison = () => {\n const [isFetching, setIsFetching] = useState(false);\n const [startDate, setStartDate] = useState(\"\");\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [optionsYear, setOptionsYear] = useState([]);\n\n const styles = {\n inputField: {\n backgroundColor: \"white\",\n color: \"black\",\n border: \"1px solid rgb(204,204,204)\",\n width: \"100%\",\n fontSize: \"16px\",\n fontFamily: \"THSarabun\",\n padding: \"10px\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n tableHeader: {\n backgroundColor: \"rgba(223,244,255,0.5)\",\n },\n buttonAdd: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;\",\n border: \"0.5px solid #06538F\",\n color: \"#231F20\",\n width: \"120px\",\n },\n };\n\n const fetchStationOfBasin = () => {\n dwrApi\n .get(`/Stations?BasinId=${basinIdSelected.value}`)\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const getYearOptions = () => {\n let yearOptions = [];\n const firstYear = 1962;\n const thisYear = new Date().getFullYear();\n\n for (let i = firstYear; i <= thisYear; i++) {\n const list = {\n label: `${i} (${i + 543})`,\n value: i,\n };\n\n yearOptions.push(list);\n }\n\n setOptionsYear(yearOptions);\n };\n\n useEffect(() => {\n getYearOptions();\n }, []);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n const displaySpiner = (\n \n {displayForm}\n
\n \n {isShowContent ? (\n \n ) : (\n \"\"\n )}\n
\n\n \n Loading...\n
\n );\n\n const displayForm = (\n <>\n \n
\n วันที่วัดน้ำ
\n \n setStartDate(ev)}\n value={startDate}\n noOptionsMessage={() => \"ไม่พบข้อมูล\"}\n isClearable={true}\n />\n
\n \n \n {!isFetching ? \"จัดการข้อมูล\" : displaySpiner}\n \n
\n \n );\n return (\n \n
\n );\n};\n\nexport default RatingTableComparison;\n","import React, { useState, useEffect } from \"react\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport { useToasts } from \"react-toast-notifications\";\n// import ModalChartAutoStation from \"../../../Components/ModalChartAutoStation\";\nimport { useForm, useFieldArray } from \"react-hook-form\";\n// import ModalSubmitDataMeteo from \"../../../Components/ModalSubmitDataMeteo\";\n// import { FaRegCommentDots } from \"react-icons/fa\";\n// import { useSelector } from \"react-redux\";\nimport ModalTypeRemark from \"../../../Components/ModalTypeRemark\";\nimport ModalShowRemark from \"../../../Components/ModalShowRemark\";\nimport ModalDeleteEl from \"../../../Components/ModalDeleteEl\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\n// import moment from \"moment\";\n// import { convertDecimals } from \"../../../Services/Function\";\nimport ButtonSubmitDataMeteo from \"../../../Components/ButtonSubmitDataMeteo\";\nimport ModalChartManualStationMeteo from \"../../../Components/ModalChartManualStationMeteo\";\nimport ModalConfirm from \"../../../Components/ModalConfirm\";\n// import { isNumber } from \"lodash\";\n\nconst MeteoStationManual = () => {\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n // const [isPostSubmit, setIsPostSubmit] = useState(false);\n const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);\n const [isShowContent, setIsShowContent] = useState(false);\n\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [dateSelected, setDateSelected] = useState();\n const [optionDataType, setOptionDataType] = useState([]);\n const [optionTimePeriod, setOptionTimePeriod] = useState([]);\n const [dataType, setDataType] = useState([]);\n\n const [measureTime, setMeasureTime] = useState(\"\");\n const [measureTimeSelected, setMeasureTimeSelected] = useState(\"\");\n const [transaction, setTransaction] = useState([]);\n const [transactionSelected, setTransactionSelected] = useState(\"\");\n const [alertMessage, setAlertMessage] = useState(\"\");\n const [monthSelected, setMonthSelected] = useState(\"\");\n const [yearSelected, setYearSelected] = useState(\"\");\n const [daysInMonth, setDaysInMonth] = useState(0);\n const [newTransactionSelected, setNewTransactionSelected] = useState([]);\n const [newTransactionFullfill, setNewTransactionFullfill] = useState(\"\");\n const [modalConfirmOpen, setModalConfirmOpen] = useState(false);\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors },\n setValue,\n reset,\n control,\n } = useForm();\n\n const { fields } = useFieldArray({\n control,\n name: \"dataTable\",\n });\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertDate2 = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${year}-${month}-${date}`;\n };\n\n const fetchMeteoStation = () => {\n let stationTypeId = \"1\";\n dwrApi\n .get(\n `/Stations/Meteo?StationTypeId=${stationTypeId}&BasinId=${basinIdSelected.value}`\n )\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const fetchMeasureTime = () => {\n dwrApi\n .get(`/measureTimes`)\n .then((res) => {\n setMeasureTime(res.data);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const fetchTransaction = async () => {\n // console.log(\"fetchTransaction\");\n const result = new Date(dateSelected);\n const month = result.getMonth() + 1;\n const year = result.getFullYear();\n\n await dwrApi\n .get(\n `/HourlyMeteos/Station/${stationIdSelected.value}?month=${month}&year=${year}`\n )\n .then((res) => {\n setTransaction(res.data);\n\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n })\n .catch((err) => {\n console.log(\"err\", err);\n });\n };\n\n const onDeleteMeasureTime = () => {\n if (stationIdSelected && dateSelected) {\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n // const data = {\n // stationId: stationIdSelected.value,\n // meteoTypeId: dataType.value,\n // meteoDateTime: `${year}-${month}-01T06:52:57.936Z`,\n // };\n\n dwrApi\n // .delete(\n // `/Meteos/Station/${stationIdSelected.value}?month=${month}&year=${year}`,\n // data\n // )\n .delete(\n `/Meteos/Station/${stationIdSelected.value}/MeteoType/${dataType.value}?month=${month}&year=${year}`\n )\n .then((res) => {\n setIsModalDeleteOpen(false);\n fetchTransaction();\n })\n .catch((err) => {\n console.log(err.message);\n });\n }\n };\n\n const generateDayInMonth = async () => {\n // console.log(\"generateDayInMonth\");\n setNewTransactionSelected([]);\n\n for (let dayIndex = 0; dayIndex < +daysInMonth; dayIndex++) {\n const dateFilter = transactionSelected?.meteoSiteOuts?.find((item) => {\n return new Date(item.avgMeteo.meteoDate).getDate() == dayIndex + 1;\n });\n\n const dataBlank = {\n avgMeteo: {\n meteoDate: new Date(yearSelected, monthSelected, dayIndex + 2)\n .toISOString()\n .slice(0, 19),\n dailyMeteo: \"\",\n },\n hourlyMeteo: [],\n };\n\n if (dateFilter) {\n setNewTransactionSelected((newTransactionSelected) => [\n ...newTransactionSelected,\n dateFilter,\n ]);\n } else {\n setNewTransactionSelected((newTransactionSelected) => [\n ...newTransactionSelected,\n dataBlank,\n ]);\n }\n }\n };\n\n const generateDataTable = async () => {\n // console.log(\"generateDataTable\");\n let transactionFull = [];\n\n if (newTransactionSelected.length) {\n newTransactionSelected.map((item) => {\n let dateElements = [];\n let remarkElements = [];\n\n for (\n let index = 0;\n index < +measureTimeSelected.data.groupMeasure.length;\n index++\n ) {\n const filterByDate = item.hourlyMeteo.filter((time) => {\n let tm = new Date(time.meteoDateTime).getHours();\n let pd = +measureTimeSelected.data.groupMeasure[\n index\n ].timePeriod.slice(0, -6);\n\n return tm === pd;\n });\n\n if (filterByDate.length) {\n dateElements.push(filterByDate[0]);\n // console.log('data remark', filterByDate[0].typeRemark.typeRemarkId)\n if (\n filterByDate[0].typeRemark !== null &&\n filterByDate[0].remark === null\n ) {\n remarkElements.push({\n time: filterByDate[0].meteoDateTime,\n remark: filterByDate[0].typeRemark.hourlyRemark,\n type: \"normal\",\n });\n }\n if (\n filterByDate[0].remark !== null &&\n filterByDate[0].typeRemark !== null\n ) {\n remarkElements.push({\n time: filterByDate[0].meteoDateTime,\n remark: filterByDate[0].remark,\n type: \"other\",\n });\n }\n } else {\n const data = {\n meteoHourly: null,\n meteoTypeId: null,\n meteoDateTime: `${convertDate2(item.avgMeteo.meteoDate)}T${\n measureTimeSelected.data.groupMeasure[index].timePeriod\n }`,\n meteoId: null,\n hourlyMeteoId: null,\n remark: null,\n typeRemark: null,\n };\n\n dateElements.push(data);\n }\n }\n\n const dataObj = {\n avgMeteo: item.avgMeteo,\n hourlyMeteo: dateElements,\n remarkElements,\n };\n\n transactionFull.push(dataObj);\n });\n }\n\n setNewTransactionFullfill(transactionFull);\n reset({\n dataTable: transactionFull,\n });\n setModalConfirmOpen(false);\n setIsShowContent(true);\n };\n\n const onOpenModalConfirm = (ev) => {\n ev.preventDefault();\n setModalConfirmOpen(true);\n };\n\n const onHandleSubmit = async (ev) => {\n // const month = (new Date(dateSelected).getMonth() + 1)\n // .toString()\n // .padStart(2, \"0\");\n const month = (new Date(dateSelected).getMonth() + 1).toString();\n const year = new Date(dateSelected).getFullYear();\n\n const configPost = {\n headers: {\n \"X-Function-Header\": \"\",\n },\n };\n const configPut = {\n headers: {\n \"X-Function-Header\": \"\",\n },\n };\n\n const flatData = ev.dataTable.map((item) => item.hourlyMeteo).flat();\n let payload = [];\n flatData.map((item) => {\n if (\n !!item.remark ||\n !!item.typeRemark ||\n item.typeRemark === 0 ||\n (item.meteoHourly !== null && !isNaN(item.meteoHourly))\n ) {\n payload.push({\n stationId: stationIdSelected.value,\n meteoDateTime: item.meteoDateTime,\n meteoTypeId: dataType.value,\n meteoHourly: item.meteoHourly !== null ? +item.meteoHourly : null,\n typeRemarkId: item.typeRemark ? item.typeRemark.typeRemarkId : null,\n remark: item.remark,\n });\n }\n });\n\n // console.log({ flatData: flatData.length, payload })\n\n dwrApi\n .post(\n `/HourlyMeteos/Station/${stationIdSelected.value}?MeteoTypeId=${dataType.value}&month=${month}&year=${year}&MeasureTimeId=${measureTimeSelected.data.measureTimeId}`,\n payload\n )\n .then(async () => {\n setIsLoading(false);\n addToast(\n {displayForm}\n
\n บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n\n await fetchTransaction();\n })\n .catch((err) => {\n console.error(\"post HourlyMeteos\", err.response.status, err.message);\n\n setIsLoading(false);\n let message = \"กรุณาลองใหม่\";\n if (err.response && err.response.status == 401) {\n message = \"ไม่สามารถเพิ่มข้อมูลได้ กรุณาล็อกอิน\";\n } else if (err.response && err.response.status == 400) {\n message = \"ข้อมูลไม่ถูกต้อง\";\n }\n addToast({message}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n\n // await fetchDailyMeteoData();\n };\n\n // const [dataToConfirm, setDataToConfirm] = useState([]);\n\n // const fetchDailyMeteoData = () => {\n // // console.log('stationID', stationId)\n // // console.log('dataType', dataType)\n // // console.log('startDate', startDate)\n\n // const result = new Date(dateSelected);\n // // console.log('result', result)\n\n // let month = result.getMonth() + 1;\n // let year = result.getFullYear();\n // let day = result.getDate();\n // // console.log('month', month)\n // // console.log('year', year)\n // // console.log('day', day)\n\n // dwrApi\n // .get(\n // `/DailyMeteos/Station/${stationIdSelected.value}?MeteoTypeId=${\n // dataType.value || dataType\n // }&month=${month}&year=${year}`\n // )\n // .then((res) => {\n // setDataToConfirm(res.data);\n // // console.log('res data', res.data)\n // })\n // .catch((err) => {\n // console.log(err.message);\n // });\n // // console.log('fetchData', dataToConfirm)\n // };\n\n useEffect(() => {\n generateDayInMonth();\n }, [daysInMonth, transactionSelected, measureTimeSelected]);\n\n useEffect(() => {\n if (newTransactionSelected.length && measureTimeSelected && isShowContent) {\n generateDataTable();\n }\n }, [newTransactionSelected]);\n\n useEffect(() => {\n const dateConvert = new Date(dateSelected);\n const mo = dateConvert.getMonth();\n const ye = dateConvert.getFullYear();\n const dim = new Date(ye, mo + 1, 0).getDate();\n\n setMonthSelected(mo);\n setYearSelected(ye);\n setDaysInMonth(dim);\n }, [dateSelected]);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchMeteoStation();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n fetchMeasureTime();\n }, []);\n\n useEffect(() => {\n if (dateSelected && stationIdSelected) {\n fetchTransaction();\n }\n }, [dateSelected, stationIdSelected, dataType]);\n\n useEffect(() => {\n if (measureTime.length) {\n const list = measureTime\n .filter((el) => el.measureTypeId == \"2\")\n .map((time) => {\n return {\n value: time.measureTimeDesc,\n label: `${time.measureTimeDesc} เวลา`,\n id: time.measureTimeId,\n data: time,\n };\n });\n\n setOptionTimePeriod(list);\n }\n }, [measureTime]);\n\n useEffect(() => {\n if (stationDetail.length) {\n const optDataType = stationDetail[0].configDataStation\n .filter((el) => el.meteotype)\n .map((item) => item.meteotype)\n .map((data) => {\n return {\n value: data.meteoTypeId,\n label: `${data.meteoTypeId} : ${data.meteoTypeTh} `,\n dataName: data.meteoTypeTh,\n };\n });\n\n setOptionDataType(optDataType);\n }\n }, [stationDetail]);\n\n useEffect(() => {\n // transaction.length && dataType\n if (dataType) {\n const filterTransaction = transaction.find((item) => {\n return item.meteoTypeId == dataType.value;\n });\n\n setTransactionSelected(filterTransaction);\n }\n }, [transaction, dataType]);\n\n useEffect(() => {\n if (\n transactionSelected &&\n optionTimePeriod.length &&\n !measureTimeSelected\n ) {\n const filterOptions = optionTimePeriod.find(\n (option) => option.id == transactionSelected.measureTimeId\n );\n\n if (filterOptions) {\n setMeasureTimeSelected(filterOptions);\n }\n }\n }, [transactionSelected]);\n\n useEffect(() => {\n setDataType(\"\");\n setDateSelected(\"\");\n setMeasureTimeSelected(null);\n }, [stationIdSelected]);\n\n useEffect(() => {\n setMeasureTimeSelected(null);\n }, [dateSelected]);\n\n useEffect(() => {\n reset({\n dataTable: [],\n });\n\n setIsShowContent(false);\n }, [measureTimeSelected, dateSelected]);\n\n useEffect(() => {\n if (optionDataType.length) {\n // setDataType(optionDataType[0]);\n }\n setMeasureTimeSelected(\"\");\n }, [optionDataType]);\n\n const displayForm = (\n\n
\n );\n\n const displayTopTable = (\n \n
\n \n
\n ประเภทข้อมูล
\n \n {\n setDataType(ev);\n //init\n setDateSelected(\"\");\n setMeasureTimeSelected(\"\");\n }}\n noOptionsMessage={() => \"ไม่พบประเภทข้อมูล\"}\n />\n
\n \n
\n\n เดือน / ปี
\n \n
\n \n
\n\n กำหนดเวลา
\n \n \n ev ? setMeasureTimeSelected(ev) : setMeasureTimeSelected(\"\")\n }\n value={measureTimeSelected}\n noOptionsMessage={() => \"ไม่พบคาบเวลา\"}\n />\n
\n \n \n จัดการข้อมูล\n \n
\n \n ) : (\n \"\"\n )}\n \n {basinIdSelected &&\n stationIdSelected &&\n dataType &&\n dateSelected &&\n measureTimeSelected === \"\" ? (\n
\n ไม่พบข้อมูล
\n ) : (\n \"\"\n )}\n \n
\n );\n\n const displayTable = (\n \n
\n \n \n \n
\n
\n \n );\n\n return (\n | \n วันที่\n | \n\n {dataType && dataType.value == \"01\"\n ? \"ปริมาณน้ำฝนที่อ่านได้ ( ม.ม.)\"\n : \"ปริมาณที่อ่านได้\"}\n | \n\n {dataType && dataType.value == \"01\" ? \"รวม ( ม.ม.)\" : \"เฉลี่ย\"}\n | \nหมายเหตุ | \n
|---|---|---|---|
| \n {item.timePeriod.slice(0, -3)}\n | \n );\n })}\n|||
| {convertDate(item.avgMeteo.meteoDate)} | \n {item.hourlyMeteo.map((data, dataIindex) => {\n return (\n\n {summary}\n {/* total && dataQty ? (total / dataQty).toFixed(2) : \"\" */}\n | \n\n | \n
\n \n {\n onHandleSubmit(ev);\n // setIsPostSubmit(true);\n })}\n >\n บันทึก\n \n \n\n \n \n\n \n \n\n \n \n\n \n setIsModalDeleteOpen(true)}\n >\n ลบ\n
\n \n \n
\n );\n};\n\nexport default MeteoStationManual;\n","import React, { useState, useEffect } from \"react\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport TitleText from \"../../../Components/TitleText\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { useForm, useFieldArray } from \"react-hook-form\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { useSelector } from \"react-redux\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport _ from \"lodash\";\nimport ModalChartAutoStation from \"../../../Components/ModalChartAutoStation\";\nimport ModalSubmitDataMeteo from \"../../../Components/ModalSubmitDataMeteo\";\nimport DatePicker from \"react-datepicker\";\nimport ButtonSubmitDataMeteo from \"../../../Components/ButtonSubmitDataMeteo\";\n\nconst MeteoStationAuto = () => {\n const { addToast } = useToasts();\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n\n const [transaction, setTransaction] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n // const [isShowContent, setIsShowContent] = useState(false);\n\n const [optionDataType, setOptionDataType] = useState([]);\n const [dataType, setDataType] = useState(\"\");\n const [dateSelected, setDateSelected] = useState(new Date());\n const [alertMessage, setAlertMessage] = useState(\"\");\n\n const { register, handleSubmit, watch, reset, control } = useForm();\n const { fields } = useFieldArray({\n control,\n name: \"dataTable\",\n });\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertDateEng = (value, type) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (type == \"eng\") {\n year = result.getFullYear();\n }\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${month}-${date}-${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour} : ${minute}`;\n };\n\n const fetchMeteoStation = async () => {\n let stationTypeId = \"2\";\n dwrApi\n .get(\n `/Stations/Meteo?StationTypeId=${stationTypeId}&BasinId=${basinIdSelected.value}`\n )\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((error) => console.error(error.message, \"💥💥💥 \"));\n };\n\n const fetchTransaction = async (ev) => {\n ev?.preventDefault();\n setTransaction([]);\n setAlertMessage(\"\");\n const date = convertDateEng(dateSelected);\n\n await dwrApi\n .get(\n `/Transections/Station/${stationIdSelected.value}?dateStart=${date} 00:00:00&dateStop=${date} 23:59:59`\n )\n .then((res) => {\n const dataSlice = res.data.slice(0, 96);\n\n setTransaction(dataSlice);\n\n reset({\n dataTable: dataSlice,\n });\n\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n })\n .catch((err) => {\n let message = \"กรุณาลองใหม่\";\n if (err.response.status == 401) {\n message = \"กรุณาล็อกอิน\";\n } else if (err.response.status == 400) {\n message = \"ข้อมูลไม่ถูกต้อง\";\n }\n addToast(\n {displayForm}\n
\n {fields.length ? {displayTopTable}
: \"\"}\n {fields.length ? : \"\"}\n\n {message}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n // setIsFetching(false);\n });\n };\n\n const onHandleSubmit = async (ev) => {\n\n try {\n // console.log({ ev });\n let stationId = transaction[0].stationId;\n let loopNo = 0;\n\n setIsLoading(true);\n\n const config = {\n headers: {\n \"X-Function-Header\": \"2902\",\n },\n };\n let payload = [];\n ev.dataTable.forEach((item) => {\n\n payload.push({\n ...item,\n rainFall15: isNaN(+item.rainFall15) || item.rainFall15 == '' || item.rainFall15 == null ? null : +item.rainFall15,\n temperature: isNaN(+item.temperature) || item.temperature == '' || item.temperature == null ? null : +item.temperature,\n })\n // dwrApi\n // .put(\n // `/Transections/${stationId}`,\n // payload,\n // config\n // )\n // .then((res) => {\n // loopNo++;\n\n // if (loopNo >= ev.dataTable.length) {\n // fetchTransaction();\n\n // setIsLoading(false);\n\n // addToast(บันทึกข้อมูลสำเร็จ
, {\n // appearance: \"success\",\n // autoDismiss: true,\n // });\n // }\n // })\n // .catch((err) => {\n // setIsLoading(false);\n // });\n });\n\n let res = await dwrApi\n .put(\n `/Transections/list/${stationId}`,\n payload,\n config\n );\n\n // console.log({ res });\n\n if (res.status === 204 || res.status == 200) {\n await fetchTransaction();\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n }\n\n } catch (err) {\n console.error(err)\n } finally {\n setIsLoading(false);\n }\n\n };\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchMeteoStation();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n reset({\n dataTable: [],\n });\n setAlertMessage(\"\");\n }, [stationIdSelected, dataType]);\n\n useEffect(() => {\n if (stationDetail.length) {\n const listDataType = stationDetail[0].configDataStation\n .filter((el) => el.meteotype)\n .map((item) => item.meteotype)\n .map((data) => {\n return {\n value: data.meteoTypeId,\n label: `${data.meteoTypeId} : ${data.meteoTypeTh}`,\n dataName: data.meteoTypeTh,\n };\n });\n\n setOptionDataType(listDataType);\n }\n }, [stationDetail]);\n\n useEffect(() => {\n if (optionDataType.length) {\n setDataType(optionDataType[0]);\n }\n }, [optionDataType]);\n\n useEffect(() => {\n setDataType(\"\");\n setDateSelected(\"\");\n }, [stationIdSelected]);\n\n useEffect(() => {\n setAlertMessage(\"\");\n }, [dateSelected])\n\n // useEffect(() => {\n // if (isShowContent) {\n // fetchTransaction();\n // }\n // }, [isShowContent]);\n\n const displayForm = (\n\n \n
\n );\n\n const displayTable = (\n <>\n \n
\n ค้นพบ {fields.length} รายการ
\n \n
\n | \n วันที่-เวลา\n | \n\n {dataType ? dataType.label.slice(-5) : \"\"}\n | \n
|---|---|
| \n {convertDate(item.serverTime)}\n {convertTime(item.serverTime)}\n | \n\n {dataType.value == \"01\" && (\n | \n
\n \n console.log(ev))}\n >\n บันทึก\n \n \n \n \n\n \n \n\n \n \n
\n \n );\n\n return (\n \n
\n );\n};\n\nexport default MeteoStationAuto;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport ModalChartAutoStation from \"../../../Components/ModalChartAutoStation\";\nimport { useToasts } from \"react-toast-notifications\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\nimport { useForm, useFieldArray } from \"react-hook-form\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport ModalSubmitData from \"../../../Components/ModalSubmitData\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport { useSelector } from \"react-redux\";\n\nimport DatePicker from \"react-datepicker\";\nimport moment from \"moment\";\n\nimport _ from \"lodash\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport ButtonSubmitData from \"../../../Components/ButtonSubmitData\";\n\nconst HydroStationAuto = () => {\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [startDate, setStartDate] = useState(\"\");\n const [waterLevel, setWaterLevel] = useState([]);\n const [alertMessage, setAlertMessage] = useState(\"\");\n const { addToast } = useToasts();\n\n const { register, handleSubmit, watch, reset, control } = useForm();\n const { fields } = useFieldArray({\n control,\n name: \"dataTable\",\n });\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n select: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n width: \"60px\",\n },\n inputField: {\n backgroundColor: \"white\",\n color: \"black\",\n border: \"1px solid rgb(204,204,204)\",\n borderRadius: \"5px\",\n width: \"100%\",\n fontSize: \"20px\",\n fontFamily: \"THSarabunNew\",\n padding: \"10px\",\n },\n };\n\n const convertDate = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertDateEng = (value, type) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear();\n\n if (type == \"eng\") {\n year = result.getFullYear();\n }\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${month}-${date}-${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour} : ${minute}`;\n };\n\n const fetchStationOfBasin = () => {\n let stationTypeId = \"2\";\n dwrApi\n .get(\n `/Stations/Hydro?StationTypeId=${stationTypeId}&BasinId=${basinIdSelected.value}`\n )\n .then((res) => {\n setStationsOfBasin(res.data);\n setAlertMessage(\"\");\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchWaterLevel = async (ev) => {\n ev?.preventDefault();\n // setIsFetching(true);\n // await reset();\n await setWaterLevel([]);\n setAlertMessage(\"\");\n\n const date = convertDateEng(startDate);\n\n await dwrApi\n .get(\n `/Transections/Station/${stationIdSelected.value}?dateStart=${date} 00:00:00&dateStop=${date} 23:59:59`\n )\n .then((res) => {\n const sliceRes = res.data.slice(0, 96);\n setWaterLevel(sliceRes);\n\n reset({\n dataTable: sliceRes,\n });\n\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n })\n .catch((err) => {\n let message = \"กรุณาลองใหม่\";\n if (err.response.status == 401) {\n message = \"กรุณาล็อกอิน\";\n } else if (err.response.status == 400) {\n message = \"ข้อมูลไม่ถูกต้อง\";\n }\n addToast(\n {displayForm}\n
\n \n {message}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n })\n .finally(() => {\n // setIsFetching(false);\n });\n };\n\n const onHandleSubmit = async (ev) => {\n setIsLoading(true);\n // console.log(ev);\n\n let stationId = waterLevel[0].stationId;\n const config = {\n headers: {\n \"X-Function-Header\": \"2620\",\n },\n };\n\n // let count = 0;\n try {\n let payload = [];\n ev.dataTable.map(async (item) => {\n payload.push({\n ...item,\n waterLevel:\n isNaN(+item.waterLevel) ||\n item.waterLevel == \"\" ||\n item.waterLevel == null\n ? null\n : +item.waterLevel,\n });\n\n // if (true) {\n // await dwrApi\n // .put(`/Transections/${stationId}`, payload, config)\n // .then((res) => {\n // count++;\n\n // if (count >= 96) {\n // setIsLoading(false);\n // fetchWaterLevel();\n // addToast(บันทึกข้อมูลสำเร็จ
, {\n // appearance: \"success\",\n // autoDismiss: true,\n // });\n // }\n // });\n // }\n });\n\n let res = await dwrApi.put(\n `/Transections/list/${stationId}`,\n payload,\n config\n );\n // console.log({ res });\n\n if (res.status === 204 || res.status == 200) {\n await fetchWaterLevel();\n addToast(บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n }\n } catch (e) {\n addToast(บันทึกข้อมูลไม่ได้ ข้อมูลผิดพลาด
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n } finally {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n reset({\n dataTable: [],\n });\n setAlertMessage(\"\");\n }, [stationIdSelected, startDate]);\n\n useEffect(() => {\n setStartDate();\n }, [basinIdSelected, stationIdSelected]);\n\n const displaySpiner = (\n\n Loading...\n
\n );\n\n const displayForm = (\n \n \n
\n );\n\n const displayTable = (\n <>\n \n
\n \n \n );\n\n return (\n ค้นพบ {waterLevel.length} รายการ
\n \n
\n \n
\n );\n};\n\nexport default HydroStationAuto;\n","import React, { useState, useEffect } from \"react\";\nimport TitleText from \"../../../Components/TitleText\";\nimport Select from \"react-select\";\nimport { dwrApi } from \"../../../api/dwrApi\";\nimport { useForm, useFieldArray } from \"react-hook-form\";\nimport SpinnerTool from \"../../../Tools/Spinner/SpinnerTool\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport ProtectGate from \"../../../Tools/ProtectGate/ProtectGate\";\nimport ModalPreviewExcel from \"../../../Components/ModalPreviewExcel\";\nimport ModalSubmitData from \"../../../Components/ModalSubmitData\";\nimport ModalChartManualStation from \"../../../Components/ModalChartManualStation\";\nimport ModalTypeRemark from \"../../../Components/ModalTypeRemark\";\nimport ModalDeleteEl from \"../../../Components/ModalDeleteEl\";\nimport CustomDatePicker from \"../../../Components/CustomDatePicker\";\nimport ModalShowRemark from \"../../../Components/ModalShowRemark\";\nimport _ from \"lodash\";\nimport { convertDecimals } from \"../../../Services/Function\";\nimport ModalConfirm from \"../../../Components/ModalConfirm\";\nimport ButtonSubmitData from \"../../../Components/ButtonSubmitData\";\nimport BasinFormSelect from \"../../../Components/BasinFormSelect\";\n\nconst HydroStationManual = () => {\n const { addToast } = useToasts();\n const [isLoading, setIsLoading] = useState(false);\n const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);\n const [xlsFile, setXlsFile] = useState(\"\");\n\n const [stationIdSelected, setStationIdSelected] = useState();\n const [stationsOfBasin, setStationsOfBasin] = useState();\n const [basinIdSelected, setBasinIdSelected] = useState(\"\");\n const [stationDetail, setStationDetail] = useState(\"\");\n const [dateSelected, setDateSelected] = useState();\n const [measureTime, setMeasureTime] = useState([]);\n const [measureTimeSelected, setMeasureTimeSelected] = useState();\n const [hourlyGageHeights, setHourlyGageHeights] = useState(\"\");\n const [dayOfGageHeights, setDayOfGageHeights] = useState([]);\n const [gageHeightFullfill, setGageHeightFullfill] = useState([]);\n const [optionTimePeriod, setOptionTimePeriod] = useState([]);\n const [monthSelected, setMonthSelected] = useState(\"\");\n const [yearSelected, setYearSelected] = useState(\"\");\n const [daysInMonth, setDaysInMonth] = useState(\"\");\n const [manageRequest, setManageRequest] = useState(false);\n const [alertMessage, setAlertMessage] = useState(\"\");\n const [modalConfirmOpen, setModalConfirmOpen] = useState(false);\n\n console.log({ measureTimeSelected });\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors },\n setValue,\n reset,\n control,\n } = useForm();\n\n const { fields } = useFieldArray({\n control,\n name: \"dataTable\",\n });\n\n useEffect(() => {\n const dateConvert = new Date(dateSelected);\n const mo = dateConvert.getMonth();\n const ye = dateConvert.getFullYear();\n const dim = new Date(ye, mo + 1, 0).getDate();\n\n setMonthSelected(mo);\n setYearSelected(ye);\n setDaysInMonth(dim);\n }, [dateSelected]);\n\n // let years = [];\n\n // const startYear = 1960;\n // const endYear = new Date().getFullYear();\n\n // for (let i = startYear; i <= endYear; i++) {\n // const listYear = {\n // th: i + 543,\n // en: i,\n // };\n // years.push(listYear);\n // }\n\n const styles = {\n tableHeader: {\n borderTop: \"4px solid #06538A\",\n background: \"#E8ECF4\",\n color: \"#06538F\",\n },\n buttonType1: {\n background:\n \"transparent linear-gradient(180deg, #FFFFFF 0%, #DDDEDF 42%, #CFD1D2 67%) 0% 0% no-repeat padding-box\",\n color: \"#06538F\",\n },\n buttonType2: {\n background:\n \"transparent linear-gradient(180deg, #0086C6 0%, #0081C1 7%, #045F9C 68%, #06538F 100%) 0% 0% no-repeat padding-box\",\n color: \"white\",\n },\n button: {\n background:\n \"transparent linear-gradient(180deg, #DADBE2 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box\",\n border: \"0.5px solid #06538F\",\n },\n address: {\n background: \"#06538F\",\n minHeight: \"50px\",\n color: \"white\",\n },\n backgroundValue: {},\n };\n\n const convertDate = (value) => {\n const result = new Date(value.slice(0, 10));\n\n let date = result.getDate();\n let month = result.getMonth() + 1;\n let year = result.getFullYear() + 543;\n\n if (date < 10) {\n date = \"0\" + date;\n }\n if (month < 10) {\n month = \"0\" + month;\n }\n\n return `${date}/${month}/${year}`;\n };\n\n const convertTime = (value) => {\n const result = new Date(value);\n\n let hour = result.getHours();\n let minute = result.getMinutes();\n\n if (hour < 10) {\n hour = \"0\" + hour;\n }\n if (minute < 10) {\n minute = \"0\" + minute;\n }\n\n return `${hour}:${minute} น.`;\n };\n\n const convertDateTh = (value) => {\n const result = new Date(value);\n\n let date = result.getDate();\n let month = result.getMonth();\n let year = result.getFullYear() + 543;\n\n const monthNames = [\n \"มกราคม\",\n \"กุมภาพันธ์\",\n \"มีนาคม\",\n \"เมษายน\",\n \"พฤษภาคม\",\n \"มิถุนายน\",\n \"กรกฎาคม\",\n \"สิงหาคม\",\n \"กันยายน\",\n \"ตุลาคม\",\n \"พฤศจิกายน\",\n \"ธันวาคม\",\n ];\n\n return `${date} ${monthNames[month]} ${year}`;\n };\n\n const fetchMeasureTime = () => {\n dwrApi\n .get(`/measureTimes`)\n .then((res) => {\n setMeasureTime(res.data);\n\n const listOption = res.data\n .filter((el) => el.measureTypeId == \"1\")\n .map((time) => {\n return {\n value: time.measureTimeDesc,\n label: `${time.measureTimeDesc} เวลา`,\n id: time.measureTimeId,\n data: time,\n };\n });\n\n setOptionTimePeriod(listOption);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const fetchHourlyGageHeights = () => {\n if (stationIdSelected && dateSelected) {\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n dwrApi\n .get(\n `/HourlyGageHeights/Station/${stationIdSelected.value}?month=${month}&year=${year}`\n )\n .then((res) => {\n if (res.data) {\n setHourlyGageHeights(res.data);\n } else {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n\n if (!res.data.length) {\n setAlertMessage(\"ไม่พบข้อมูล\");\n }\n\n if (!Array.isArray(res.data)) {\n const filterOptions = optionTimePeriod.find(\n (option) => option.id == res.data.measureTimeId\n );\n\n setMeasureTimeSelected(filterOptions || {});\n }\n })\n .catch((err) => {\n console.log(err.message);\n });\n }\n };\n\n const onDeleteHourlyGageHeights = () => {\n if (stationIdSelected && dateSelected) {\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n const data = {\n stationId: stationIdSelected.value,\n gageHeightDateTime: `${year}-${month}-01T06:52:57.936Z`,\n };\n\n dwrApi\n .delete(\n `/GageHeights/Station/${stationIdSelected.value}?month=${month}&year=${year}`,\n data\n )\n .then((res) => {\n setIsModalDeleteOpen(false);\n fetchHourlyGageHeights();\n })\n .catch((err) => {\n console.log(err.message);\n });\n }\n };\n\n const onHandleManageRequest = async (ev) => {\n // ev.preventDefault();\n setIsLoading(true);\n setGageHeightFullfill([]);\n reset();\n setManageRequest(true);\n setModalConfirmOpen(false);\n await generateDataTable();\n setIsLoading(false);\n };\n\n const fetchStationOfBasin = () => {\n let stationTypeId = \"1\";\n dwrApi\n .get(\n `/Stations/Hydro?StationTypeId=${stationTypeId}&BasinId=${basinIdSelected.value}`\n )\n .then((res) => {\n setStationsOfBasin(res.data);\n })\n .catch((err) => {\n console.log(err.message);\n });\n };\n\n const generateDayInMonth = () => {\n if (\n dateSelected &&\n measureTimeSelected?.data?.groupMeasure?.length &&\n hourlyGageHeights\n ) {\n setDayOfGageHeights([]);\n for (let dayIndex = 0; dayIndex < +daysInMonth; dayIndex++) {\n const dateFilter = hourlyGageHeights?.gagehightSiteOuts?.filter(\n (item) => {\n return (\n new Date(item.avgGageHeight.gageHeightDate).getDate() ==\n dayIndex + 1\n );\n }\n );\n\n const dataBlank = {\n avgGageHeight: {\n gageHeightDate: new Date(\n yearSelected,\n monthSelected,\n dayIndex + 2\n ).toISOString(),\n dailyGageHeightVal: \"\",\n },\n hourlyGageHeight: [],\n };\n\n if (dateFilter && dateFilter.length) {\n setDayOfGageHeights((dayOfGageHeights) => [\n ...dayOfGageHeights,\n ...dateFilter,\n ]);\n } else {\n setDayOfGageHeights((dayOfGageHeights) => [\n ...dayOfGageHeights,\n dataBlank,\n ]);\n }\n }\n }\n };\n\n const generateDataTable = async () => {\n let ghFull = [];\n\n try {\n setGageHeightFullfill([]);\n console.log({ dayOfGageHeights });\n dayOfGageHeights.map((item) => {\n let dateElements = [];\n let remarkElements = [];\n\n for (\n let index = 0;\n index < +measureTimeSelected.data?.groupMeasure?.length;\n index++\n ) {\n const filterByDate = item.hourlyGageHeight.filter((time) => {\n let tm = new Date(time.gageHeightDateTime).getHours();\n let pd = +measureTimeSelected.data.groupMeasure[\n index\n ].timePeriod.slice(0, -6);\n\n return tm === pd;\n });\n\n if (filterByDate.length) {\n dateElements.push(...filterByDate);\n if (\n filterByDate[0].typeRemark !== null &&\n filterByDate[0].remark === null\n ) {\n remarkElements.push({\n time: filterByDate[0].gageHeightDateTime,\n remark: filterByDate[0].typeRemark.hourlyRemark,\n type: \"normal\",\n });\n }\n if (\n filterByDate[0].remark !== null &&\n filterByDate[0].typeRemark !== null\n ) {\n remarkElements.push({\n time: filterByDate[0].gageHeightDateTime,\n remark: filterByDate[0].remark,\n type: \"other\",\n });\n }\n } else {\n const setDate = `${item.avgGageHeight.gageHeightDate.slice(\n 0,\n 10\n )}T${measureTimeSelected.data.groupMeasure[index].timePeriod}`;\n\n const data = {\n gageHeight: null,\n gageHeightDateTime: setDate,\n gageHeightId: null,\n hourlyGageHeightId: null,\n remark: null,\n typeRemark: null,\n };\n\n dateElements.push(data);\n }\n }\n\n const dataObj = {\n avgGageHeight: item.avgGageHeight,\n hourlyGageHeight: dateElements,\n remarkElements,\n };\n\n ghFull.push(dataObj);\n });\n setGageHeightFullfill(ghFull);\n reset({\n dataTable: ghFull,\n });\n\n // console.log({ ghFull });\n } catch (e) {\n // console.log(e);\n }\n };\n\n const handleSeparateDate = (data, dateNo) => {\n return data.filter(\n (item) => new Date(item.gageHeightDateTime).getDate() === dateNo\n );\n };\n\n const onInsertXls = (ev) => {\n ev?.preventDefault();\n const month = dateSelected.getMonth() + 1;\n const year = dateSelected.getFullYear();\n\n const data = new FormData();\n data.append(\"excelFile\", xlsFile);\n\n dwrApi\n .post(`/GageHeights/ReadExcel?firstDayInMonth=${year}-${month}-01`, data)\n .then(async (res) => {\n let newGH = [];\n\n for (let i = 0; i < daysInMonth; i++) {\n const response = handleSeparateDate(res.data.hourlyGageHeight, i + 1);\n let filterByHourly = response.filter((time) => {\n for (\n let index = 0;\n index < +measureTimeSelected.data.groupMeasure.length;\n index++\n ) {\n let tm = time.gageHeightDateTime.slice(11, 13);\n let pd = measureTimeSelected.data.groupMeasure[\n index\n ].timePeriod.slice(0, -6);\n if (tm === pd) {\n return true;\n }\n // if (tm !== pd) {\n // time.gageHeight = null\n // return true\n // }\n }\n });\n // console.log('filter', filterByHourly)\n const list = {\n avgGageHeight: {\n dailyGageHeightVal: null,\n gageHeightDate: response[0].gageHeightDateTime,\n },\n // hourlyGageHeight: response,\n hourlyGageHeight: filterByHourly,\n remarkElements: [],\n };\n\n newGH.push(list);\n }\n\n // console.log({ newGH });\n\n reset({\n dataTable: newGH,\n });\n })\n .catch((err) => console.log(err));\n };\n\n const onHandleSubmit = async (ev) => {\n // console.log(ev);\n setIsLoading(false);\n\n // const month = (new Date(dateSelected).getMonth() + 1)\n // .toString()\n // .padStart(2, \"0\");\n const month = (new Date(dateSelected).getMonth() + 1).toString();\n const year = new Date(dateSelected).getFullYear();\n\n const configPost = {\n headers: {\n \"X-Function-Header\": \"2630\",\n },\n };\n const configPut = {\n headers: {\n \"X-Function-Header\": \"2601\",\n },\n };\n\n const flatData = ev.dataTable.map((item) => item.hourlyGageHeight).flat();\n let payload = [];\n flatData.map((item) => {\n // console.log({\n // gageHeightDateTime: item.gageHeightDateTime,\n // gageHeight: item.gageHeight,\n // });\n if (\n !!item.remark ||\n !!item.typeRemark ||\n item.typeRemark === 0 ||\n (item.gageHeight !== null && !isNaN(item.gageHeight))\n ) {\n payload.push({\n stationId: stationIdSelected.value,\n gageHeightDateTime: item.gageHeightDateTime,\n gageHeight:\n !!item.gageHeight || item.gageHeight == 0 ? item.gageHeight : null,\n typeRemarkId: item.typeRemark ? item.typeRemark.typeRemarkId : null,\n remark: item.remark,\n });\n }\n });\n // console.log({ payload });\n try {\n await dwrApi\n .post(\n `/HourlyGageHeights/Station/${stationIdSelected.value}?month=${month}&year=${year}&MeasureTimeId=${measureTimeSelected?.data?.measureTimeId}`,\n payload,\n configPost\n )\n .then((res) => {\n setIsLoading(false);\n\n addToast(\n {displayForm}\n
\n {fields.length ? (\n {displayTable}
\n ) : (\n {alertMessage}
\n )}\n บันทึกข้อมูลสำเร็จ
, {\n appearance: \"success\",\n autoDismiss: true,\n });\n })\n .catch((err) => {\n setIsLoading(false);\n let message = \"กรุณาลองใหม่\";\n if (err.response && err.response.status == 401) {\n message = \"ไม่สามารถเพิ่มข้อมูลได้ กรุณาล็อกอิน\";\n } else if (err.response && err.response.status == 400) {\n message = \"ข้อมูลไม่ถูกต้อง\";\n } else {\n message = \"เกิดข้อผิดพลาด บันทึกข้อมูลไม่สำเร็จ\";\n }\n addToast({message}
, {\n appearance: \"error\",\n autoDismiss: true,\n });\n });\n\n fetchHourlyGageHeights();\n } catch (e) {\n addToast(\n\n {(e.response && e.response.title) ||\n \"เกิดข้อผิดพลาด บันทึกข้อมูลไม่สำเร็จ\"}\n
,\n {\n appearance: \"error\",\n autoDismiss: true,\n }\n );\n }\n };\n\n useEffect(() => {\n fetchMeasureTime();\n }, []);\n\n useEffect(() => {\n setHourlyGageHeights(\"\");\n setManageRequest(false);\n fetchHourlyGageHeights();\n setMeasureTimeSelected(\"\");\n }, [dateSelected, stationIdSelected]);\n\n useEffect(() => {\n setManageRequest(false);\n\n // console.log({ selectMeasureTime: measureTimeSelected });\n }, [measureTimeSelected]);\n\n useEffect(() => {\n if (basinIdSelected) {\n fetchStationOfBasin();\n }\n }, [basinIdSelected]);\n\n useEffect(() => {\n generateDayInMonth();\n }, [hourlyGageHeights, measureTimeSelected]);\n\n useEffect(() => {\n generateDataTable();\n }, [dayOfGageHeights]);\n\n useEffect(() => {\n setDateSelected(\"\");\n setMeasureTimeSelected(null);\n }, [stationIdSelected]);\n\n const onHandleBasinIdSelected = (ev) => {\n if (ev) {\n setBasinIdSelected(ev);\n setStationIdSelected(\"\");\n } else {\n setBasinIdSelected(\"\");\n setStationIdSelected(\"\");\n }\n };\n\n const onHandleStationIdSelected = (ev) => {\n if (ev) {\n setStationIdSelected(ev);\n } else {\n setStationIdSelected(\"\");\n }\n };\n\n const onOpenModalConfirm = (ev) => {\n // ev.preventDefault();\n setModalConfirmOpen(true);\n };\n\n const displayForm = (\n\n
\n );\n\n const displayTable1 = (\n \n
\n \n
\n เดือน / ปี :
\n \n
\n \n
\n กำหนดเวลา :
\n \n \n ev ? setMeasureTimeSelected(ev) : setMeasureTimeSelected(\"\")\n }\n noOptionsMessage={() => \"ไม่พบคาบเวลา\"}\n />\n
\n \n \n จัดการข้อมูล\n \n {/*
\n \n ) : (\n \"\"\n )}\n \n { basinIdSelected &&\n stationIdSelected &&\n dateSelected &&\n measureTimeSelected === \"\" ? (\n
*/}\n \n ไม่พบข้อมูล\n
\n ) : (\n \"\"\n )}\n \n \n \n
\n
\n );\n\n const displayButtonGroup = (\n | \n วันที่\n | \n\n ระดับน้ำที่อ่านได้\n | \nเฉลี่ย(เมตร) | \nหมายเหตุ | \n
|---|---|---|---|
| \n {item.timePeriod.slice(0, -3)}\n | \n );\n })}\n|||
| \n {item.avgGageHeight\n ? convertDate(item.avgGageHeight.gageHeightDate)\n : \"\"}\n {/* {item.avgGageHeight.gageHeightDate} */}\n | \n\n {item.hourlyGageHeight.map((gage, gIindex) => {\n return (\n\n {summary}\n {/* {total && dataQty ? (total / dataQty).toFixed(2) : \"\"} */}\n | \n\n | \n
\n \n \n บันทึก\n \n \n \n \n\n \n \n\n \n \n\n \n setIsModalDeleteOpen(true)}\n >\n ลบ\n
\n \n \n );\n\n const displayTopButton = (\n \n setXlsFile(ev.target.files[0])}\n />\n\n \n นำเข้า\n \n {/* https://imhydronetwork.amrasia.com */}\n \n
\n \n {hourlyGageHeights ? (\n
\n * รองรับไฟล์ .csv, .xls, .xlsx
\n \n \n );\n\n const displayTable2 = (\n <>\n | ระดับน้ำ | \nเมตร | \nวันที่ | \nเวลา | \n
|---|---|---|---|
| สูงสุด | \n{hourlyGageHeights?.maxHourlyGageHeight?.gageHeight} | \n\n {hourlyGageHeights?.maxHourlyGageHeight?.gageHeightDateTime\n ? convertDateTh(\n hourlyGageHeights?.maxHourlyGageHeight?.gageHeightDateTime\n )\n : \"-\"}\n | \n\n {hourlyGageHeights?.maxHourlyGageHeight?.gageHeightDateTime\n ? convertTime(\n hourlyGageHeights?.maxHourlyGageHeight?.gageHeightDateTime\n )\n : \"-\"}\n | \n
| ต่ำสุด | \n{hourlyGageHeights?.minHourlyGageHeight?.gageHeight} | \n\n {hourlyGageHeights?.minHourlyGageHeight?.gageHeightDateTime\n ? convertDateTh(\n hourlyGageHeights?.minHourlyGageHeight?.gageHeightDateTime\n )\n : \"-\"}\n | \n\n {hourlyGageHeights?.minHourlyGageHeight?.gageHeightDateTime\n ? convertTime(\n hourlyGageHeights?.minHourlyGageHeight?.gageHeightDateTime\n )\n : \"-\"}\n | \n
| เฉลี่ยสูงสุด | \n{hourlyGageHeights?.maxAvgGageHeight?.dailyGageHeightVal} | \n\n {hourlyGageHeights?.maxAvgGageHeight?.gageHeightDate\n ? convertDateTh(\n hourlyGageHeights?.maxAvgGageHeight?.gageHeightDate\n )\n : \"-\"}\n | \n\n -\n {/* {hourlyGageHeights?.maxAvgGageHeight?.gageHeightDate\n ? convertTime(\n hourlyGageHeights?.maxAvgGageHeight?.gageHeightDate\n )\n : \"-\"} */}\n | \n
| เฉลี่ยต่ำสุด | \n{hourlyGageHeights?.minAvgGageHeight?.dailyGageHeightVal} | \n\n {hourlyGageHeights?.minAvgGageHeight?.gageHeightDate\n ? convertDateTh(\n hourlyGageHeights?.minAvgGageHeight?.gageHeightDate\n )\n : \"-\"}\n | \n\n -\n {/* {hourlyGageHeights?.minAvgGageHeight?.gageHeightDate\n ? convertTime(\n hourlyGageHeights?.minAvgGageHeight?.gageHeightDate\n )\n : \"-\"} */}\n | \n
\n
\n );\n};\n\nexport default HydroStationManual;\n","import React, { useEffect, useState } from \"react\";\nimport { Document, Page } from \"react-pdf\";\nimport { dwrApi } from \"../../../api/dwrApi\";\n// import ReactPDF from \"@react-pdf/renderer\";\n\n// import { Document, Page } from \"react-pdf\";\n\nconst Stn = () => {\n const [numPages, setNumPages] = useState(null);\n const [pageNumber, setPageNumber] = useState(1);\n const [pdfRes, setPdfRes] = useState(null);\n\n function onDocumentLoadSuccess(ev) {\n setNumPages(ev._pdfInfo.numPages);\n }\n\n useEffect(() => {\n dwrApi\n .get(`/StationOnepages/6`)\n .then((res) => {\n console.log(res);\n setPdfRes(res.data);\n })\n .catch((err) => {\n console.log(err);\n });\n }, []);\n\n return (\n \n
\n\n \n {displayForm}\n
\n {hourlyGageHeights ? (\n <>\n {measureTimeSelected && manageRequest ? (\n <>{displayTopButton}\n ) : (\n \"\"\n )}\n\n {manageRequest ? (\n \n ) : (\n \"\"\n )}\n \n ) : manageRequest ? (\n {alertMessage}
\n ) : (\n \"\"\n )}\n \n {!!pdfRes && (\n <>\n \n {new Array(numPages).fill(\"x\", 0, numPages).map((el, elIndex) => {\n return
\n );\n};\n\nexport default Stn;\n","import React, { useEffect, useState } from \"react\";\nimport { useWindowSize } from \"./Hooks/WindowSize\";\nimport MainLayout from \"./Layout/MainLayout\";\nimport Login from \"./Pages/Login\";\n// import Map from \"./Pages/Map\";\nimport GMap from \"./Pages/GMap\";\nimport Home from \"./Pages/Home\";\nimport News from \"./Pages/News\";\nimport { Switch, Route, Redirect } from \"react-router-dom\";\nimport { useHistory } from \"react-router\";\nimport NewsManagement from \"./Pages/Administrator/NewsManagement/NewsManagement\";\nimport SlideShowManagement from \"./Pages/Administrator/SlideShowManagement/SlideShowManagement\";\nimport UserManagement from \"./Pages/Administrator/UserManagement/UserManagement\";\nimport UserReport from \"./Pages/Administrator/UserManagement/UserReport\";\nimport ManualStation from \"./Pages/Administrator/WaterLevelData/ManualStation\";\nimport AutoStation from \"./Pages/Administrator/WaterLevelData/AutoStation\";\nimport ReportWaterLevelAuto from \"./Pages/Administrator/WaterLevelData/ReportWaterLevelAuto\";\nimport ReportWaterLevelManualMonthly from \"./Pages/Administrator/WaterLevelData/ReportWaterLevelManualMonthly\";\nimport ReportWaterLevelManualDaily from \"./Pages/Administrator/WaterLevelData/ReportWaterLevelManualDaily\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { updateIsMobileMode } from \"./redux/action/dataAction\";\nimport {\n updateProfile,\n updateUserData,\n updateUserPermissions,\n updateUserDetail,\n} from \"./redux/action/profileAction\";\nimport createActivityDetector from \"activity-detector\";\nimport { authenticate, CLIENT_ID, CLIENT_SECRET } from \"./api/authenticate\";\nimport AutoStationMeteo from \"./Pages/Administrator/Meteolorogy/AutoStationMeteo\";\nimport ManualStationMeteo from \"./Pages/Administrator/Meteolorogy/ManualStationMeteo\";\nimport StationManagement from \"./Pages/Administrator/StationManagement/StationManagement\";\nimport AddStation from \"./Pages/Administrator/StationManagement/AddStation\";\nimport qs from \"qs\";\nimport axios from \"axios\";\nimport LocationManagement from \"./Pages/Administrator/Reference/LocationManagement\";\nimport ConfigManagement from \"./Pages/Administrator/Reference/ConfigManagement\";\nimport BasinManagement from \"./Pages/Administrator/Reference/BasinManagement\";\nimport DataHydroManagement from \"./Pages/Administrator/Reference/DataHydroManagement\";\nimport DepartmentManagement from \"./Pages/Administrator/Reference/DepartmentManagement\";\nimport PersonManagement from \"./Pages/Administrator/Reference/PersonManagement\";\nimport StationTypeManagement from \"./Pages/Administrator/Reference/StationTypeManagement\";\nimport SubBasinManagement from \"./Pages/Administrator/Reference/SubBasinManagement\";\nimport MachineManagement from \"./Pages/Administrator/Reference/MachineManagement\";\nimport jwt_decode from \"jwt-decode\";\nimport ReportMeteoAuto from \"./Pages/Administrator/Meteolorogy/ReportMeteoAuto\";\nimport ReportMeteoDaily from \"./Pages/Administrator/Meteolorogy/ReportMeteoDaily\";\nimport ReportMeteoMonthly from \"./Pages/Administrator/Meteolorogy/ReportMeteoMonthly\";\nimport ReportSummary from \"./Pages/Administrator/StationManagement/ReportSummary\";\nimport ReportStationDetail from \"./Pages/Administrator/StationManagement/ReportStationDetail\";\nimport MeteoTransferStatus from \"./Pages/Administrator/StationManagement/MeteoTransferStatus\";\nimport HydroTransferStatus from \"./Pages/Administrator/StationManagement/HydroTransferStatus\";\nimport WaterServey from \"./Pages/Administrator/WaterVolume/WaterServey\";\nimport WaterMeasurement from \"./Pages/Administrator/WaterVolume/WaterMeasurement\";\nimport WaterAnalysis from \"./Pages/Administrator/WaterVolume/WaterAnalysis\";\nimport StationCoefficient from \"./Pages/Administrator/WaterVolume/StationCoefficient\";\nimport RatingTableImportAuto from \"./Pages/Administrator/WaterVolume/RatingTableImportAuto\";\nimport RatingTableModel from \"./Pages/Administrator/WaterVolume/RatingTableModel\";\nimport { dwrApi } from \"./api/dwrApi\";\nimport RatingTableManual from \"./Pages/Administrator/WaterVolume/RatingTableManual\";\nimport RatingTableAuto from \"./Pages/Administrator/WaterVolume/RatingTableAuto\";\nimport RatingTableComparison from \"./Pages/Administrator/WaterVolume/RatingTableComparison\";\nimport MeteoStationManual from \"./Pages/Administrator/Meteolorogy/MeteoStationManual\";\nimport MeteoStationAuto from \"./Pages/Administrator/Meteolorogy/MeteoStationAuto\";\nimport HydroStationAuto from \"./Pages/Administrator/WaterLevelData/HydroStationAuto\";\nimport HydroStationManual from \"./Pages/Administrator/WaterLevelData/HydroStationManual\";\nimport Stn from \"./Pages/Administrator/StationManagement/Stn\";\n\nconst AppRoute = ({ component: Component, layout: Layout, ...rest }) => {\n return (\n