109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
|
import Navbar from "./Navbar";
|
|
|
|
import {AuthContext} from "../App";
|
|
import Griddle, {ColumnDefinition, plugins, RowDefinition} from "griddle-react";
|
|
import {query} from "../auth";
|
|
|
|
const background = require('../assets/wave.png')
|
|
|
|
|
|
function ViewAll(props) {
|
|
const {authState} = useContext(AuthContext)
|
|
const [data, setData] = useState([{}])
|
|
const [items, setItems] = useState(10)
|
|
|
|
useEffect(() => {
|
|
if (!authState.loggedIn) props.history.push("/login?return=all")
|
|
}, [authState.loggedIn, props.history])
|
|
|
|
const initiateData = useCallback(async () => {
|
|
let {json, status} = await query("/data/query", {token: authState.token, validated: false}).catch(() => {
|
|
return {status: 500, json: {reason: "The authentication server is offline!"}}
|
|
})
|
|
if (status !== 200) {
|
|
return
|
|
}
|
|
|
|
let data = []
|
|
json.entries.forEach((entry, index) => {
|
|
const date = new Date(entry.date);
|
|
const formattedDate = date.getFullYear() + "-" + (date.getMonth() + 1).toString().padStart(2, "0") + "-" + date.getDate().toString().padStart(2, "0")
|
|
const group = json.groups.find(gr => gr.id === entry.group_id)
|
|
data[index] = {
|
|
ID: entry.id,
|
|
Date: formattedDate,
|
|
Precipitation: entry.precipitation,
|
|
Latitude: group.latitude,
|
|
Longitude: group.longitude,
|
|
Remarks: entry.remarks,
|
|
}
|
|
})
|
|
setData(data)
|
|
|
|
}, [setData, authState.token])
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
initiateData()
|
|
})();
|
|
}, [setData, initiateData])
|
|
|
|
const styleConfig = {
|
|
classNames: {
|
|
Filter: "shadow appearance-none border rounded mb-1 py-2 px-3 mb-4 text-gray-700 leading-tight h-8",
|
|
Table: "table table-bordered table-hover table-striped",
|
|
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"
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="w-screen h-screen overflow-x-hidden bg-cover bg-center text-white flex items-center flex-col"
|
|
style={{backgroundImage: `url(${background})`}}>
|
|
<Navbar history={props.history} color={"text-blue-600"} hover={"hover:border-blue-600"}/>
|
|
|
|
<div className="container text-gray-700 bg-white p-6 mt-12 mb-32 rounded">
|
|
<Griddle data={data} plugins={[plugins.LocalPlugin]} styleConfig={styleConfig}
|
|
pageProperties={{
|
|
currentPage: 1,
|
|
pageSize: items
|
|
}}
|
|
components={{
|
|
Layout: Layout(setItems)
|
|
}}>
|
|
<RowDefinition>
|
|
<ColumnDefinition id="ID"/>
|
|
<ColumnDefinition id="Date"/>
|
|
<ColumnDefinition id="Precipitation"/>
|
|
<ColumnDefinition id="Latitude"/>
|
|
<ColumnDefinition id="Longitude"/>
|
|
<ColumnDefinition id="Remarks"/>
|
|
</RowDefinition>
|
|
</Griddle>
|
|
</div>
|
|
|
|
<div className="container text-gray-700 bg-white p-6 mb-32 rounded">
|
|
<div className="text-2xl font-semibold">Statistics</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ViewAll;
|
|
|
|
const Layout = (setItems) => (({Table, Filter, Pagination}) => (
|
|
<div>
|
|
<div className="flex w-96 pb-4 h-12 justify-between">
|
|
<Filter/>
|
|
<select onChange={e => setItems(Number(e.target.value))}>
|
|
<option value="10">Show 10 items</option>
|
|
<option value="20">Show 20 items</option>
|
|
<option value="50">Show 50 items</option>
|
|
<option value="100">Show 100 items</option>
|
|
</select>
|
|
</div>
|
|
<Table/>
|
|
<Pagination/>
|
|
</div>
|
|
)) |