Fix nonexisting info being displayed oddly

This commit is contained in:
André Wahlberg 2020-12-10 11:15:06 +01:00
parent 9e185ef941
commit 1b3f5abd25
5 changed files with 27 additions and 26 deletions

View File

@ -67,10 +67,10 @@ class NavigationDrawer extends Component {
<span>example@gmail.com</span> <span>example@gmail.com</span>
</header> </header>
<div id="navList"> <div id="navList">
<SelectUserButton path={"user1"} username="user1"/> <SelectUserButton path={"user1"} username="Användare 1"/>
<SelectUserButton path={"user2"} username="user2"/> <SelectUserButton path={"user2"} username="Användare 2"/>
<SelectUserButton path={"user3"} username="user3"/> <SelectUserButton path={"user3"} username="Användare 3"/>
<SelectUserButton path={"user4"} username="user4"/> <SelectUserButton path={"user4"} username="Användare 4"/>
<Button onClick={[this.showPopup, this.close]}><span>Generera Störning</span></Button> <Button onClick={[this.showPopup, this.close]}><span>Generera Störning</span></Button>
</div> </div>
<hr /> <hr />

View File

@ -50,7 +50,7 @@ class SelectUserButton extends Button {
return ( return (
<Button onClick={[this.selectUser, this.updatePage]} className="disruptBtn"> <Button onClick={[this.selectUser, this.updatePage]} className="disruptBtn">
<img src={disruptIcon} alt="" /> <img src={disruptIcon} alt="" />
<span>{this.props.username}</span> {this.props.username}
</Button> </Button>
); );
} }

View File

@ -4,24 +4,28 @@ import './css/StopTitle.css';
class StopTitle extends Component { class StopTitle extends Component {
render() { render() {
console.log(this.props.stop);
return ( return (
<div id="stopTitle"> <div id="stopTitle">
<h1>{this.props.stop.name !== undefined ? <h1>{this.props.stop.name !== undefined ?
this.props.stop.name this.props.stop.name
: "Hållplats saknas" : "Hållplats saknas"
}</h1> }</h1>
{this.props.stop.name !== undefined && this.props.stop.locations !== undefined ?
<div> <div>
{this.props.stop.locations !== undefined ?
<>
<h3> <h3>
<span>{this.props.stop.locations[0]}</span> <span>{this.props.stop.locations[0]}</span>
</h3> </h3>
<button>Byt Läge</button> <button>Byt Läge</button>
</>
:
<h3>Vänligen aktivera platsåtkomst</h3>
}
</div> </div>
:
(this.props.stop.name !== undefined ?
<></>
: <h3>Vänligen aktivera platsåtkomst</h3>
)
}
</div> </div>
); );
} }

View File

@ -8,6 +8,7 @@
justify-content: space-evenly; justify-content: space-evenly;
padding: 0 5vw; padding: 0 5vw;
z-index: 4; z-index: 4;
max-width: 80vw;
} }
#stopTitle h1, #stopTitle h3 { #stopTitle h1, #stopTitle h3 {

View File

@ -10,10 +10,6 @@ import globalData from '../../GlobalData.js';
class TrafficInfo extends Component { class TrafficInfo extends Component {
state = {
stop: globalData.stop
};
render() { render() {
globalData.currentPage = this; globalData.currentPage = this;
@ -21,10 +17,10 @@ class TrafficInfo extends Component {
<> <>
<Header title="Trafikinfo" /> <Header title="Trafikinfo" />
<TopMenu> <TopMenu>
<StopTitle stop={this.state.stop} /> <StopTitle stop={globalData.stop} />
</TopMenu> </TopMenu>
<MainArea> <MainArea>
<TrafficList departures={this.state.stop.departures} /> <TrafficList departures={globalData.stop.departures} />
</MainArea> </MainArea>
</> </>
); );