Commit 121babbf authored by Linh Nguyen's avatar Linh Nguyen

update view

parent bc9eae61
......@@ -8,21 +8,32 @@
clear: both;
}
.wrapper {
padding: 0 0 0 200px;
}
.main {
float: left;
width: 100%;
width: 75%;
margin-top: 1%;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
margin-left: 3%;
margin-top: 1%;
}
.left-content {
margin: 0 30px;
}
.App-header, .App-footer {
background-color: #282c34;
height: 15%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 16;
color: white;
padding: 5px 0;
}
.main-container {
padding: 5px;
}
\ No newline at end of file
import React, { Component } from "react";
import Scheduler from "./components/Scheduler";
// import Toolbar from "./components/Toolbar";
import MessageArea from "./components/MessageArea";
import "./App.css";
import withFetchData from "./HOC/withFetchData";
......@@ -18,7 +16,7 @@ class App extends Component {
super(props)
const storage = new LocalStorageManager()
storage.set("logins", ["lyujiawe", "jbarthel"])
storage.set("logins", ["nguyetra","lyujiawe", "jbarthel"])
let logins = storage.logins()
......@@ -31,22 +29,6 @@ class App extends Component {
uvs: []
};
}
addMessage(message) {
const maxLogLength = 5;
const newMessage = { message };
const messages = [newMessage, ...this.state.messages];
if (messages.length > maxLogLength) {
messages.length = maxLogLength;
}
this.setState({ messages });
}
logDataUpdate = (action, ev, id) => {
const text = ev && ev.text ? ` (${ev.text})` : "";
const message = `event ${action}: ${id} ${text}`;
this.addMessage(message);
};
addLogin = (login) => {
this.setState({
......@@ -66,49 +48,42 @@ class App extends Component {
}
render() {
const { currentTimeFormatState, messages, logins } = this.state;
const { currentTimeFormatState, logins } = this.state;
return (
<div>
<header>SR03</header>
<div className="clearfix wrapper">
<div className="main">
<div className="scheduler-container">
<SchedulerWithData
timeFormatState={currentTimeFormatState}
onDataUpdated={this.logDataUpdate}
id="schedule"
logins={logins}
<header className="App-header">
<h1>UTC Scheduler</h1>
</header>
<div className="clearfix main-container">
<div className="row">
<div className="left">
<LoginInput
handleClick={(this.addLogin)}
/>
</div>
<MessageArea messages={messages} />
</div>
<div className="left">
<div className="left-content">
<div className="row">
<div className="col">
<LoginInput
handleClick={(this.addLogin)}
/>
</div>
</div>
<div className="row" />
<div className="row">
<div>
<label htmlFor="exampleInputEmail1">Current students:</label>
</div>
<div className="row">
<StudentsList
<StudentsList
logins={logins}
handleClick={(this.deleteLogin)}
/>
</div>
<div className="main">
<div className="scheduler-container">
<SchedulerWithData
timeFormatState={currentTimeFormatState}
onDataUpdated={this.logDataUpdate}
id="schedule"
logins={logins}
handleClick={(this.deleteLogin)}
/>
</div>
</div>
</div>
</div>
<footer>
UTC SR03 P20
<footer className="App-footer">
UTC SR03 P20 - Lyu Jiawen - Linh Nguyen
</footer>
</div >
</div>
);
}
......
import React from 'react';
export const LoginInput = (props) => {
let inputValue;
return (
<>
<form>
<label htmlFor="exampleInputEmail1"><b>Login</b></label>
<div className="row">
<label htmlFor="exampleInputEmail1">Login</label>
</div>
<div className="row">
<div className="col">
<div className="col-7">
<input
className="form-control"
ref={input => inputValue = input}
id="exampleInputEmail1"
/>
</div>
<div className="col">
<div className="col-3">
<button
type="submit"
className="btn btn-primary btn-sm"
......
.scheduler-container {
height: calc(100vh - 100px);
height: calc(100vh - 110px);
/* width: 100vw; */
}
\ No newline at end of file
......@@ -55,7 +55,7 @@ export default class Scheduler extends Component {
componentDidMount() {
scheduler.skin = 'material';
scheduler.skin = 'terrace';
scheduler.config.header = [
'day',
'week',
......@@ -65,8 +65,10 @@ export default class Scheduler extends Component {
'today',
'next'
];
scheduler.config.first_hour = 8;
scheduler.config.last_hour = 22;
scheduler.config.hour_date = '%g:%i %A';
scheduler.xy.scale_width = 70;
scheduler.xy.scale_width = 60;
this.initSchedulerEvents();
......
import Scheduler from './Scheduler';
import './Scheduler.css';
import 'bootstrap/dist/css/bootstrap.min.css';
export default Scheduler;
......@@ -11,6 +11,7 @@ export const StudentsList = (props) => {
logins.map(login => (
<li
className="list-group-item"
horizontal="md"
key={login}
>
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment