MieuxVoter
/
mvfront-react
mirror of https://github.com/MieuxVoter/mvfront-react
4
1
Fork 0
Code Issues Releases Wiki Polls Activity

reformat code

Browse Source
pull/73/head
Pierre-Louis Guhur 4 years ago committed by guhur
parent 75d1c383f5
commit 85b03f3fc0
23 changed files with 2057 additions and 1549 deletions
Show Stats Download Patch File Download Diff File

1
src/App.css
Unescape View File

@ -1 +0,0 @@

18
src/App.jsx
Unescape View File

@ -1,5 +1,5 @@
import React from 'react'; import React from "react";
import { BrowserRouter as Router} from "react-router-dom"; import { BrowserRouter as Router } from "react-router-dom";
import Routes from "./Routes"; import Routes from "./Routes";
import Header from "./components/layouts/Header"; import Header from "./components/layouts/Header";
@ -7,13 +7,13 @@ import Footer from "./components/layouts/Footer";
function App() { function App() {
return ( return (
<Router> <Router>
<div> <div>
<Header /> <Header />
<Routes /> <Routes />
<Footer /> <Footer />
</div> </div>
</Router> </Router>
); );
} }

148
src/App.test.jsx
Unescape View File

@ -1,11 +1,11 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom'; import ReactDOM from "react-dom";
import {MemoryRouter} from 'react-router-dom'; import { MemoryRouter } from "react-router-dom";
import Routes from './Routes'; import Routes from "./Routes";
import App from './App'; import App from "./App";
import Adapter from 'enzyme-adapter-react-16'; import Adapter from "enzyme-adapter-react-16";
import {mount, configure} from 'enzyme'; import { mount, configure } from "enzyme";
import Home from "./components/views/Home.js"; import Home from "./components/views/Home.js";
import CreateElection from "./components/views/CreateElection.js"; import CreateElection from "./components/views/CreateElection.js";
@ -13,72 +13,76 @@ import Result from "./components/views/Result.js";
import Vote from "./components/views/Vote.js"; import Vote from "./components/views/Vote.js";
import UnknownView from "./components/views/UnknownView"; import UnknownView from "./components/views/UnknownView";
configure({adapter: new Adapter()}); configure({ adapter: new Adapter() });
it("renders without crashing", () => {
it('renders without crashing', () => { const div = document.createElement("div");
const div = document.createElement('div'); ReactDOM.render(<App />, div);
ReactDOM.render(<App/>, div); ReactDOM.unmountComponentAtNode(div);
ReactDOM.unmountComponentAtNode(div);
}); });
describe("open good View component for each route", () => {
describe('open good View component for each route', () => { it("should show Home view component for `/`", () => {
const wrapper = mount(
it('should show Home view component for `/`', () => { <MemoryRouter initialEntries={["/"]}>
const wrapper = mount(<MemoryRouter initialEntries={['/']}> <Routes />
<Routes/> </MemoryRouter>
</MemoryRouter> );
); expect(wrapper.find(Home)).toHaveLength(1);
expect(wrapper.find(Home)).toHaveLength(1); expect(wrapper.find(UnknownView)).toHaveLength(0);
expect(wrapper.find(UnknownView)).toHaveLength(0); });
});
it("should show CreateElection view component for `/create-election`", () => {
const wrapper = mount(
it('should show CreateElection view component for `/create-election`', () => { <MemoryRouter initialEntries={["/create-election"]}>
const wrapper = mount(<MemoryRouter initialEntries={['/create-election']}> <Routes />
<Routes/> </MemoryRouter>
</MemoryRouter> );
); expect(wrapper.find(CreateElection)).toHaveLength(1);
expect(wrapper.find(CreateElection)).toHaveLength(1); expect(wrapper.find(UnknownView)).toHaveLength(0);
expect(wrapper.find(UnknownView)).toHaveLength(0); });
});
it("should show CreateElection view component with title for `/create-election/?title=test%20with%20title`", () => {
it('should show CreateElection view component with title for `/create-election/?title=test%20with%20title`', () => { const wrapper = mount(
const wrapper = mount(<MemoryRouter initialEntries={['/create-election/?title=test%20with%20title']}> <MemoryRouter
<Routes/> initialEntries={["/create-election/?title=test%20with%20title"]}
</MemoryRouter> >
); <Routes />
expect(wrapper.find(CreateElection)).toHaveLength(1); </MemoryRouter>
expect(wrapper.find('input[name="title"]').props().defaultValue).toBe("test with title"); );
expect(wrapper.find(UnknownView)).toHaveLength(0); expect(wrapper.find(CreateElection)).toHaveLength(1);
}); expect(wrapper.find('input[name="title"]').props().defaultValue).toBe(
"test with title"
it('should show Vote view component for `/vote`', () => { );
const wrapper = mount(<MemoryRouter initialEntries={['/vote']}> expect(wrapper.find(UnknownView)).toHaveLength(0);
<Routes/> });
</MemoryRouter>
); it("should show Vote view component for `/vote`", () => {
expect(wrapper.find(Vote)).toHaveLength(1); const wrapper = mount(
expect(wrapper.find(UnknownView)).toHaveLength(0); <MemoryRouter initialEntries={["/vote"]}>
}); <Routes />
</MemoryRouter>
it('should show Result view component for `/result`', () => { );
const wrapper = mount(<MemoryRouter initialEntries={['/result']}> expect(wrapper.find(Vote)).toHaveLength(1);
<Routes/> expect(wrapper.find(UnknownView)).toHaveLength(0);
</MemoryRouter> });
);
expect(wrapper.find(Result)).toHaveLength(1); it("should show Result view component for `/result`", () => {
expect(wrapper.find(UnknownView)).toHaveLength(0); const wrapper = mount(
}); <MemoryRouter initialEntries={["/result"]}>
<Routes />
</MemoryRouter>
it('should show UnknownView view component for `/aaabbbcccddd`', () => { );
const wrapper = mount(<MemoryRouter initialEntries={['/aaabbbcccddd']} initialIndex={0}> expect(wrapper.find(Result)).toHaveLength(1);
<Routes/> expect(wrapper.find(UnknownView)).toHaveLength(0);
</MemoryRouter> });
);
expect(wrapper.find(UnknownView)).toHaveLength(1); it("should show UnknownView view component for `/aaabbbcccddd`", () => {
}); const wrapper = mount(
<MemoryRouter initialEntries={["/aaabbbcccddd"]} initialIndex={0}>
<Routes />
</MemoryRouter>
);
expect(wrapper.find(UnknownView)).toHaveLength(1);
});
}); });

29
src/Routes.jsx
Unescape View File

@ -1,5 +1,5 @@
import React from 'react'; import React from "react";
import {Switch, Route } from "react-router-dom"; import { Switch, Route } from "react-router-dom";
import Home from "./components/views/Home"; import Home from "./components/views/Home";
import CreateElection from "./components/views/CreateElection"; import CreateElection from "./components/views/CreateElection";
@ -11,18 +11,19 @@ import CreateSuccess from "./components/views/CreateSuccess";
import VoteSuccess from "./components/views/VoteSuccess"; import VoteSuccess from "./components/views/VoteSuccess";
function Routes() { function Routes() {
return (<main className="d-flex flex-column justify-content-center" > return (
<Switch> <main className="d-flex flex-column justify-content-center">
<Route exact path="/" component={Home} /> <Switch>
<Route path="/create-election" component={CreateElection} /> <Route exact path="/" component={Home} />
<Route path="/vote/:handle" component={Vote} /> <Route path="/create-election" component={CreateElection} />
<Route path="/result/:handle" component={Result} /> <Route path="/vote/:handle" component={Vote} />
<Route path="/create-success/:handle" component={CreateSuccess} /> <Route path="/result/:handle" component={Result} />
<Route path="/vote-success/:handle" component={VoteSuccess} /> <Route path="/create-success/:handle" component={CreateSuccess} />
<Route path="/unknown-election/:handle" component={UnknownElection} /> <Route path="/vote-success/:handle" component={VoteSuccess} />
<Route component={UnknownView} /> <Route path="/unknown-election/:handle" component={UnknownElection} />
</Switch> <Route component={UnknownView} />
</main> </Switch>
</main>
); );
} }

18
src/Util.jsx
Unescape View File

@ -1,5 +1,13 @@
const colors = ["#015411", "#019812", "#6bca24", "#ffb200", "#ff5d00", "#b20616", "#6f0214"]; const colors = [
export const grades = process.env.REACT_APP_GRADES.split(', ').map( "#015411",
(e, i) => ({label: e, color:colors[i]})); "#019812",
"#6bca24",
"#ffb200",
"#ff5d00",
"#b20616",
"#6f0214"
];
export const grades = process.env.REACT_APP_GRADES.split(", ").map((e, i) => ({
label: e,
color: colors[i]
}));

104
src/components/form/ButtonWithConfirm.jsx
Unescape View File

