Skip to content

Commit

Permalink
Finalize
Browse files Browse the repository at this point in the history
  • Loading branch information
issacto committed Mar 9, 2021
0 parents commit 4c63554
Show file tree
Hide file tree
Showing 29 changed files with 27,751 additions and 0 deletions.
23 changes: 23 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<p align="center">
<img alt="Parking" src="./src/images/icon.svg" width="60" />
</p>
<h2 align="center">
Kowloon West Realtime Carpark Data || 九龍西停車場即時數據 🇭🇰
</h2>


<hr/>
This website provides realtime carpark vacancy data in West Kowloon (Hong Kong)

<br/>此網站提供(香港)九龍西停車場的即時數據

### Development
* React

### Data
* Provided by DATA.GOV.HK
* https://sps-opendata.pilotsmartke.gov.hk/rest/getCarparkInfos
* https://sps-opendata.pilotsmartke.gov.hk/rest/getCarparkVacancies

### Run

* Use Chrome to run the website (some packages doesnt work well with mac)



15,639 changes: 15,639 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

43 changes: 43 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"name": "react-parking",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-collapsible": "^2.8.3",
"react-dom": "^17.0.1",
"react-leaflet": "^3.1.0",
"react-loading-overlay": "^1.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Binary file added public/favicon.ico
Binary file not shown.
43 changes: 43 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="../src/images/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="九龍西停車場即時數據庫"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>九龍西|停車場 - 九龍西停車場即時數據庫</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Binary file added public/logo192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/logo512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
3 changes: 3 additions & 0 deletions public/robots.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
38 changes: 38 additions & 0 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
139 changes: 139 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
import * as React from "react"
import Query from "./components/Query"
import Map from "./components/Map"
import Footer from "./components/Footer"
import { useState, useEffect } from 'react';
import axios from 'axios';
import Logo from "./images/icon.svg"
import LoadingOverlay from 'react-loading-overlay';
// styles

const pageStyles = {
color: "white",
fontFamily: "-apple-system, Roboto, sans-serif, serif",

backgroundColor:"#29323c",
height:"100%",
minWidth:"99.5%",
maxWidth:"99.5%",
padding:5

}
const headerStyles={
display: "flex",
justifyContent: "space-between",
margin:"2vh"
}
const recentralizeButtonStyles = {
backgroundColor:"#26323c",
border:"1px solid cyan",
borderRadius:"1vh",
color:"aliceblue",
fontSize: "3vh",
}

const displayLineStyles={
margin:"2vh",
textAlign:"right",
display: "flex",
justifyContent: "space-between"
}

const container={
display:"flex",
flexDirection: 'row',
border:"5px solid lightseagreen",
}
const logoStyles={
width:"6vh",
marginTop:"2.5vh",
marginRight:"2.5vh"

}
const mapStyles = {
minWidth: '70%',
maxWidth: '70%',
justifyContent:"center",
marginTop:"auto",
marginBottom:"auto",
}

const queryStyles = {
minWidth: '30%',
maxWidth: '30%',
borderLeft:"3px solid lightseagreen",
fontSize:"2.3vh",
backgroundColor:"#20323c",
}


// markup
const IndexPage = () => {
const [data, setData] = useState({ results: [] });
const [detailsMap, setDetailsMap] = useState("");
const [isLoad, changeLoad] = useState(false)
const [center, changeCenter] = useState([22.31833206,114.209832494])
const [zoom, changeZoom] = useState(14)
let [loading, setLoading] = useState(true);


useEffect(async () => {
const result = await axios(
'https://sps-opendata.pilotsmartke.gov.hk/rest/getCarparkVacancies',
);

const map = await axios(
' https://sps-opendata.pilotsmartke.gov.hk/rest/getCarparkInfos?lang=zh_TW',
);
setDetailsMap(map.data.results)
setData(result.data);
changeLoad(true)
},[]);

useEffect(() => {
setTimeout(() => {setLoading(!loading)},4000);

}, []);

const recentralize =()=>{
changeCenter([22.31833206,114.209832494])
changeZoom(14)
}

if (typeof window !== 'undefined') {
return (


<div style={pageStyles}>
<div style={headerStyles}>
<h1 >九龍西停車場即時數據</h1>
<div >
<a href="/" >
<img style={logoStyles}src={Logo}></img>
</a>
</div>
</div>
<LoadingOverlay
active={loading}
spinner
text='載入網站中'
>
<div style={container}>
<div style={mapStyles}>
<Map data={data} zoom={zoom} detailsMap ={detailsMap} center ={center}/>
<div style={displayLineStyles}>
<p style={{fontStyle: "italic",color:"grey"}}>{"(lat: " + center[0]}{" long: "+center[1]}{","}{zoom+") "}</p>
<button style={recentralizeButtonStyles}onClick={recentralize}>宏觀</button>
</div>
</div>
{isLoad?
<div style={queryStyles}><Query data={data} detailsMap ={detailsMap} changeCenter={changeCenter} changeZoom={changeZoom} /></div>:null}
</div>
</LoadingOverlay>
<Footer/>

</div>
)}
}

export default IndexPage
8 changes: 8 additions & 0 deletions src/App.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
26 changes: 26 additions & 0 deletions src/components/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from "react"


const mainStyles={
justifyContent:"center",
alignItems:"center",
textAlign:"center",
marginTop:"4.7vh",
fontSize:"1.7vh",
fontStyle: "italic"

}
const IndexPage = () => {
return(
<div style={mainStyles}>
<a href="https://data.gov.hk/en/" >
<p style={{color:"grey"}}>[email protected] {" "}</p>
</a>
<a href="https://github.com/issacto" >
<p style={{color:"grey", display:"inline"}}>Copyright@IssacTo </p>
</a>

</div>
)
}
export default IndexPage
Loading

0 comments on commit 4c63554

Please sign in to comment.