relocation status
This commit is contained in:
parent
c7e7a70f18
commit
35cc2f6cdb
|
|
@ -1168,6 +1168,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
|
||||
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
|
||||
},
|
||||
"@emotion/is-prop-valid": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
||||
|
|
@ -1803,6 +1808,88 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/core": {
|
||||
"version": "4.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz",
|
||||
"integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/styles": "^4.11.2",
|
||||
"@material-ui/system": "^4.11.2",
|
||||
"@material-ui/types": "^5.1.0",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"@types/react-transition-group": "^4.2.0",
|
||||
"clsx": "^1.0.4",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"popper.js": "1.16.1-lts",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0 || ^17.0.0",
|
||||
"react-transition-group": "^4.4.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/styles": {
|
||||
"version": "4.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.2.tgz",
|
||||
"integrity": "sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@emotion/hash": "^0.8.0",
|
||||
"@material-ui/types": "^5.1.0",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"clsx": "^1.0.4",
|
||||
"csstype": "^2.5.2",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"jss": "^10.0.3",
|
||||
"jss-plugin-camel-case": "^10.0.3",
|
||||
"jss-plugin-default-unit": "^10.0.3",
|
||||
"jss-plugin-global": "^10.0.3",
|
||||
"jss-plugin-nested": "^10.0.3",
|
||||
"jss-plugin-props-sort": "^10.0.3",
|
||||
"jss-plugin-rule-value-function": "^10.0.3",
|
||||
"jss-plugin-vendor-prefixer": "^10.0.3",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
|
||||
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/system": {
|
||||
"version": "4.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.2.tgz",
|
||||
"integrity": "sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"csstype": "^2.5.2",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
|
||||
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/types": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
|
||||
"integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
|
||||
},
|
||||
"@material-ui/utils": {
|
||||
"version": "4.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
|
||||
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
|
||||
|
|
@ -4062,6 +4149,11 @@
|
|||
"shallow-clone": "^0.1.2"
|
||||
}
|
||||
},
|
||||
"clsx": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
|
||||
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
|
||||
},
|
||||
"co": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
|
|
@ -4580,6 +4672,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"css-vendor": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
|
||||
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.8.3",
|
||||
"is-in-browser": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
|
||||
|
|
@ -7448,6 +7549,11 @@
|
|||
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
|
||||
"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
|
||||
},
|
||||
"hyphenate-style-name": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
|
||||
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
|
|
@ -7548,6 +7654,14 @@
|
|||
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
|
||||
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
|
||||
},
|
||||
"indefinite-observable": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
|
||||
"integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
|
||||
"requires": {
|
||||
"symbol-observable": "1.2.0"
|
||||
}
|
||||
},
|
||||
"indent-string": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
|
||||
|
|
@ -7848,6 +7962,11 @@
|
|||
"is-extglob": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"is-in-browser": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
|
||||
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
|
||||
},
|
||||
"is-module": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||
|
|
@ -9662,6 +9781,85 @@
|
|||
"verror": "1.10.0"
|
||||
}
|
||||
},
|
||||
"jss": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz",
|
||||
"integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"csstype": "^3.0.2",
|
||||
"indefinite-observable": "^2.0.1",
|
||||
"is-in-browser": "^1.1.3",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-camel-case": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz",
|
||||
"integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"hyphenate-style-name": "^1.0.3",
|
||||
"jss": "10.5.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-default-unit": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz",
|
||||
"integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.5.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-global": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz",
|
||||
"integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.5.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-nested": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz",
|
||||
"integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.5.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-props-sort": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz",
|
||||
"integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.5.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-rule-value-function": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz",
|
||||
"integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.5.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-vendor-prefixer": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz",
|
||||
"integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"css-vendor": "^2.0.8",
|
||||
"jss": "10.5.0"
|
||||
}
|
||||
},
|
||||
"jsx-ast-utils": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz",
|
||||
|
|
@ -11091,6 +11289,11 @@
|
|||
"ts-pnp": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1-lts",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
|
||||
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.28",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.11.2",
|
||||
"@testing-library/jest-dom": "^5.11.5",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
|
|||
import UserContext from "./context/UserContext";
|
||||
import Tracking from "./components/Tracking";
|
||||
import Options from "./components/Options";
|
||||
import Stepper from './components/Stepper';
|
||||
|
||||
export default function App() {
|
||||
const [userData, setUserData ] = useState({
|
||||
|
|
@ -50,7 +51,7 @@ export default function App() {
|
|||
<Route exact path="/" component={HomePage} />
|
||||
<Route path="/user" component={LogInContainer} />
|
||||
<Route path="/pricing" component={PricingPlan} />
|
||||
<Route path="/track" component={Tracking} />
|
||||
<Route path="/track" component={Stepper} />
|
||||
<Route path="/options" component={Options} />
|
||||
</Switch>
|
||||
</UserContext.Provider>
|
||||
|
|
|
|||
|
|
@ -38,12 +38,13 @@ export default function NavBar() {
|
|||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Contact us</a></li>
|
||||
<li><a href="#" onClick={logout}>Log Out</a></li>
|
||||
{userData.user ? (
|
||||
<li><a href="#" onClick={logout}>Log Out</a></li>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<li><a href="#" onclick={register}>Register</a></li>
|
||||
<li><button type="button" onclick={login}>login</button></li>
|
||||
<li><a href="#" onclick={login}>login</a></li>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,52 @@
|
|||
import React from 'react';
|
||||
import "./options.css";
|
||||
import './options.css';
|
||||
|
||||
export default function Options() {
|
||||
|
||||
const previousBtn = document.getElementById('previousBtn');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const finishBtn = document.getElementById('finishBtn');
|
||||
const content = document.getElementById('content');
|
||||
const bullets = [...document.querySelectorAll('.bullet')];
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const previousBtn = document.getElementById('previousBtn');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const finishBtn = document.getElementById('finishBtn');
|
||||
const content = document.getElementById('content');
|
||||
const bullets = [...document.querySelectorAll('.bullet')];
|
||||
|
||||
const MAX_STEPS = 4;
|
||||
let currentStep = 1;
|
||||
if(nextBtn){
|
||||
nextBtn.addEventListener('click', () => {
|
||||
bullets[currentStep - 1].classList.add('completed');
|
||||
currentStep += 1;
|
||||
previousBtn.disabled = false;
|
||||
if (currentStep === MAX_STEPS) {
|
||||
nextBtn.disabled = true;
|
||||
finishBtn.disabled = false;
|
||||
const MAX_STEPS = 4;
|
||||
let currentStep = 1;
|
||||
if (nextBtn) {
|
||||
nextBtn.addEventListener('click', () => {
|
||||
bullets[currentStep - 1].classList.add('completed');
|
||||
currentStep += 1;
|
||||
previousBtn.disabled = false;
|
||||
if (currentStep === MAX_STEPS) {
|
||||
nextBtn.disabled = true;
|
||||
finishBtn.disabled = false;
|
||||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
|
||||
});
|
||||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if(previousBtn){
|
||||
previousBtn.addEventListener('click', () => {
|
||||
bullets[currentStep - 2].classList.remove('completed');
|
||||
currentStep -= 1;
|
||||
nextBtn.disabled = false;
|
||||
finishBtn.disabled = true;
|
||||
if (currentStep === 1) {
|
||||
previousBtn.disabled = true;
|
||||
if (previousBtn) {
|
||||
previousBtn.addEventListener('click', () => {
|
||||
bullets[currentStep - 2].classList.remove('completed');
|
||||
currentStep -= 1;
|
||||
nextBtn.disabled = false;
|
||||
finishBtn.disabled = true;
|
||||
if (currentStep === 1) {
|
||||
previousBtn.disabled = true;
|
||||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
});
|
||||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
});
|
||||
}
|
||||
|
||||
if(finishBtn){
|
||||
finishBtn.addEventListener('click', () => {
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
if (finishBtn) {
|
||||
finishBtn.addEventListener('click', () => {
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
return (
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
import React from 'react';
|
||||
import './stepper.css';
|
||||
|
||||
export default function Stepper() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
var list = document.getElementById('progress'),
|
||||
next = document.getElementById('next'),
|
||||
clear = document.getElementById('clear'),
|
||||
children = list.children,
|
||||
completed = 0;
|
||||
|
||||
// simulate activating a node
|
||||
next.addEventListener('click', function () {
|
||||
|
||||
// count the number of completed nodes.
|
||||
completed = (completed === 0) ? 1 : completed + 2;
|
||||
if (completed > children.length) return;
|
||||
|
||||
// for each node that is completed, reflect the status
|
||||
// and show a green color!
|
||||
for (var i = 0; i < completed; i++) {
|
||||
children[i].children[0].classList.remove('grey');
|
||||
children[i].children[0].classList.add('green');
|
||||
|
||||
// if this child is a node and not divider,
|
||||
// make it shine a little more
|
||||
if (i % 2 === 0) {
|
||||
children[i].children[0].classList.add('activated');
|
||||
}
|
||||
}
|
||||
|
||||
}, false);
|
||||
|
||||
// clear the activated state of the markers
|
||||
clear.addEventListener('click', function () {
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
children[i].children[0].classList.remove('green');
|
||||
children[i].children[0].classList.remove('activated');
|
||||
children[i].children[0].classList.add('grey');
|
||||
}
|
||||
completed = 0;
|
||||
}, false);
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="container">
|
||||
<h1>Relocation Status</h1>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<ul id="progress">
|
||||
<li><div class="node green"></div><p>Transport tickets confirmed</p></li>
|
||||
<li><div class="divider grey"></div></li>
|
||||
<li><div class="node grey"></div><p>Packers & movers due to come in a day</p></li>
|
||||
<li><div class="divider grey"></div></li>
|
||||
<li><div class="node grey"></div><p>school admission being confirmed</p></li>
|
||||
<li><div class="divider grey"></div></li>
|
||||
<li><div class="node grey"></div><p>House is empty</p></li>
|
||||
</ul>
|
||||
<input type="button" value="Next" id="next" />
|
||||
<input type="button" value="Clear" id="clear" />
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
|
@ -1,18 +1,101 @@
|
|||
import React from 'react';
|
||||
import "./tracking.css";
|
||||
import './tracking.css';
|
||||
|
||||
export default function Tracking() {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const previousBtn = document.getElementById('previousBtn');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const finishBtn = document.getElementById('finishBtn');
|
||||
const content = document.getElementById('content');
|
||||
const nodes = [...document.querySelectorAll('.node')];
|
||||
const dividers = [...document.querySelectorAll('.divider')];
|
||||
|
||||
const MAX_STEPS = 4;
|
||||
let currentStep = 1;
|
||||
if (nextBtn) {
|
||||
nextBtn.addEventListener('click', () => {
|
||||
nodes[currentStep - 1].classList.add('completed');
|
||||
currentStep += 1;
|
||||
previousBtn.disabled = false;
|
||||
if (currentStep === MAX_STEPS) {
|
||||
nextBtn.disabled = true;
|
||||
finishBtn.disabled = false;
|
||||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
dividers[currentStep -1 ].classList.add('completed');
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (previousBtn) {
|
||||
previousBtn.addEventListener('click', () => {
|
||||
nodes[currentStep - 2].classList.remove('completed');
|
||||
currentStep -= 1;
|
||||
nextBtn.disabled = false;
|
||||
finishBtn.disabled = true;
|
||||
if (currentStep === 1) {
|
||||
previousBtn.disabled = true;
|
||||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
});
|
||||
}
|
||||
|
||||
if (finishBtn) {
|
||||
finishBtn.addEventListener('click', () => {
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
return (
|
||||
<div class="wrapper">
|
||||
<ul class="StepProgress">
|
||||
<li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
|
||||
<li class="StepProgress-item is-done"><strong>Award an entry</strong>
|
||||
Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
|
||||
</li>
|
||||
<li class="StepProgress-item current"><strong>Post a contest</strong></li>
|
||||
<li class="StepProgress-item"><strong>Handover</strong></li>
|
||||
<li class="StepProgress-item"><strong>Provide feedback</strong></li>
|
||||
<ul class="StepProgressBar">
|
||||
<li class="step">
|
||||
<p class="step-text">
|
||||
|
||||
</p>
|
||||
<div class="node">
|
||||
1
|
||||
</div>
|
||||
</li>
|
||||
<li><div class="divider"></div></li>
|
||||
<li class="step">
|
||||
<p class="step-text">
|
||||
|
||||
</p>
|
||||
<div class="node">
|
||||
2
|
||||
</div>
|
||||
</li>
|
||||
<li><div class="divider"></div></li>
|
||||
<li class="step">
|
||||
<p class="step-text">
|
||||
|
||||
</p>
|
||||
<div class="node">
|
||||
3
|
||||
</div>
|
||||
</li>
|
||||
<li><div class="divider"></div></li>
|
||||
<li class="step">
|
||||
<p class="step-text">
|
||||
|
||||
</p>
|
||||
<div class="node">
|
||||
4
|
||||
</div>
|
||||
</li>
|
||||
<li><div class="divider"></div></li>
|
||||
</ul>
|
||||
<div class="main">
|
||||
<p id="content" class="text-center">Step Number 1</p>
|
||||
<button id="previousBtn" >Previous</button>
|
||||
<button id="nextBtn">Next</button>
|
||||
<button id="finishBtn" >Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
*, *:after, *:before { margin:0; padding:0; }
|
||||
body {
|
||||
padding: 15px;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.container{
|
||||
margin-left:0px;
|
||||
max-width: 100vw;
|
||||
}
|
||||
h1{
|
||||
font-family: Ubuntu;
|
||||
text-align: left;
|
||||
color: #66bfbf;
|
||||
margin-top: 0px;
|
||||
}
|
||||
ul{
|
||||
text-align: left;
|
||||
|
||||
|
||||
}
|
||||
.node {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 100%;
|
||||
display:inline-block;
|
||||
transition: all 1000ms ease;
|
||||
}
|
||||
|
||||
.activated {
|
||||
box-shadow: 0px 0px 0px 0px rgba(194, 255, 194, 0.8);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 86px;
|
||||
width: 2px;
|
||||
margin-left: 4px;
|
||||
transition: all 800ms ease;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
li p {
|
||||
display:inline-block;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
line-height: 1px;
|
||||
}
|
||||
|
||||
|
||||
.blue { background-color: rgba(82, 165, 255, 1); }
|
||||
.green{ background-color: rgba(92, 184, 92, 1) }
|
||||
.red { background-color: rgba(255, 148, 148, 1); }
|
||||
.grey { background-color: rgba(201, 201, 201, 1); }
|
||||
|
|
@ -1,79 +1,53 @@
|
|||
.wrapper {
|
||||
width: 100vw;
|
||||
font-family: 'Helvetica';
|
||||
font-size: 14px;
|
||||
border: 1px solid #CCC;
|
||||
height: 100vh;
|
||||
*, *:after, *:before { margin:0; padding:0; }
|
||||
.wrapper{
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
padding: 40px;
|
||||
|
||||
}
|
||||
.StepProgress {
|
||||
position: relative;
|
||||
padding-left: 45px;
|
||||
list-style: none;
|
||||
.stepProgressBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.StepProgress::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 15px;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
border-left: 2px solid #CCC;
|
||||
li{
|
||||
list-style-type: none;
|
||||
}
|
||||
.StepProgress-item {
|
||||
position: relative;
|
||||
counter-increment: list;
|
||||
.node {
|
||||
border: 1px solid #28a745;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 100%;
|
||||
color: #28a745;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: background-color 500ms;
|
||||
line-height:20px;
|
||||
}
|
||||
.StepProgress-item:not(:last-child) {
|
||||
padding-bottom: 20px;
|
||||
.node.completed {
|
||||
content: "";
|
||||
color: white;
|
||||
background-color: #28a745;
|
||||
}
|
||||
.StepProgress-item::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
}
|
||||
.StepProgress-item::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -37px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid #CCC;
|
||||
border-radius: 50%;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.StepProgress-item.is-done::before {
|
||||
border-left: 5px solid green;
|
||||
}
|
||||
.StepProgress-item.is-done::after {
|
||||
content: "✔";
|
||||
font-size: 10px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
border: 10px solid green;
|
||||
background-color: green;
|
||||
}
|
||||
.StepProgress-item.current::before {
|
||||
border-left: 2px solid green;
|
||||
}
|
||||
.StepProgress-item.current::after {
|
||||
content: counter(list);
|
||||
padding-top: 1px;
|
||||
width: 19px;
|
||||
height: 18px;
|
||||
top: -4px;
|
||||
left: -40px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: green;
|
||||
border: 2px solid green;
|
||||
background-color: white;
|
||||
}
|
||||
.StepProgress strong {
|
||||
display: block;
|
||||
|
||||
.node.completed::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 54px;
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.divider.completed::after{
|
||||
list-style-type: none;
|
||||
background-color: grey;
|
||||
position: relative;
|
||||
height: 80px;
|
||||
width: 2px;
|
||||
margin-left: 134px;
|
||||
transition: all 800ms ease;
|
||||
}
|
||||
Loading…
Reference in New Issue