@ -1,55 +1,61 @@
import React, {Component} from "react"; import React, { Component } from "react";
import ModalConfirm from "./ModalConfirm"; import ModalConfirm from "./ModalConfirm";
class ButtonWithConfirm extends Component { class ButtonWithConfirm extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this._modalConfirm=React.createRef(); this._modalConfirm = React.createRef();
this.state={ this.state = {
focused:false focused: false
}
}
getComponent= (key) => {
return this.props.children.filter( (comp) => {
return comp.key === key;
});
}; };
}
render() {
const classNames=this.props.className.split(" "); getComponent = key => {
return this.props.children.filter(comp => {
let classNameForDiv=""; return comp.key === key;
let classNameForButton=""; });
classNames.forEach(function(className){ };
if(className==="input-group-prepend" || className==="input-group-append" ){
classNameForDiv+=" "+className; render() {
}else{ const classNames = this.props.className.split(" ");
classNameForButton+=" "+className;
} let classNameForDiv = "";
}); let classNameForButton = "";
classNames.forEach(function(className) {
if (
className === "input-group-prepend" ||
return ( className === "input-group-append"
<div className={classNameForDiv}> ) {
<button classNameForDiv += " " + className;
type="button" } else {
className={classNameForButton} classNameForButton += " " + className;
onClick={() => { this._modalConfirm.current.toggle() }} }
tabIndex={this.props.tabIndex} });
>{this.getComponent("button")}
</button> return (
<ModalConfirm className={this.props.modalClassName} ref={this._modalConfirm}> <div className={classNameForDiv}>
<div key="title">{this.getComponent("modal-title")}</div> <button
<div key="body">{this.getComponent("modal-body")}</div> type="button"
<div key="confirm">{this.getComponent("modal-confirm")}</div> className={classNameForButton}
<div key="cancel">{this.getComponent("modal-cancel")}</div> onClick={() => {
</ModalConfirm> this._modalConfirm.current.toggle();
</div> }}
); tabIndex={this.props.tabIndex}
} >
{this.getComponent("button")}
</button>
<ModalConfirm
className={this.props.modalClassName}
ref={this._modalConfirm}
>
<div key="title">{this.getComponent("modal-title")}</div>
<div key="body">{this.getComponent("modal-body")}</div>
<div key="confirm">{this.getComponent("modal-confirm")}</div>
<div key="cancel">{this.getComponent("modal-cancel")}</div>
</ModalConfirm>
</div>
);
}
} }
export default ButtonWithConfirm; export default ButtonWithConfirm;

105
src/components/form/HelpButton.jsx
Unescape View File

@ -1,45 +1,76 @@
import React, {Component} from "react"; import React, { Component } from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'; import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
class HelpButton extends Component { class HelpButton extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
tooltipOpen: false
};
}
showTooltip = () => { this.state = {
console.log("show"); tooltipOpen: false
this.setState({
tooltipOpen: true
});
}; };
}
hideTooltip = () => { showTooltip = () => {
console.log("hide"); console.log("show");
this.setState({ this.setState({
tooltipOpen: false tooltipOpen: true
}); });
}; };
render() { hideTooltip = () => {
return ( console.log("hide");
<span> this.setState({
<span> tooltipOpen: false
{this.state.tooltipOpen?<span style={{position:"absolute", zIndex:10, fontSize:"12px", color: "#000",backgroundColor:"#fff",display:"inline-block",borderRadius:"0.25rem",boxShadow:"-5px 0 5px rgba(0,0,0,0.5)",maxWidth:"200px",padding:"10px",marginLeft:"-215px", marginTop:"-25px"}}> });
<span style={{ position:"absolute", width: 0,height: 0, borderTop: "10px solid transparent", borderBottom: "10px solid transparent", borderLeft: "10px solid #fff", marginLeft:"190px", marginTop:"15px"}}></span> };
{this.props.children}
</span>:<span />}
</span>
<FontAwesomeIcon icon={faQuestionCircle} onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip}/>
</span>
); render() {
} return (
<span>
<span>
{this.state.tooltipOpen ? (
<span
style={{
position: "absolute",
zIndex: 10,
fontSize: "12px",
color: "#000",
backgroundColor: "#fff",
display: "inline-block",
borderRadius: "0.25rem",
boxShadow: "-5px 0 5px rgba(0,0,0,0.5)",
maxWidth: "200px",
padding: "10px",
marginLeft: "-215px",
marginTop: "-25px"
}}
>
<span
style={{
position: "absolute",
width: 0,
height: 0,
borderTop: "10px solid transparent",
borderBottom: "10px solid transparent",
borderLeft: "10px solid #fff",
marginLeft: "190px",
marginTop: "15px"
}}
></span>
{this.props.children}
</span>
) : (
<span />
)}
</span>
<FontAwesomeIcon
icon={faQuestionCircle}
onMouseOver={this.showTooltip}
onMouseOut={this.hideTooltip}
/>
</span>
);
}
} }
export default HelpButton; export default HelpButton;

78
src/components/form/ModalConfirm.jsx
Unescape View File

@ -1,40 +1,52 @@
import React, {Component} from "react"; import React, { Component } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
class ModalConfirm extends Component { class ModalConfirm extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
modal: false modal: false
};
}
toggle = () => {
this.setState({
modal: !this.state.modal
});
}; };
}
getComponent= (key) => { toggle = () => {
return this.props.children.filter( (comp) => { this.setState({
return comp.key === key; modal: !this.state.modal
}); });
}; };
getComponent = key => {
return this.props.children.filter(comp => {
return comp.key === key;
});
};
render() { render() {
return ( return (
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className+" modal-dialog-centered"} > <Modal
<ModalHeader toggle={this.toggle}>{this.getComponent("title")}</ModalHeader> isOpen={this.state.modal}
<ModalBody> toggle={this.toggle}
{this.getComponent("body")} className={this.props.className + " modal-dialog-centered"}
</ModalBody> >
<ModalFooter> <ModalHeader toggle={this.toggle}>
<Button color="primary-outline" className="text-primary border-primary" onClick={this.toggle}>{this.getComponent("cancel")}</Button> {this.getComponent("title")}
<Button color="primary" onClick={this.toggle}>{this.getComponent("confirm")}</Button> </ModalHeader>
</ModalFooter> <ModalBody>{this.getComponent("body")}</ModalBody>
</Modal> <ModalFooter>
); <Button
} color="primary-outline"
className="text-primary border-primary"
onClick={this.toggle}
>
{this.getComponent("cancel")}
</Button>
<Button color="primary" onClick={this.toggle}>
{this.getComponent("confirm")}
</Button>
</ModalFooter>
</Modal>
);
}
} }
export default ModalConfirm; export default ModalConfirm;

42
src/components/layouts/Footer.jsx
Unescape View File

@ -1,27 +1,23 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
class Footer extends Component { class Footer extends Component {
constructor(props) {
super(props);
this.state = {};
}
constructor(props) { render() {
super(props); return (
this.state = { <footer className="text-center">
} <Link to="/">Accueil</Link>
} <span className="m-2">-</span>
<a href="https://github.com/MieuxVoter">Code source</a>
render(){ <span className="m-2">-</span>
return( <a href="https://mieuxvoter.fr/">Qui sommes nous ?</a>
<footer className="text-center"> <div className="mt-2">MieuxVoter &copy;</div>
<Link to="/">Accueil</Link> </footer>
<span className="m-2">-</span> );
<a href="https://github.com/MieuxVoter">Code source</a> }
<span className="m-2">-</span>
<a href="https://mieuxvoter.fr/">Qui sommes nous ?</a>
<div className="mt-2">
MieuxVoter &copy;
</div>
</footer>
)
}
} }
export default Footer; export default Footer;

110
src/components/layouts/Header.jsx
Unescape View File

@ -1,64 +1,60 @@
import React, {Component} from "react"; import React, { Component } from "react";
import { import { Collapse, Navbar, NavbarToggler, Nav, NavItem } from "reactstrap";
Collapse, import { Link } from "react-router-dom";
Navbar,
NavbarToggler,
Nav,
NavItem
} from 'reactstrap'
import {Link} from "react-router-dom";
import logo from '../../logos/logo-color.svg'; import logo from "../../logos/logo-color.svg";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faRocket} from "@fortawesome/free-solid-svg-icons"; import { faRocket } from "@fortawesome/free-solid-svg-icons";
class Header extends Component { class Header extends Component {
constructor(props) {
super(props);
constructor(props) { this.toggle = this.toggle.bind(this);
super(props); this.state = {
isOpen: false
};
}
this.toggle = this.toggle.bind(this); toggle() {
this.state = { this.setState({
isOpen: false isOpen: !this.state.isOpen
}; });
} }
toggle() { render() {
this.setState({ return (
isOpen: !this.state.isOpen <header>
}); <Navbar color="light" light expand="md">
} <Link to="/" className="navbar-brand">
<div className="d-flex flex-row">
render(){ <div className="align-self-center">
return ( <img src={logo} alt="logo" height="32" />
<header> </div>
<Navbar color="light" light expand="md"> <div className="align-self-center ml-2">
<Link to="/" className="navbar-brand"> <div className="logo-text">
<div className="d-flex flex-row"> <h1>
<div className="align-self-center"> Plateforme de vote
<img src={logo} alt="logo" height="32"/> <small>Jugement Majoritaire</small>
</div> </h1>
<div className="align-self-center ml-2"> </div>
<div className="logo-text"> </div>
<h1>Plateforme de vote </div>
<small>Jugement Majoritaire</small> </Link>
</h1> <NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
</div> <Nav className="ml-auto" navbar>
</div> <NavItem>
</div> <Link className="text-primary nav-link" to="/create-election/">
</Link> <FontAwesomeIcon icon={faRocket} className="mr-2" /> Démarrer
<NavbarToggler onClick={this.toggle} /> un vote
<Collapse isOpen={this.state.isOpen} navbar> </Link>
<Nav className="ml-auto" navbar> </NavItem>
<NavItem> </Nav>
<Link className="text-primary nav-link" to="/create-election/"><FontAwesomeIcon icon={faRocket} className="mr-2"/> Démarrer un vote</Link> </Collapse>
</NavItem> </Navbar>
</Nav> </header>
</Collapse> );
</Navbar> }
</header>
);
}
} }
export default Header; export default Header;

