diff --git a/src/auth.js b/src/auth.js
index a8fcbf0..cc38d6e 100644
--- a/src/auth.js
+++ b/src/auth.js
@@ -1,74 +1,75 @@
-import {toast} from "react-toastify";
-
-// export const SERVER_URL = "http://192.168.1.8:8080/api"
-export const SERVER_URL = "http://dev.teamortix.com:4290/api"
-
-export const defaultAuth = () => ({
- loggedIn: window.localStorage.getItem("authtoken") !== null,
- token: window.localStorage.getItem("authtoken"),
- username: '',
- email: '',
- admin: false,
-})
-
-
-export const reducer = (state, action) => {
- return {...state, ...action.response}
-}
-
-export async function authenticate(token) {
- if (token == null)
- return defaultAuth()
-
- const {status, json} = await query("/account/info", {token}).catch(() => {
- toast.error("The authentication server is offline!")
- return defaultAuth()
- })
-
- if (status !== 200) {
- window.localStorage.removeItem("authtoken")
- toast.warn("You have been logged out.")
- return defaultAuth()
- }
- console.debug("Authentication Response:", json)
-
- const {email, username, admin} = json;
- return {username, email, admin, loggedIn: true}
-}
-
-export async function registration(username, email, password) {
- const {status, json} = await query("/register", {username, email, password}).catch(() => {
- return {status: 500, json: {reason: "The authentication server is offline!"}}
- })
-
- console.debug("Registration Response:", json)
- return {status, json}
-}
-
-export async function login(usernameOrEmail, password) {
- const {status, json} = await query("/login", {usernameOrEmail, password}).catch(() => {
- return {status: 500, json: {reason: "The authentication server is offline!"}}
- })
- console.debug("Login Response:", json)
-
- return {status, json}
-}
-
-export function logout(token) {
- window.localStorage.removeItem("authtoken")
- query("/logout", {token}).then(() => {
- toast.warn("You have been logged out.")
- })
- return defaultAuth()
-}
-
-export async function query(url, data) {
- console.debug("FETCH: " + SERVER_URL + url + " - " + JSON.stringify(data))
- let response = await fetch(SERVER_URL + url, {
- method: "POST",
- headers: {"Content-Type": "application/json"},
- body: JSON.stringify(data)
- })
-
- return {status: response.status, json: await response.json()}
+import {toast} from "react-toastify";
+
+// export const SERVER_URL = "http://192.168.1.8:8080/api"
+export const SERVER_URL = "http://dev.teamortix.com:4290/api"
+
+export const defaultAuth = () => ({
+ loggedIn: window.localStorage.getItem("authtoken") !== null,
+ token: window.localStorage.getItem("authtoken"),
+ username: '',
+ email: '',
+ admin: false,
+})
+
+
+export const reducer = (state, action) => {
+ return {...state, ...action.response}
+}
+
+export async function authenticate(token) {
+ if (token == null)
+ return defaultAuth()
+
+ const {status, json} = await query("/account/info", {token}).catch(() => {
+ toast.error("The authentication server is offline!")
+ return defaultAuth()
+ })
+
+ if (status !== 200) {
+ window.localStorage.removeItem("authtoken")
+ toast.warn("You have been logged out.")
+ return defaultAuth()
+ }
+ console.debug("Authentication Response:", json)
+
+ const {email, username, admin} = json;
+ return {username, email, admin, loggedIn: true}
+}
+
+export async function registration(username, email, password) {
+ const {status, json} = await query("/register", {username, email, password}).catch(() => {
+ return {status: 500, json: {reason: "The authentication server is offline!"}}
+ })
+
+ console.debug("Registration Response:", json)
+ return {status, json}
+}
+
+export async function login(usernameOrEmail, password) {
+ const {status, json} = await query("/login", {usernameOrEmail, password}).catch(() => {
+ return {status: 500, json: {reason: "The authentication server is offline!"}}
+ })
+ console.debug("Login Response:", json)
+
+ return {status, json}
+}
+
+export function logout(token) {
+ window.localStorage.removeItem("authtoken")
+ query("/logout", {token}).then(() => {
+ toast.warn("You have been logged out.")
+ })
+ return defaultAuth()
+}
+
+export async function query(url, data) {
+ console.debug("FETCH: " + SERVER_URL + url + " - " + JSON.stringify(data))
+ let response = await fetch(SERVER_URL + url, {
+ method: "POST",
+ headers: {"Content-Type": "application/json"},
+ body: JSON.stringify(data)
+ })
+ const json = await response.json()
+ console.debug(json)
+ return {status: response.status, json}
}
\ No newline at end of file
diff --git a/src/components/Admin.js b/src/components/Admin.js
new file mode 100644
index 0000000..da324c2
--- /dev/null
+++ b/src/components/Admin.js
@@ -0,0 +1,243 @@
+import React, {useCallback, useContext, useEffect, useReducer, useState} from 'react';
+import Navbar from "./Navbar";
+
+import {AuthContext} from "../App";
+import Griddle, {ColumnDefinition, plugins, RowDefinition} from "griddle-react";
+import {query} from "../auth";
+import "flatpickr/dist/themes/material_blue.css";
+import "../styles/tables.css"
+import Flatpickr from "react-flatpickr";
+import {Input} from "../custom";
+import {toast} from "react-toastify";
+import {AiFillDelete, AiFillEdit} from "react-icons/ai";
+import Modal from "react-modal"
+import FileManualForm from "./FileManualForm";
+
+
+const background = require('../assets/wave.png')
+
+const defaultData = () => [{
+ ID: "No Data Found",
+ Date: "",
+ Precipitation: "",
+ Latitude: "",
+ Longitude: "",
+ Remarks: "",
+ Edit: "",
+}]
+
+function Admin({history, ...props}) {
+ const {authState} = useContext(AuthContext)
+ const [data, setData] = useState(defaultData())
+ const [items, setItems] = useState(10)
+ const [status, setStatus] = useState("")
+ const initialDates = () => {
+ const now = new Date()
+ const lastYear = new Date();
+ lastYear.setFullYear(lastYear.getFullYear() - 1)
+ return [lastYear, now]
+ }
+ const [dateRange, setDateRange] = useState([]);
+ const [editModal, setEditModal] = useState({open: false, data: {}})
+ const [updateData, dispatchEdit] = useReducer((state, action) => action, [])
+
+ useEffect(() => {
+ const params = new URLSearchParams(props.location.search)
+ let range = initialDates()
+ if (params.get("after")) range[0] = new Date(params.get("after"))
+ if (params.get("before")) range[1] = new Date(params.get("before"))
+ setDateRange(range)
+ }, [])
+
+ useEffect(() => {
+ console.log(authState)
+ if (!authState.loggedIn) history.push("/login?return=admin")
+ if (!authState.admin) history.push("/")
+ }, [authState, history])
+
+ const deleteRow = async (data) => {
+ const {status, json} = await query("/data/delete", data).catch(e => {
+ console.debug(e)
+ return {status: 500, json: {reason: "The upload server is offline!"}}
+ })
+ console.debug("Delete Row Response", json)
+ return {status, json}
+ }
+
+ const initiateData = useCallback(async () => {
+ if (dateRange.length !== 2 || !authState.username) return
+ let after = dateRange[0]
+ let before = dateRange[1]
+ before.setDate(before.getDate() + 1)
+ after.setDate(after.getDate() - 1)
+
+
+ const now = new Date();
+ now.setDate(now.getDate() + 5)
+ const hundred = new Date(1900, 0, 0)
+
+ if (after > now || after < hundred ||
+ before > now || before < hundred)
+ return toast.error("Invalid Date Range!")
+
+ setStatus("Loading Data...")
+ let {json, status} = await query("/data/query", {
+ token: authState.token,
+ after_date: after,
+ before_date: before,
+ username: authState.username,
+ }).catch(() => ({status: 500, json: {reason: "The authentication server is offline!"}}))
+ setStatus("")
+ if (status !== 200) return toast.error(json.reason)
+
+ let newData = defaultData()
+
+ const formatDate = (date) => {
+ return date.getFullYear() + "-" + (date.getMonth() + 1).toString().padStart(2, "0") + "-" + date.getDate().toString().padStart(2, "0")
+ }
+
+ json.entries.forEach((entry, index) => {
+ const date = new Date(entry.date);
+
+ const group = json.groups.find(gr => gr.id === entry.group_id)
+ newData[index] = {
+ ID: entry.id,
+ Date: formatDate(date),
+ Precipitation: entry.precipitation,
+ Latitude: group.latitude,
+ Longitude: group.longitude,
+ Verified: group.validated ? "Yes" : "No",
+ Remarks: entry.remarks,
+ }
+ })
+ setData(newData)
+
+ before.setDate(before.getDate() - 1)
+ after.setDate(after.getDate() + 1)
+ window.history.pushState("Search", "Rain Track", "/mydata?after=" + formatDate(after) + "&before=" + formatDate(before))
+ }, [setData, authState.token, dateRange, authState.username])
+
+ useEffect(() => {
+ (async () => {
+ initiateData()
+ })();
+ }, [setData, initiateData, dateRange, authState.username])
+ const styleConfig = {
+ classNames: {
+ Filter: "input h-8",
+ Table: "table table-bordered table-hover table-striped lg:overflow-x-auto overflow-y-scroll",
+ PreviousButton: "border border-gray-300 px-2 py-1 w-20 mr-2 rounded",
+ NextButton: "border border-gray-300 px-2 py-1 w-20 rounded ml-2"
+ }
+ }
+ useEffect(() => {
+ if (updateData.length !== 0) {
+ const row = data[updateData[1]]
+ if (!row) return
+ switch (updateData[0]) {
+ case 0:
+ setEditModal({open: true, data: row})
+ break;
+ case 1:
+ window.confirm("Are you sure you would like to delete this row?")
+ && (async () => {
+ let {json, status} = await deleteRow({token: authState.token, id: row.ID})
+ if (status !== 200) return toast.error(json.reason)
+ toast.success("Entry successfully deleted")
+ dispatchEdit([])
+ setData(data.filter(r => r !== row))
+ })()
+ break;
+ default:
+ break;
+ }
+ }
+ }, [updateData, data, authState])
+
+
+ return (
+
+
+
+
+
setDateRange(date)}
+ options={{
+ dateFormat: "m-d-Y",
+ mode: "range",
+ wrap: true,
+ position: "below"
+ }}>
+
+
+ Select Date Range
+
+
+
+
{status}
+
+
+
+
+
+
+
+
+
+
+
+
+ }/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
dispatch([0, griddleKey])}>
+
dispatch([1, griddleKey])}>
+
-
-
Upload File Entries
-
- Click the button to upload an .xlsx file
-
-
-
-
-
+
+
Upload File Entries
+
+ Click the button to upload an .xlsx file
+
+
+
+
+
-
-
-
-
Your Rainfall Data in One Place
-
-
Look through your rainfall data with ease.
-
-
-
- Start Uploading Data
-
-
-
+
+
+
+
Your Rainfall Data in One Place
+
+
Look through your rainfall data with ease.
+
+
+
+ Start Uploading Data
+
+
+
You will soon be redirected. Click here if you are not.
- );
-}
-
-export default Logout;
+import React, {useContext, useEffect} from 'react';
+import {AuthContext} from "../App";
+import {logout} from "../auth";
+import {Link} from "react-router-dom";
+import {toast} from "react-toastify";
+
+function Logout(props) {
+ const {authDispatch, authState} = useContext(AuthContext)
+ useEffect(() => {
+ if (authState.loggedIn) authDispatch({response: logout(authState.token)})
+ else toast.warn("You are not logged in!")
+ props.history.push("/")
+ })
+
+ return (
+ You will soon be redirected. Click here if you are not.
+ );
+}
+
+export default Logout;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index cc1baaa..c6b62ae 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,69 +1,78 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {Link} from "react-router-dom";
-import {AuthContext} from "../App";
-
-const pathsCenter = [
- {name: "All Data", to: "/all", extra: ""},
- {name: "Upload Data", to: "/upload", extra: ""},
- {name: "Your Data", to: "/", extra: ""},
-]
-
-const pathsGuest = [
- {name: "Log In", to: "/login", extra: ""},
- {name: "Sign Up", to: "/register", extra: "rounded-full border border-white px-4 pb-1 pt-1 inline-block"},
-]
-
-const pathsLoggedIn = [
- {name: "Account", to: "/account", extra: ""},
- {name: "Sign Out", to: "/logout", extra: ""},
-]
-
-function Navbar({color = "text-white", hover="hover:border-white"}) {
- const [showDropdown, setDropdown] = useState(false)
- const [userPaths, setUserPaths] = useState(pathsGuest)
- const {authState} = useContext(AuthContext)
-
- useEffect(() => {
- if (authState.loggedIn) {
- setUserPaths(() => pathsLoggedIn)
- } else setUserPaths(() => pathsGuest)
- }, [authState.loggedIn])
-
- return
-
-
-
RainTrack
-
-
-
- {props.paths.map(path =>
-
- {path.name}
-
- )}
-
+
+
RainTrack
+
+
+
+ {props.paths.map(path =>
+
+ {path.name}
+
+ )}
+
-
-
-
-
- The page you requested was not found.
- Please confirm your URL or go back to the home page.
-
-
-
-
Go Home
-
-
+
+
+
+
+ The page you requested was not found.
+ Please confirm your URL or go back to the home page.
+
+
+
+
Go Home
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
setDateRange(date)}
+ options={{
+ dateFormat: "m-d-Y",
+ mode: "range",
+ wrap: true,
+ position: "below"
+ }}>
+
+
+ Select Date Range
+
+
+
+
{status}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Statistics
+
+ iqr(items)}>Interquartile Range
+ std(items)}>Standard Deviation
+ mean(items)}>Mean (Average)
+ median(items)}>Median
+ mode(items)}>Mode
+ max(items) - min(items)}>Range
+
+
+
{children}
+
{data.length !== 0 && calculate(data.map(set => set.Precipitation)).toString()}
+
+
+
+
+
+
+
+
+
+
+
+
+
setDateRange(date)}
+ options={{
+ dateFormat: "m-d-Y",
+ mode: "range",
+ wrap: true,
+ position: "below"
+ }}>
+
+
+ Select Date Range
+
+
+
+
{status}
+
+
+
+
+
+
+
+
+
+
+
+
+ }/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
dispatch([0, griddleKey])}>
+
dispatch([1, griddleKey])}>
+
-
-
props.setValue(e.target.value))}
- />
-
{errors[name]?.message}
-
+
+
props.setValue(e.target.value))}
+ />
+
{errors[name]?.message}
+