feat: adjust app/pages/home.jsx
This commit is contained in:
parent
42571815de
commit
cf235c2a96
|
@ -1,13 +1,21 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
|
||||||
|
|
||||||
|
import Header from './components/header';
|
||||||
import Home from './pages/home';
|
import Home from './pages/home';
|
||||||
import StationProfile from './pages/station-profile';
|
import StationProfile from './pages/station-profile';
|
||||||
|
|
||||||
|
import packageInfo from '../package.json'
|
||||||
|
const VERSION = packageInfo.version;
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
|
<Header />
|
||||||
|
<p>
|
||||||
|
This website (Version: {VERSION}) dislays a public transport station profile for the provided UIC station code.
|
||||||
|
</ p>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home />} />
|
||||||
<Route path="/:uic" element={<StationProfile />} />
|
<Route path="/:uic" element={<StationProfile />} />
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { Link} from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function Header(){
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
to='/'
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Home
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
title="imprint"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer nofollow"
|
||||||
|
to='https://www.swingbe.de/imprint/'
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Imprint
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
title="privacy policy"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer nofollow"
|
||||||
|
to='https://www.swingbe.de/privacy-policy/'
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Privacy Policy
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
title="source"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer nofollow"
|
||||||
|
to='https://git.wtf-eg.de/dancesWithCycles/station-profile'
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Source
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,9 +1,93 @@
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
|
||||||
|
const uicUnavailable = '';
|
||||||
|
|
||||||
|
const [uic, setUic] = useState(uicUnavailable);
|
||||||
|
const [uicError, setUicError] = useState('');
|
||||||
|
const [isComplete, setIsComplete] = useState(false);
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
console.log('handleSubmit() start...');
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
setUicError("");
|
||||||
|
if (isNaN(uic)) {
|
||||||
|
console.log('handleSubmit() UIC NOT valid');
|
||||||
|
|
||||||
|
setUicError("Error! Enter valid UIC: ");
|
||||||
|
} else {
|
||||||
|
console.log('handleSubmit() UIC is complete');
|
||||||
|
setIsComplete(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('handleSubmit() done.');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSend = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log("Home:handleSend() uic: " + uic);
|
||||||
|
|
||||||
|
setUic(uicUnavailable);
|
||||||
|
setUicError('');
|
||||||
|
setIsComplete(false);
|
||||||
|
console.log("Home:handleSend() done.");
|
||||||
|
};
|
||||||
|
|
||||||
|
const ButtonSend = () => {
|
||||||
|
if(isComplete) {
|
||||||
|
console.log('buttonSend() complete');
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="button-send"
|
||||||
|
>3. Send: </label>
|
||||||
|
<button
|
||||||
|
className ="button-send"
|
||||||
|
id="button-send"
|
||||||
|
type="button"
|
||||||
|
onClick={e => handleSend(e)}
|
||||||
|
>Send</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}else{
|
||||||
|
console.log('buttonSend() NOT complete');
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
{(!isComplete) ? <label htmlFor="button-send">3.Push Submit before Send! </label> : null}
|
||||||
|
<button type="button" disabled>Send</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
Enter UIC station code:
|
Enter UIC station code:
|
||||||
|
<br />
|
||||||
|
<form onSubmit={e => handleSubmit(e)}>
|
||||||
|
<label htmlFor="input-uic">{uicError ? '1. ' + uicError : '1. UIC: '}</label>
|
||||||
|
<input
|
||||||
|
onChange={e => setUic(uic => e.target.value)}
|
||||||
|
type="text"
|
||||||
|
value={uic}
|
||||||
|
placeholder="Enter UIC"
|
||||||
|
required
|
||||||
|
className="input-uic"
|
||||||
|
id="input-uic"
|
||||||
|
name="input-uic"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<label htmlFor="button-submit">2.Submit: </label>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="button-submit"
|
||||||
|
id="button-submit"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<ButtonSend />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import {get} from '../utils/request';
|
|
||||||
|
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
|
|
||||||
|
import {get} from '../utils/request';
|
||||||
|
|
||||||
export default function StationProfile() {
|
export default function StationProfile() {
|
||||||
|
|
||||||
// Get the userId param from the URL.
|
// Get the userId param from the URL.
|
||||||
|
|
|
@ -21,11 +21,6 @@ module.exports = {
|
||||||
include: path.resolve(__dirname, '../app'),
|
include: path.resolve(__dirname, '../app'),
|
||||||
use: ['babel-loader'],
|
use: ['babel-loader'],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
//test all *.css using style-loader and css-loader
|
|
||||||
test: /\.css$/i,
|
|
||||||
use: ["style-loader", "css-loader"],
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
|
|
Loading…
Reference in New Issue