1102
src/components/views/CreateElection.jsx
View File

File diff suppressed because it is too large Load Diff

219
src/components/views/CreateSuccess.js
Unescape View File

@ -1,97 +1,134 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {Button, Col, Container, Row} from "reactstrap"; import { Button, Col, Container, Row } from "reactstrap";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
import { faCopy, faUsers } from '@fortawesome/free-solid-svg-icons'; import { faCopy, faUsers } from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import logoLine from "../../logos/logo-line-white.svg"; import logoLine from "../../logos/logo-line-white.svg";
class UnknownView extends Component { class UnknownView extends Component {
constructor(props) {
constructor(props) { super(props);
super(props); const electionSlug = this.props.match.params.handle;
const electionSlug = this.props.match.params.handle; this.state = {
this.state = { urlOfVote:
urlOfVote: "https://" + window.location.hostname + "/vote/" + electionSlug, "https://" + window.location.hostname + "/vote/" + electionSlug,
urlOfResult: "https://" + window.location.hostname + "/result/" + electionSlug urlOfResult:
}; "https://" + window.location.hostname + "/result/" + electionSlug
this.urlVoteField = React.createRef();
this.urlResultField = React.createRef();
}
handleClickOnField=(event)=>{
event.target.focus();
event.target.select();
};
handleClickOnCopyVote=(event)=>{
const input = this.urlVoteField.current;
input.focus();
input.select();
document.execCommand("copy");
}; };
this.urlVoteField = React.createRef();
handleClickOnCopyResult=(event)=>{ this.urlResultField = React.createRef();
const input = this.urlResultField.current; }
input.focus();
input.select(); handleClickOnField = event => {
document.execCommand("copy"); event.target.focus();
}; event.target.select();
};
render(){
return( handleClickOnCopyVote = event => {
<Container> const input = this.urlVoteField.current;
<Row> input.focus();
<Link to="/" className="d-block ml-auto mr-auto mb-4"><img src={logoLine} alt="logo" height="128" /></Link> input.select();
</Row> document.execCommand("copy");
<Row className="mt-4"> };
<Col className="text-center offset-lg-3" lg="6"><h2>Vote créé avec succès !</h2>
<p className="mt-4 mb-1">Vous pouvez maintenant partager le lien du vote aux participants :</p> handleClickOnCopyResult = event => {
const input = this.urlResultField.current;
input.focus();
<div className="input-group "> input.select();
<input type="text" className="form-control" ref={this.urlVoteField} document.execCommand("copy");
value={this.state.urlOfVote} readOnly onClick={this.handleClickOnField} /> };
<div className="input-group-append"> render() {
<Button className="btn btn-outline-light" onClick={this.handleClickOnCopyVote} return (
type="button"> <Container>
<FontAwesomeIcon icon={faCopy} className="mr-2"/>Copier</Button> <Row>
</div> <Link to="/" className="d-block ml-auto mr-auto mb-4">
<img src={logoLine} alt="logo" height="128" />
</div> </Link>
</Row>
<p className="mt-4 mb-1">Voici le lien vers les résultats du vote en temps réel :</p> <Row className="mt-4">
<div className="input-group "> <Col className="text-center offset-lg-3" lg="6">
<input type="text" className="form-control" ref={this.urlResultField} <h2>Vote créé avec succès !</h2>
value={this.state.urlOfResult} readOnly onClick={this.handleClickOnField} /> <p className="mt-4 mb-1">
Vous pouvez maintenant partager le lien du vote aux participants :
<div className="input-group-append"> </p>
<Button className="btn btn-outline-light" onClick={this.handleClickOnCopyResult}
type="button"> <div className="input-group ">
<FontAwesomeIcon icon={faCopy} className="mr-2"/>Copier</Button> <input
</div> type="text"
className="form-control"
</div> ref={this.urlVoteField}
value={this.state.urlOfVote}
readOnly
</Col> onClick={this.handleClickOnField}
</Row> />
<Row className="mt-4 mb-4" >
<Col > <div className="input-group-append">
<div className=" bg-warning text-white p-2 "><p className="m-0 p-0 text-center">Conservez ces liens précieusement !</p> <Button
<p className="small m-2 p-0"><b>ATTENTION</b> : Vous ne les retrouverez pas ailleurs et nous ne serons pas capable de vous les communiquer. Vous pouvez par exemple les enregistrer dans les favoris de votre className="btn btn-outline-light"
navigateur.</p></div> onClick={this.handleClickOnCopyVote}
</Col> type="button"
</Row> >
<FontAwesomeIcon icon={faCopy} className="mr-2" />
<Row className="mt-4 mb-4" > Copier
<Col className="text-center"> </Button>
<Link to={ "/vote/" + this.props.match.params.handle} className="btn btn-success"><FontAwesomeIcon icon={faUsers} className="mr-2"/>Participer maintenant !</Link> </div>
</Col> </div>
</Row>
</Container> <p className="mt-4 mb-1">
) Voici le lien vers les résultats du vote en temps réel :
} </p>
<div className="input-group ">
<input
type="text"
className="form-control"
ref={this.urlResultField}
value={this.state.urlOfResult}
readOnly
onClick={this.handleClickOnField}
/>
<div className="input-group-append">
<Button
className="btn btn-outline-light"
onClick={this.handleClickOnCopyResult}
type="button"
>
<FontAwesomeIcon icon={faCopy} className="mr-2" />
Copier
</Button>
</div>
</div>
</Col>
</Row>
<Row className="mt-4 mb-4">
<Col>
<div className=" bg-warning text-white p-2 ">
<p className="m-0 p-0 text-center">
Conservez ces liens précieusement !
</p>
<p className="small m-2 p-0">
<b>ATTENTION</b> : Vous ne les retrouverez pas ailleurs et nous
ne serons pas capable de vous les communiquer. Vous pouvez par
exemple les enregistrer dans les favoris de votre navigateur.
</p>
</div>
</Col>
</Row>
<Row className="mt-4 mb-4">
<Col className="text-center">
<Link
to={"/vote/" + this.props.match.params.handle}
className="btn btn-success"
>
<FontAwesomeIcon icon={faUsers} className="mr-2" />
Participer maintenant !
</Link>
</Col>
</Row>
</Container>
);
}
} }
export default UnknownView; export default UnknownView;

131
src/components/views/Home.jsx
Unescape View File

@ -1,59 +1,90 @@
import React, {Component} from "react"; import React, { Component } from "react";
import { Container, Row, Col,Button, Input } from 'reactstrap'; import { Container, Row, Col, Button, Input } from "reactstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRocket } from '@fortawesome/free-solid-svg-icons'; import { faRocket } from "@fortawesome/free-solid-svg-icons";
import { Redirect } from 'react-router-dom'; import { Redirect } from "react-router-dom";
import logoLine from "../../logos/logo-line-white.svg"; import logoLine from "../../logos/logo-line-white.svg";
class Home extends Component { class Home extends Component {
constructor(props) {
constructor(props) { super(props);
super(props); this.state = {
this.state = { title: null,
title:null, redirect: false
redirect:false,
};
this.focusInput= React.createRef();
}
handleSubmit = (event) => {
event.preventDefault();
this.setState({redirect: true});
}; };
this.focusInput = React.createRef();
}
handleChangeTitle= (event) => { handleSubmit = event => {
this.setState({title: event.target.value}); event.preventDefault();
}; this.setState({ redirect: true });
};
render(){ handleChangeTitle = event => {
const redirect = this.state.redirect; this.setState({ title: event.target.value });
};
if (redirect) { render() {
return <Redirect to={ '/create-election/?title='+encodeURIComponent(this.state.title)} />; const redirect = this.state.redirect;
}
return( if (redirect) {
<Container> return (
<form onSubmit={this.handleSubmit} autoComplete="off"> <Redirect
<Row> to={"/create-election/?title=" + encodeURIComponent(this.state.title)}
<img src={logoLine} alt="logo" height="128" className="d-block ml-auto mr-auto mb-4"/> />
</Row> );
<Row> }
<Col className="text-center"><h3>Simple et gratuit : organisez un vote à l'aide du Jugement Majoritaire.</h3></Col> return (
</Row> <Container>
<Row className="mt-2"> <form onSubmit={this.handleSubmit} autoComplete="off">
<Col xs="12" md="9" xl="6" className="offset-xl-2"> <Row>
<Input placeholder="Saisissez ici la question de votre vote" innerRef={this.focusInput} autoFocus required className="mt-2" name="title" value={this.state.title?this.state.title:""} onChange={this.handleChangeTitle} maxLength="250" /> <img
</Col> src={logoLine}
<Col xs="12" md="3" xl="2"> alt="logo"
<Button type="submit" className="btn btn-block btn-secondary mt-2" ><FontAwesomeIcon icon={faRocket} className="mr-2"/>Lancer</Button> height="128"
</Col> className="d-block ml-auto mr-auto mb-4"
</Row> />
<Row className="mt-4"> </Row>
<Col className="text-center"><p>Pas de publicité et pas de cookie publicitaire.</p></Col> <Row>
</Row> <Col className="text-center">
</form> <h3>
</Container> Simple et gratuit : organisez un vote à l'aide du Jugement
) Majoritaire.
}; </h3>
</Col>
</Row>
<Row className="mt-2">
<Col xs="12" md="9" xl="6" className="offset-xl-2">
<Input
placeholder="Saisissez ici la question de votre vote"
innerRef={this.focusInput}
autoFocus
required
className="mt-2"
name="title"
value={this.state.title ? this.state.title : ""}
onChange={this.handleChangeTitle}
maxLength="250"
/>
</Col>
<Col xs="12" md="3" xl="2">
<Button
type="submit"
className="btn btn-block btn-secondary mt-2"
>
<FontAwesomeIcon icon={faRocket} className="mr-2" />
Lancer
</Button>
</Col>
</Row>
<Row className="mt-4">
<Col className="text-center">
<p>Pas de publicité et pas de cookie publicitaire.</p>
</Col>
</Row>
</form>
</Container>
);
}
} }
export default Home; export default Home;

545
src/components/views/Result.jsx
Unescape View File

@ -1,243 +1,344 @@
import React, {Component} from "react"; import React, { Component } from "react";
import { Redirect } from 'react-router-dom'; import { Redirect } from "react-router-dom";
import { resolve } from 'url'; import { resolve } from "url";
import {Container, Row, Col, Collapse, Card, CardHeader, CardBody, Table} from "reactstrap"; import {
import { grades } from '../../Util'; Container,
Row,
Col,
Collapse,
Card,
CardHeader,
CardBody,
Table
} from "reactstrap";
import { grades } from "../../Util";
class Result extends Component { class Result extends Component {
constructor(props) {
super(props);
this.state = {
candidates: [],
title: null,
numGrades: 0,
colSizeCandidateLg: 4,
colSizeCandidateMd: 6,
colSizeCandidateXs: 12,
colSizeGradeLg: 1,
colSizeGradeMd: 1,
colSizeGradeXs: 1,
collapseGraphics: false,
collapseProfiles: false,
redirectLost: false,
electionGrades: grades
};
}
constructor(props) { handleErrors = response => {
super(props); if (!response.ok) {
this.state = { response.json().then(response => {
candidates: [], this.setState(state => ({
title: null, redirectLost: "/unknown-election/" + encodeURIComponent(response)
numGrades: 0, }));
colSizeCandidateLg: 4, });
colSizeCandidateMd: 6, throw Error(response);
colSizeCandidateXs: 12,
colSizeGradeLg: 1,
colSizeGradeMd: 1,
colSizeGradeXs: 1,
collapseGraphics: false,
collapseProfiles: false,
redirectLost: false,
electionGrades: grades
};
} }
return response;
};
handleErrors = (response) => { resultsToState = response => {
if (!response.ok) { const candidates = response.map(c => ({
response.json().then( response => { id: c.id,
this.setState(state => ({ label: c.name,
redirectLost: '/unknown-election/' + encodeURIComponent(response)})); profile: c.profile,
}) grade: c.grade,
throw Error(response); score: c.score
} }));
return response; this.setState(state => ({ candidates: candidates }));
} return response;
};
resultsToState = (response) => { detailsToState = response => {
const candidates = response.map(c => ({ const numGrades = response.num_grades;
id: c.id, label: c.name, profile: c.profile, grade:c.grade, score: c.score const colSizeGradeLg = Math.floor(
})); (12 - this.state.colSizeCandidateLg) / numGrades
this.setState(state => ({candidates: candidates})); );
return response; const colSizeGradeMd = Math.floor(
} (12 - this.state.colSizeCandidateMd) / numGrades
);
const colSizeGradeXs = Math.floor(
(12 - this.state.colSizeCandidateXs) / numGrades
);
this.setState(state => ({
title: response.title,
numGrades: numGrades,
colSizeGradeLg: colSizeGradeLg,
colSizeGradeMd: colSizeGradeMd,
colSizeGradeXs: colSizeGradeXs,
colSizeCandidateLg:
12 - colSizeGradeLg * numGrades > 0
? 12 - colSizeGradeLg * numGrades
: 12,
colSizeCandidateMd:
12 - colSizeGradeMd * numGrades > 0
? 12 - colSizeGradeMd * numGrades
: 12,
colSizeCandidateXs:
12 - colSizeGradeXs * numGrades > 0
? 12 - colSizeGradeXs * numGrades
: 12,
electionGrades: grades.slice(0, numGrades)
}));
return response;
};
detailsToState = (response) => { componentDidMount() {
const numGrades = response.num_grades; // FIXME we should better handling logs
const colSizeGradeLg = Math.floor((12 - this.state.colSizeCandidateLg) / numGrades);
const colSizeGradeMd = Math.floor((12 - this.state.colSizeCandidateMd) / numGrades); const electionSlug = this.props.match.params.handle;
const colSizeGradeXs = Math.floor((12 - this.state.colSizeCandidateXs) / numGrades);
this.setState(state => ({ // get details of the election
title: response.title, const detailsEndpoint = resolve(
numGrades: numGrades, process.env.REACT_APP_SERVER_URL,
colSizeGradeLg: colSizeGradeLg, "election/get/".concat(electionSlug)
colSizeGradeMd: colSizeGradeMd, );
colSizeGradeXs: colSizeGradeXs,
colSizeCandidateLg: ((12 - colSizeGradeLg * numGrades) > 0) ? (12 - colSizeGradeLg * numGrades) : 12,
colSizeCandidateMd: ((12 - colSizeGradeMd * numGrades) > 0) ? (12 - colSizeGradeMd * numGrades) : 12,
colSizeCandidateXs: ((12 - colSizeGradeXs * numGrades) > 0) ? (12 - colSizeGradeXs * numGrades) : 12,
electionGrades: grades.slice(0, numGrades)
}));
return response;
}
componentDidMount() { fetch(detailsEndpoint)
// FIXME we should better handling logs .then(this.handleErrors)
.then(response => response.json())
.then(this.detailsToState)
.catch(error => console.log(error));
const electionSlug = this.props.match.params.handle; // get results of the election
const resultsEndpoint = resolve(
process.env.REACT_APP_SERVER_URL,
"election/results/".concat(electionSlug)
);
// get details of the election fetch(resultsEndpoint)
const detailsEndpoint = resolve(process.env.REACT_APP_SERVER_URL, .then(this.handleErrors)
'election/get/'.concat(electionSlug)); .then(response => response.json())
.then(this.resultsToState)
.catch(error => console.log(error));
}
fetch(detailsEndpoint) toggleGraphics = () => {
.then(this.handleErrors) this.setState(state => ({ collapseGraphics: !state.collapseGraphics }));
.then(response => response.json()) };
.then(this.detailsToState)
.catch(error => console.log(error));
// get results of the election toggleProfiles = () => {
const resultsEndpoint = resolve(process.env.REACT_APP_SERVER_URL, this.setState(state => ({ collapseProfiles: !state.collapseProfiles }));
'election/results/'.concat(electionSlug)); };
fetch(resultsEndpoint) render() {
.then(this.handleErrors) const { redirectLost, candidates, electionGrades } = this.state;
.then(response => response.json())
.then(this.resultsToState)
.catch(error => console.log(error));
if (redirectLost) {
return <Redirect to={redirectLost} />;
} }
toggleGraphics = () => { return (
this.setState(state => ({collapseGraphics: !state.collapseGraphics})); <Container>
}; <Row>
<Col xs="12">
<h1>{this.state.title}</h1>
</Col>
</Row>
toggleProfiles = () => { <Row className="mt-5">
this.setState(state => ({collapseProfiles: !state.collapseProfiles})); <Col>
}; <h1>Résultat du vote :</h1>
<ol>
{candidates.map((candidate, i) => {
return (
<li key={i} className="mt-2">
{candidate.label}
<span className="badge badge-dark mr-2 mt-2">
{candidate.score}%
</span>
<span
className="badge badge-light mr-2 mt-2"
style={{
backgroundColor: electionGrades[candidate.grade].color,
color: "#fff"
}}
>
{grades[candidate.grade].label}
</span>
</li>
);
})}
</ol>
</Col>
</Row>
render() { <Row className="mt-5">
<Col>
const { redirectLost, <Card className="bg-light text-primary">
candidates, <CardHeader className="pointer" onClick={this.toggleGraphics}>
electionGrades <h4
} = this.state; className={
"m-0 panel-title " +
if (redirectLost) { (this.state.collapseGraphics ? "collapsed" : "")
return (<Redirect to={redirectLost}/>) }
} >
Graphique
return ( </h4>
<Container> </CardHeader>
<Row> <Collapse isOpen={this.state.collapseGraphics}>
<Col xs="12"><h1>{this.state.title}</h1></Col> <CardBody className="pt-5">
</Row> <div>
<div
<Row className="mt-5"> className="median"
<Col><h1>Résultat du vote :</h1> style={{ height: candidates.length * 28 + 30 }}
<ol>{candidates.map((candidate, i) => { />
return (<li key={i} className="mt-2">{candidate.label}<span <table style={{ width: "100%" }}>
className="badge badge-dark mr-2 mt-2">{candidate.score}%</span><span <tbody>
className="badge badge-light mr-2 mt-2" style={{ {candidates.map((candidate, i) => {
backgroundColor: electionGrades[candidate.grade].color, return (
color: "#fff" <tr key={i}>
}}>{grades[candidate.grade].label}</span></li>); <td style={{ width: "30px" }}>{i + 1}</td>
})}</ol> {/*candidate.label*/}
</Col> <td>
</Row> <table style={{ width: "100%" }}>
<tbody>
<Row className="mt-5"> <tr>
<Col> {candidate.profile.map((value, i) => {
<Card className="bg-light text-primary"> if (value > 0) {
<CardHeader className="pointer" onClick={this.toggleGraphics}> let percent = value + "%";
<h4 className={"m-0 panel-title " + (this.state.collapseGraphics ? "collapsed" : "")}>Graphique</h4> if (i === 0) {
</CardHeader> percent = "auto";
<Collapse isOpen={this.state.collapseGraphics}> }
<CardBody className="pt-5"> return (
<div> <td
<div className="median" key={i}
style={{height: (candidates.length * 28) + 30}}/> style={{
<table style={{width: "100%"}}><tbody> width: percent,
{candidates.map((candidate, i) => { backgroundColor: this.state
return (<tr key={i}> .electionGrades[i].color
<td style={{width: "30px"}}>{i + 1}</td> }}
{/*candidate.label*/} >
<td> &nbsp;
<table style={{width: "100%"}}> </td>
<tbody> );
<tr> } else {
{candidate.profile.map((value, i) => { return null;
if (value > 0) { }
let percent = value + "%"; })}
if (i === 0) { </tr>
percent = "auto"; </tbody>
} </table>
return (<td key={i} style={{ </td>
width: percent, </tr>
backgroundColor: this.state.electionGrades[i].color );
}}>&nbsp;</td>); })}
}else{ </tbody>
return null </table>
} </div>
<div className="mt-4">
})}</tr> <small>
</tbody> {candidates.map((candidate, i) => {
</table> return (
</td> <span key={i}>
</tr>) {i > 0 ? ", " : ""}
})}</tbody></table> <b>{i + 1}</b>: {candidate.label}
</span>
</div> );
<div className="mt-4"> })}
<small> </small>
{candidates.map((candidate, i) => { </div>
return ( <div className="mt-2">
<span key={i}>{(i > 0) ? ", " : ""}<b>{i + 1}</b>: {candidate.label}</span>); <small>
})} {electionGrades.map((grade, i) => {
</small> return (
</div> <span
<div className="mt-2"> key={i}
<small> className="badge badge-light mr-2 mt-2"
{electionGrades.map((grade, i) => { style={{
return ( backgroundColor: grade.color,
<span key={i} className="badge badge-light mr-2 mt-2" style={{ color: "#fff"
backgroundColor: grade.color, }}
color: "#fff" >
}}>{grade.label}</span> {grade.label}
)})} </span>
</small> );
</div> })}
</CardBody> </small>
</Collapse> </div>
</Card> </CardBody>
</Col> </Collapse>
</Row> </Card>
<Row className="mt-3"> </Col>
<Col> </Row>
<Card className="bg-light text-primary"> <Row className="mt-3">
<CardHeader className="pointer" onClick={this.toggleProfiles}> <Col>
<h4 className={"m-0 panel-title " + (this.state.collapseProfiles ? "collapsed" : "")}>Profils <Card className="bg-light text-primary">
de mérites</h4> <CardHeader className="pointer" onClick={this.toggleProfiles}>
</CardHeader> <h4
<Collapse isOpen={this.state.collapseProfiles}> className={
<CardBody> "m-0 panel-title " +
<div className="table-responsive"> (this.state.collapseProfiles ? "collapsed" : "")
<Table className="profiles"> }
<thead> >
<tr> Profils de mérites
<th>#</th> </h4>
{electionGrades.map((grade, i) => { </CardHeader>
return (<th key={i}><span className="badge badge-light" style={{ <Collapse isOpen={this.state.collapseProfiles}>
backgroundColor: grade.color, <CardBody>
color: "#fff" <div className="table-responsive">
}}>{grade.label} </span></th>); <Table className="profiles">
})}</tr> <thead>
</thead> <tr>
<tbody>{candidates.map((candidate, i) => { <th>#</th>
return (<tr key={i}> {electionGrades.map((grade, i) => {
<td>{i + 1}</td> return (
{/*candidate.label*/} <th key={i}>
{candidate.profile.map((value, i) => { <span
return (<td key={i}>{value}%</td>); className="badge badge-light"
})} style={{
</tr>) backgroundColor: grade.color,
})}</tbody> color: "#fff"
</Table> }}
</div> >
<small>{candidates.map((candidate, i) => { {grade.label}{" "}
return (<span </span>
key={i}>{(i > 0) ? ", " : ""}<b>{i + 1}</b>: {candidate.label}</span>); </th>
})}</small> );
</CardBody> })}
</Collapse> </tr>
</Card> </thead>
</Col> <tbody>
</Row> {candidates.map((candidate, i) => {
</Container> return (
) <tr key={i}>
} <td>{i + 1}</td>
{/*candidate.label*/}
{candidate.profile.map((value, i) => {
return <td key={i}>{value}%</td>;
})}
</tr>
);
})}
</tbody>
</Table>
</div>
<small>
{candidates.map((candidate, i) => {
return (
<span key={i}>
{i > 0 ? ", " : ""}
<b>{i + 1}</b>: {candidate.label}
</span>
);
})}
</small>
</CardBody>
</Collapse>
</Card>
</Col>
</Row>
</Container>
);
}
} }
export default Result; export default Result;

59
src/components/views/UnknownElection.js
Unescape View File

@ -1,34 +1,37 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {Col, Container, Row} from "reactstrap"; import { Col, Container, Row } from "reactstrap";
import logoLine from "../../logos/logo-line-white.svg"; import logoLine from "../../logos/logo-line-white.svg";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
class UnknownElection extends Component { class UnknownElection extends Component {
constructor(props) {
super(props);
this.state = {};
}
constructor(props) { render() {
super(props); return (
this.state = { <Container>
} <Row>
} <Link to="/" className="d-block ml-auto mr-auto mb-4">
<img src={logoLine} alt="logo" height="128" />
render(){ </Link>
return( </Row>
<Container> <Row className="mt-4">
<Row> <Col className="text-center">
<Link to="/" className="d-block ml-auto mr-auto mb-4"><img src={logoLine} alt="logo" height="128" /></Link> <h2>Oups ! Ce vote n'existe pas ou n'est plus disponible.</h2>
</Row> <p>N'hésitez pas à démarrer un nouveau vote</p>
<Row className="mt-4"> </Col>
<Col className="text-center"><h2>Oups ! Ce vote n'existe pas ou n'est plus disponible.</h2> </Row>
<p>N'hésitez pas à démarrer un nouveau vote</p></Col> <Row className="mt-4">
</Row> <Col className="text-center">
<Row className="mt-4" > <Link to="/" className="btn btn-secondary">
<Col className="text-center"> Revenir à l'accueil
<Link to="/" className="btn btn-secondary">Revenir à l'accueil</Link> </Link>
</Col> </Col>
</Row> </Row>
</Container> </Container>
) );
} }
} }
export default UnknownElection; export default UnknownElection;

57
src/components/views/UnknownView.jsx
Unescape View File

@ -1,33 +1,36 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {Col, Container, Row} from "reactstrap"; import { Col, Container, Row } from "reactstrap";
import logoLine from "../../logos/logo-line-white.svg"; import logoLine from "../../logos/logo-line-white.svg";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
class UnknownView extends Component { class UnknownView extends Component {
constructor(props) {
super(props);
this.state = {};
}
constructor(props) { render() {
super(props); return (
this.state = { <Container>
} <Row>
} <Link to="/" className="d-block ml-auto mr-auto mb-4">
<img src={logoLine} alt="logo" height="128" />
render(){ </Link>
return( </Row>
<Container> <Row className="mt-4">
<Row> <Col className="text-center">
<Link to="/" className="d-block ml-auto mr-auto mb-4"><img src={logoLine} alt="logo" height="128" /></Link> <h2>Oups ! Cette page n'existe pas</h2>
</Row> </Col>
<Row className="mt-4"> </Row>
<Col className="text-center"><h2>Oups ! Cette page n'existe pas</h2></Col> <Row className="mt-4">
</Row> <Col className="text-center">
<Row className="mt-4" > <Link to="/" className="btn btn-secondary">
<Col className="text-center"> Revenir à l'accueil
<Link to="/" className="btn btn-secondary">Revenir à l'accueil</Link> </Link>
</Col> </Col>
</Row> </Row>
</Container> </Container>
) );
} }
} }
export default UnknownView; export default UnknownView;

489
src/components/views/Vote.jsx
Unescape View File

@ -1,213 +1,318 @@
import React, {Component} from "react"; import React, { Component } from "react";
import { Redirect } from 'react-router-dom'; import { Redirect } from "react-router-dom";
import {Button, Col, Container, Row} from "reactstrap"; import { Button, Col, Container, Row } from "reactstrap";
import {toast, ToastContainer} from "react-toastify"; import { toast, ToastContainer } from "react-toastify";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faCheck} from "@fortawesome/free-solid-svg-icons"; import { faCheck } from "@fortawesome/free-solid-svg-icons";
import { resolve } from 'url'; import { resolve } from "url";
import { grades } from '../../Util'; import { grades } from "../../Util";
class Vote extends Component { class Vote extends Component {
constructor(props) {
super(props);
this.state = {
candidates: [],
title: null,
numGrades: 0,
ratedCandidates: [],
colSizeCandidateLg: 4,
colSizeCandidateMd: 6,
colSizeCandidateXs: 12,
colSizeGradeLg: 1,
colSizeGradeMd: 1,
colSizeGradeXs: 1,
redirectTo: null,
electionGrades: grades
};
}
constructor(props) { handleErrors = response => {
super(props); if (!response.ok) {
this.state = { response.json().then(response => {
candidates:[], console.log(response);
title:null, this.setState(state => ({
numGrades:0, redirectTo: "/unknown-election/" + encodeURIComponent(response)
ratedCandidates:[], }));
colSizeCandidateLg:4, });
colSizeCandidateMd:6, throw Error(response);
colSizeCandidateXs:12,
colSizeGradeLg:1,
colSizeGradeMd:1,
colSizeGradeXs:1,
redirectTo: null,
electionGrades: grades
};
} }
return response;
};
handleErrors = (response) => { detailsToState = response => {
if (!response.ok) { const numGrades = response.num_grades;
response.json().then( response => { const candidates = response.candidates.map((c, i) => ({
console.log(response); id: i,
this.setState(state => ({ label: c
redirectTo: '/unknown-election/' + encodeURIComponent(response)})); }));
}) //shuffle candidates
throw Error(response); let i, j, temp;
} for (i = candidates.length - 1; i > 0; i--) {
return response; j = Math.floor(Math.random() * (i + 1));
temp = candidates[i];
candidates[i] = candidates[j];
candidates[j] = temp;
} }
const colSizeGradeLg = Math.floor(
(12 - this.state.colSizeCandidateLg) / numGrades
);
const colSizeGradeMd = Math.floor(
(12 - this.state.colSizeCandidateMd) / numGrades
);
const colSizeGradeXs = Math.floor(
(12 - this.state.colSizeCandidateXs) / numGrades
);
detailsToState = (response) => { this.setState(state => ({
const numGrades = response.num_grades; title: response.title,
const candidates = response.candidates.map((c, i) => ({ candidates: candidates,
id: i, numGrades: numGrades,
label: c colSizeGradeLg: colSizeGradeLg,
})); colSizeGradeMd: colSizeGradeMd,
//shuffle candidates colSizeGradeXs: colSizeGradeXs,
let i, j, temp; colSizeCandidateLg:
for (i = candidates.length - 1; i > 0; i--) { 12 - colSizeGradeLg * numGrades > 0
j = Math.floor(Math.random() * (i + 1)); ? 12 - colSizeGradeLg * numGrades
temp = candidates[i]; : 12,
candidates[i] = candidates[j]; colSizeCandidateMd:
candidates[j] = temp; 12 - colSizeGradeMd * numGrades > 0
} ? 12 - colSizeGradeMd * numGrades
const colSizeGradeLg = Math.floor((12 - this.state.colSizeCandidateLg) / numGrades); : 12,
const colSizeGradeMd = Math.floor((12 - this.state.colSizeCandidateMd) / numGrades); colSizeCandidateXs:
const colSizeGradeXs = Math.floor((12 - this.state.colSizeCandidateXs) / numGrades); 12 - colSizeGradeXs * numGrades > 0
? 12 - colSizeGradeXs * numGrades
: 12,
electionGrades: grades.slice(0, numGrades)
}));
return response;
};
this.setState(state => ({ componentDidMount() {
title: response.title, // FIXME we should better handling logs
candidates: candidates,
numGrades: numGrades,
colSizeGradeLg: colSizeGradeLg,
colSizeGradeMd: colSizeGradeMd,
colSizeGradeXs: colSizeGradeXs,
colSizeCandidateLg: ((12 - colSizeGradeLg * numGrades) > 0) ?
(12 - colSizeGradeLg * numGrades) : 12,
colSizeCandidateMd: ((12 - colSizeGradeMd * numGrades) > 0) ?
(12 - colSizeGradeMd * numGrades) : 12,
colSizeCandidateXs: ((12 - colSizeGradeXs * numGrades) > 0) ?
(12 - colSizeGradeXs * numGrades) : 12,
electionGrades: grades.slice(0, numGrades)
}));
return response;
}
componentDidMount() { const electionSlug = this.props.match.params.handle;
// FIXME we should better handling logs const detailsEndpoint = resolve(
process.env.REACT_APP_SERVER_URL,
"election/get/".concat(electionSlug)
);
const electionSlug = this.props.match.params.handle; fetch(detailsEndpoint)
const detailsEndpoint = resolve(process.env.REACT_APP_SERVER_URL, .then(this.handleErrors)
'election/get/'.concat(electionSlug)); .then(response => response.json())
.then(this.detailsToState)
.catch(error => console.log(error));
}
fetch(detailsEndpoint) handleGradeClick = event => {
.then(this.handleErrors) let data = {
.then(response => response.json()) id: parseInt(event.currentTarget.getAttribute("data-id")),
.then(this.detailsToState) value: parseInt(event.currentTarget.value)
.catch(error => console.log(error)); };
} //remove candidate
let ratedCandidates = this.state.ratedCandidates.filter(
ratedCandidate => ratedCandidate.id !== data.id
);
ratedCandidates.push(data);
this.setState({ ratedCandidates: ratedCandidates });
};
handleSubmitWithoutAllRate = () => {
toast.error("Vous devez évaluer l'ensemble des propositions/candidats !", {
position: toast.POSITION.TOP_CENTER
});
};
handleGradeClick = (event) => { handleSubmit = event => {
let data={ event.preventDefault();
id:parseInt(event.currentTarget.getAttribute("data-id")),
value:parseInt(event.currentTarget.value)
};
//remove candidate
let ratedCandidates = this.state.ratedCandidates.filter(ratedCandidate => ratedCandidate.id !== data.id);
ratedCandidates.push(data);
this.setState({ratedCandidates:ratedCandidates});
}; const { ratedCandidates } = this.state;
const electionSlug = this.props.match.params.handle;
const endpoint = resolve(
process.env.REACT_APP_SERVER_URL,
"election/vote/"
);
handleSubmitWithoutAllRate = () => { const gradesById = {};
toast.error("Vous devez évaluer l'ensemble des propositions/candidats !", { ratedCandidates.forEach(c => {
position: toast.POSITION.TOP_CENTER gradesById[c.id] = c.value;
}); });
}; const gradesByCandidate = [];
Object.keys(gradesById)
.sort()
.forEach(id => {
gradesByCandidate.push(gradesById[id]);
});
handleSubmit = (event) => { fetch(endpoint, {
event.preventDefault(); method: "POST",
headers: { "Content-Type": "application/json" },
const { ratedCandidates } = this.state; body: JSON.stringify({
const electionSlug = this.props.match.params.handle; election: electionSlug,
const endpoint = resolve(process.env.REACT_APP_SERVER_URL, grades_by_candidate: gradesByCandidate
'election/vote/'); })
})
const gradesById = {}; .then(this.handleErrors)
ratedCandidates.forEach(c => { gradesById[c.id] = c.value; }); .then(result =>
const gradesByCandidate = []; this.setState({ redirectTo: "/vote-success/" + electionSlug })
Object.keys(gradesById) )
.sort() .catch(error => error);
.forEach(id => {gradesByCandidate.push(gradesById[id]);}); };
fetch(endpoint, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
election: electionSlug,
grades_by_candidate: gradesByCandidate,
})
})
.then(this.handleErrors)
.then(result => this.setState({redirectTo: '/vote-success/' + electionSlug}))
.catch(error => error);
};
render() {
const { redirectTo, candidates, electionGrades } = this.state;
render(){ if (redirectTo) {
return <Redirect to={redirectTo} />;
const { redirectTo,
candidates,
electionGrades
} = this.state;
if (redirectTo) {
return (<Redirect to={redirectTo}/>);
}
return(
<Container>
<ToastContainer/>
<form onSubmit={this.handleSubmit} autoComplete="off" >
<Row>
<Col ><h3>{ this.state.title }</h3></Col>
</Row>
<Row className="cardVote d-none d-lg-flex" >
<Col xs={this.state.colSizeCandidateXs} md={this.state.colSizeCandidateMd} lg={this.state.colSizeCandidateLg} ><h5 >&nbsp;</h5></Col>
{ electionGrades.map((grade,j) => {
return (j<this.state.numGrades)?<Col xs={this.state.colSizeGradeXs} md={this.state.colSizeGradeMd} lg={this.state.colSizeGradeLg} key={j} className="text-center p-0" style={{lineHeight:2}}><small className="nowrap bold badge" style={{backgroundColor:grade.color,color:"#fff"}}>{grade.label}</small></Col>:null;
})
}
</Row>
{
candidates.map((candidate,i) => {
return <Row key={i} className="cardVote">
<Col xs={this.state.colSizeCandidateXs} md={this.state.colSizeCandidateMd} lg={this.state.colSizeCandidateLg} >
<h5 className="m-0">{candidate.label}</h5><hr className="d-lg-none" /></Col>
{ this.state.electionGrades.map((grade,j) => {
return (j<this.state.numGrades)?<Col
xs={this.state.colSizeGradeXs} md={this.state.colSizeGradeMd} lg={this.state.colSizeGradeLg} key={j}
className="text-lg-center"
>
<label htmlFor={"candidateGrade"+i+"-"+j} className="check"
>
<small className="nowrap d-lg-none ml-2 bold badge"
style={
this.state.ratedCandidates.find(function(ratedCandidat){return JSON.stringify(ratedCandidat) === JSON.stringify({id:candidate.id,value:j})})?
{backgroundColor:grade.color,color:"#fff"}:{backgroundColor:'transparent',color:"#000"}
}
>{grade.label}</small>
<input type="radio" name={"candidate"+i} id={"candidateGrade"+i+"-"+j} data-index={i} data-id={candidate.id} value={j} onClick={this.handleGradeClick} defaultChecked={this.state.ratedCandidates.find(function(element) { return JSON.stringify(element) === JSON.stringify({id:candidate.id,value:j})})} />
<span className="checkmark" style={
this.state.ratedCandidates.find(function(ratedCandidat){return JSON.stringify(ratedCandidat) === JSON.stringify({id:candidate.id,value:j})})?
{backgroundColor:grade.color,color:"#fff"}:{backgroundColor:'transparent',color:"#000"}
}/>
</label></Col>:null
})
}
</Row>
})
}
<Row>
<Col className="text-center" >
{(this.state.ratedCandidates.length!==this.state.candidates.length)?<Button type="button" onClick={this.handleSubmitWithoutAllRate} className="btn btn-dark "><FontAwesomeIcon icon={faCheck} className="mr-2" />Valider</Button>:<Button type="submit" className="btn btn-success "><FontAwesomeIcon icon={faCheck} className="mr-2" />Valider</Button>}
</Col>
</Row>
</form>
</Container>
)
} }
return (
<Container>
<ToastContainer />
<form onSubmit={this.handleSubmit} autoComplete="off">
<Row>
<Col>
<h3>{this.state.title}</h3>
</Col>
</Row>
<Row className="cardVote d-none d-lg-flex">
<Col
xs={this.state.colSizeCandidateXs}
md={this.state.colSizeCandidateMd}
lg={this.state.colSizeCandidateLg}
>
<h5>&nbsp;</h5>
</Col>
{electionGrades.map((grade, j) => {
return j < this.state.numGrades ? (
<Col
xs={this.state.colSizeGradeXs}
md={this.state.colSizeGradeMd}
lg={this.state.colSizeGradeLg}
key={j}
className="text-center p-0"
style={{ lineHeight: 2 }}
>
<small
className="nowrap bold badge"
style={{ backgroundColor: grade.color, color: "#fff" }}
>
{grade.label}
</small>
</Col>
) : null;
})}
</Row>
{candidates.map((candidate, i) => {
return (
<Row key={i} className="cardVote">
<Col
xs={this.state.colSizeCandidateXs}
md={this.state.colSizeCandidateMd}
lg={this.state.colSizeCandidateLg}
>
<h5 className="m-0">{candidate.label}</h5>
<hr className="d-lg-none" />
</Col>
{this.state.electionGrades.map((grade, j) => {
return j < this.state.numGrades ? (
<Col
xs={this.state.colSizeGradeXs}
md={this.state.colSizeGradeMd}
lg={this.state.colSizeGradeLg}
key={j}
className="text-lg-center"
>
<label
htmlFor={"candidateGrade" + i + "-" + j}
className="check"
>
<small
className="nowrap d-lg-none ml-2 bold badge"
style={
this.state.ratedCandidates.find(function(
ratedCandidat
) {
return (
JSON.stringify(ratedCandidat) ===
JSON.stringify({ id: candidate.id, value: j })
);
})
? { backgroundColor: grade.color, color: "#fff" }
: {
backgroundColor: "transparent",
color: "#000"
}
}
>
{grade.label}
</small>
<input
type="radio"
name={"candidate" + i}
id={"candidateGrade" + i + "-" + j}
data-index={i}
data-id={candidate.id}
value={j}
onClick={this.handleGradeClick}
defaultChecked={this.state.ratedCandidates.find(
function(element) {
return (
JSON.stringify(element) ===
JSON.stringify({ id: candidate.id, value: j })
);
}
)}
/>
<span
className="checkmark"
style={
this.state.ratedCandidates.find(function(
ratedCandidat
) {
return (
JSON.stringify(ratedCandidat) ===
JSON.stringify({ id: candidate.id, value: j })
);
})
? { backgroundColor: grade.color, color: "#fff" }
: {
backgroundColor: "transparent",
color: "#000"
}
}
/>
</label>
</Col>
) : null;
})}
</Row>
);
})}
<Row>
<Col className="text-center">
{this.state.ratedCandidates.length !==
this.state.candidates.length ? (
<Button
type="button"
onClick={this.handleSubmitWithoutAllRate}
className="btn btn-dark "
>
<FontAwesomeIcon icon={faCheck} className="mr-2" />
Valider
</Button>
) : (
<Button type="submit" className="btn btn-success ">
<FontAwesomeIcon icon={faCheck} className="mr-2" />
Valider
</Button>
)}
</Col>
</Row>
</form>
</Container>
);
}
} }
export default Vote; export default Vote;

55
src/components/views/VoteSuccess.js
Unescape View File

@ -1,34 +1,33 @@
import React, {Component} from "react"; import React, { Component } from "react";
import {Col, Container, Row} from "reactstrap"; import { Col, Container, Row } from "reactstrap";
import logoLine from "../../logos/logo-line-white.svg"; import logoLine from "../../logos/logo-line-white.svg";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
class UnknownView extends Component { class UnknownView extends Component {
render() {
return (
<Container>
<Row>
<Link to="/" className="d-block ml-auto mr-auto mb-4">
<img src={logoLine} alt="logo" height="128" />
</Link>
</Row>
<Row className="mt-4">
<Col className="text-center offset-lg-3" lg="6">
<h2>Participation enregistrée avec succès !</h2>
<p>Merci pour votre participation.</p>
</Col>
</Row>
render(){ <Row className="mt-4">
return( <Col className="text-center">
<Container> <Link to="/" className="btn btn-secondary">
<Row> Revenir à l'accueil
<Link to="/" className="d-block ml-auto mr-auto mb-4"> </Link>
<img src={logoLine} alt="logo" height="128" /> </Col>
</Link> </Row>
</Row> </Container>
<Row className="mt-4"> );
<Col className="text-center offset-lg-3" lg="6"> }
<h2>Participation enregistrée avec succès !</h2>
<p>Merci pour votre participation.</p>
</Col>
</Row>
<Row className="mt-4" >
<Col className="text-center">
<Link to="/" className="btn btn-secondary">Revenir à l'accueil</Link>
</Col>
</Row>
</Container>
)
}
} }
export default UnknownView; export default UnknownView;

13
src/index.jsx
Unescape View File

@ -1,11 +1,10 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom'; import ReactDOM from "react-dom";
import './scss/config.scss'; import "./scss/config.scss";
import App from './App'; import App from "./App";
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from "./serviceWorker";
ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls. // unregister() to register() below. Note this comes with some pitfalls.

216
src/scss/_app.scss
Unescape View File

@ -9,121 +9,118 @@ $body-bg: #000000 !default;
$body-color: $mv-light-color !default; $body-color: $mv-light-color !default;
$theme-colors: ( $theme-colors: (
"primary": $mv-blue-color, "primary": $mv-blue-color,
"secondary": $mv-red-color, "secondary": $mv-red-color,
"light": $mv-light-color, "light": $mv-light-color,
"dark": $mv-dark-color, "dark": $mv-dark-color,
"danger": #990000, "danger": #990000,
"success": #009900, "success": #009900,
"info": #2B8299, "info": #2b8299,
"warning": #FF6E11, "warning": #ff6e11
) !default; ) !default;
.logo-text > h1{ .logo-text > h1 {
font-size:16px; font-size: 16px;
font-weight:bold; font-weight: bold;
margin:0; margin: 0;
line-height:1; line-height: 1;
} }
.bold{ .bold {
font-weight:bold; font-weight: bold;
} }
.logo-text > h1 > small{ .logo-text > h1 > small {
display:block; display: block;
letter-spacing: 0.09em; letter-spacing: 0.09em;
} }
html, body, #root, #root > div{ html,
height:100%; body,
#root,
#root > div {
height: 100%;
} }
main {
background-image: url("/background-mv.png");
main{ background-size: 100%;
background-image:url("/background-mv.png");
background-size:100%;
background-attachment: fixed; background-attachment: fixed;
background-repeat:no-repeat; background-repeat: no-repeat;
background-color:$mv-blue-color; background-color: $mv-blue-color;
min-height: calc(100% - 106px); min-height: calc(100% - 106px);
overflow: auto; overflow: auto;
padding-top:72px; padding-top: 72px;
padding-bottom:36px; padding-bottom: 36px;
} }
header{ header {
position:fixed; position: fixed;
z-index:10; z-index: 10;
width:100%; width: 100%;
} }
footer{ footer {
background-color:$body-bg; background-color: $body-bg;
color:$mv-light-color; color: $mv-light-color;
padding:25px; padding: 25px;
} }
footer a{ footer a {
color:$mv-light-color; color: $mv-light-color;
} }
footer a:hover{ footer a:hover {
color:#fff; color: #fff;
} }
hr{ hr {
border:none; border: none;
border-top:1px solid $mv-light-color; border-top: 1px solid $mv-light-color;
width:100%; width: 100%;
margin:auto; margin: auto;
} }
ul.sortable,
ul.sortable,li.sortable{ li.sortable {
padding:0; padding: 0;
margin:0 0 0 0; margin: 0 0 0 0;
list-style-type: none; list-style-type: none;
} }
li.sortable{ li.sortable {
margin:0 0 15px 0; margin: 0 0 15px 0;
} }
.pointer{ .pointer {
cursor: pointer; cursor: pointer;
} }
.modal {
.modal{ color: $mv-dark-color;
color:$mv-dark-color;
} }
/* card Vote */ /* card Vote */
.cardVote{ .cardVote {
background-color:$mv-light-color; background-color: $mv-light-color;
margin:1em 0; margin: 1em 0;
color:$mv-dark-color; color: $mv-dark-color;
border-radius:0.15em; border-radius: 0.15em;
padding:1em 0; padding: 1em 0;
} }
.cardVote .nowrap{ .cardVote .nowrap {
white-space: nowrap;; white-space: nowrap;
} }
.cardVote hr{ .cardVote hr {
border-top:1px solid $mv-dark-color; border-top: 1px solid $mv-dark-color;
margin:10px 0; margin: 10px 0;
} }
.cardVote.row:hover{ .cardVote.row:hover {
background-color:$mv-light-color-hover; background-color: $mv-light-color-hover;
} }
/* checkbox */ /* checkbox */
/* The radio */ /* The radio */
.radio { .radio {
display: block; display: block;
position: relative; position: relative;
padding-left: 30px; padding-left: 30px;
@ -133,7 +130,7 @@ li.sortable{
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none user-select: none;
} }
/* Hide the browser's default radio button */ /* Hide the browser's default radio button */
@ -145,20 +142,18 @@ li.sortable{
/* Create a custom radio button */ /* Create a custom radio button */
.checkround { .checkround {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 0; left: 0;
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: #fff ; background-color: #fff;
border-color:$mv-blue-color; border-color: $mv-blue-color;
border-style:solid; border-style: solid;
border-width:2px; border-width: 2px;
border-radius: 50%; border-radius: 50%;
} }
/* When the radio button is checked, add a blue background */ /* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkround { .radio input:checked ~ .checkround {
background-color: #fff; background-color: #fff;
@ -183,9 +178,7 @@ li.sortable{
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50%; border-radius: 50%;
background:$mv-blue-color; background: $mv-blue-color;
} }
/* The check */ /* The check */
@ -213,15 +206,15 @@ li.sortable{
/* Create a custom checkbox */ /* Create a custom checkbox */
.checkmark { .checkmark {
position: absolute; position: absolute;
margin-left: calc( 50% - 12px); margin-left: calc(50% - 12px);
top: 0; top: 0;
left: 0; left: 0;
height: 24px; height: 24px;
width: 24px; width: 24px;
background-color: #fff ; background-color: #fff;
border-color:$mv-blue-color; border-color: $mv-blue-color;
border-style:solid; border-style: solid;
border-width:2px; border-width: 2px;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
@ -234,7 +227,7 @@ li.sortable{
/* When the checkbox is checked, add a blue background */ /* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark { .check input:checked ~ .checkmark {
background-color: #fff ; background-color: #fff;
} }
/* Create the checkmark/indicator (hidden when not checked) */ /* Create the checkmark/indicator (hidden when not checked) */
@ -255,65 +248,64 @@ li.sortable{
top: 1px; top: 1px;
width: 10px; width: 10px;
height: 15px; height: 15px;
border: solid ; border: solid;
border-color:#fff; border-color: #fff;
border-width: 0 3px 3px 0; border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
cursor:pointer; cursor: pointer;
} }
.cust-btn{ .cust-btn {
margin-bottom: 10px; margin-bottom: 10px;
background-color: $mv-blue-color; background-color: $mv-blue-color;
border-width: 2px; border-width: 2px;
border-color: $mv-blue-color; border-color: $mv-blue-color;
color: #fff; color: #fff;
} }
.cust-btn:hover{ .cust-btn:hover {
border-color: $mv-blue-color; border-color: $mv-blue-color;
background-color: #fff; background-color: #fff;
color: $mv-blue-color; color: $mv-blue-color;
border-radius: 20px; border-radius: 20px;
transform-style: 2s; transform-style: 2s;
} }
/** collapse **/ /** collapse **/
.panel-title:after { .panel-title:after {
content:'+'; content: "+";
float:right; float: right;
font-size:28px; font-size: 28px;
font-weight:900; font-weight: 900;
} }
.panel-title.collapsed:after { .panel-title.collapsed:after {
content:'-'; content: "-";
} }
/** table profiles **/ /** table profiles **/
.profiles thead,.profiles tbody,.profiles tr,.profiles th, .profiles td,.profiles thead th{ .profiles thead,
border-color:$mv-blue-color; .profiles tbody,
color:$mv-blue-color; .profiles tr,
.profiles th,
.profiles td,
.profiles thead th {
border-color: $mv-blue-color;
color: $mv-blue-color;
} }
.median{ .median {
border-width:0 3px 0 0; border-width: 0 3px 0 0;
border-style:dashed; border-style: dashed;
border-color:$mv-blue-color; border-color: $mv-blue-color;
min-height:30px; min-height: 30px;
width: 1px; width: 1px;
position: absolute; position: absolute;
margin-left: 50%; margin-left: 50%;
margin-top: -15px; margin-top: -15px;
} }
/** react multi email **/ /** react multi email **/
.react-multi-email > span[data-placeholder] { .react-multi-email > span[data-placeholder] {
padding: 0.25em !important; padding: 0.25em !important;
} }

5
src/scss/_bootstrap.scss
Unescape View File

@ -1,4 +1 @@
@import '~bootstrap/scss/bootstrap.scss'; @import "~bootstrap/scss/bootstrap.scss";

32
src/scss/config.scss
Unescape View File

@ -1,30 +1,24 @@
// mieux voter vars // mieux voter vars
$mv-blue-color: #2A43A0; $mv-blue-color: #2a43a0;
$mv-red-color: #EE455B; $mv-red-color: #ee455b;
$mv-light-color: #efefff; $mv-light-color: #efefff;
$mv-light-color-hover:rgba(#efefff, .8); $mv-light-color-hover: rgba(#efefff, 0.8);
$mv-dark-color: #333; $mv-dark-color: #333;
// Override default variables before the import bootstrap // Override default variables before the import bootstrap
$body-bg: #000000; $body-bg: #000000;
$body-color: $mv-light-color; $body-color: $mv-light-color;
$theme-colors: ( $theme-colors: (
"primary": $mv-blue-color, "primary": $mv-blue-color,
"secondary": $mv-red-color, "secondary": $mv-red-color,
"light": $mv-light-color, "light": $mv-light-color,
"dark": $mv-dark-color, "dark": $mv-dark-color,
"danger": #990000, "danger": #990000,
"success": #009900, "success": #009900,
"info": #2B8299, "info": #2b8299,
"warning": #FF6E11, "warning": #ff6e11
); );
@import '_bootstrap.scss'; @import "_bootstrap.scss";
@import 'app.scss'; @import "app.scss";

30
src/serviceWorker.jsx
Unescape View File

@ -11,9 +11,9 @@
// opt-in, read https://bit.ly/CRA-PWA // opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean( const isLocalhost = Boolean(
window.location.hostname === 'localhost' || window.location.hostname === "localhost" ||
// [::1] is the IPv6 localhost address. // [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' || window.location.hostname === "[::1]" ||
// 127.0.0.1/8 is considered localhost for IPv4. // 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@ -21,7 +21,7 @@ const isLocalhost = Boolean(
); );
export function register(config) { export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
// The URL constructor is available in all browsers that support SW. // The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) { if (publicUrl.origin !== window.location.origin) {
@ -31,7 +31,7 @@ export function register(config) {
return; return;
} }
window.addEventListener('load', () => { window.addEventListener("load", () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) { if (isLocalhost) {
@ -42,8 +42,8 @@ export function register(config) {
// service worker/PWA documentation. // service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => { navigator.serviceWorker.ready.then(() => {
console.log( console.log(
'This web app is being served cache-first by a service ' + "This web app is being served cache-first by a service " +
'worker. To learn more, visit https://bit.ly/CRA-PWA' "worker. To learn more, visit https://bit.ly/CRA-PWA"
); );
}); });
} else { } else {
@ -64,14 +64,14 @@ function registerValidSW(swUrl, config) {
return; return;
} }
installingWorker.onstatechange = () => { installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') { if (installingWorker.state === "installed") {
if (navigator.serviceWorker.controller) { if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched, // At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older // but the previous service worker will still serve the older
// content until all client tabs are closed. // content until all client tabs are closed.
console.log( console.log(
'New content is available and will be used when all ' + "New content is available and will be used when all " +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.' "tabs for this page are closed. See https://bit.ly/CRA-PWA."
); );
// Execute callback // Execute callback
@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) {
// At this point, everything has been precached. // At this point, everything has been precached.
// It's the perfect time to display a // It's the perfect time to display a
// "Content is cached for offline use." message. // "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); console.log("Content is cached for offline use.");
// Execute callback // Execute callback
if (config && config.onSuccess) { if (config && config.onSuccess) {
@ -94,7 +94,7 @@ function registerValidSW(swUrl, config) {
}; };
}) })
.catch(error => { .catch(error => {
console.error('Error during service worker registration:', error); console.error("Error during service worker registration:", error);
}); });
} }
@ -103,10 +103,10 @@ function checkValidServiceWorker(swUrl, config) {
fetch(swUrl) fetch(swUrl)
.then(response => { .then(response => {
// Ensure service worker exists, and that we really are getting a JS file. // Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type'); const contentType = response.headers.get("content-type");
if ( if (
response.status === 404 || response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1) (contentType != null && contentType.indexOf("javascript") === -1)
) { ) {
// No service worker found. Probably a different app. Reload the page. // No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then(registration => {
@ -121,13 +121,13 @@ function checkValidServiceWorker(swUrl, config) {
}) })
.catch(() => { .catch(() => {
console.log( console.log(
'No internet connection found. App is running in offline mode.' "No internet connection found. App is running in offline mode."
); );
}); });
} }
export function unregister() { export function unregister() {
if ('serviceWorker' in navigator) { if ("serviceWorker" in navigator) {
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then(registration => {
registration.unregister(); registration.unregister();
}); });

Write Preview
Loading…
Cancel
Save