Skip to content

Commit

Permalink
Merge pull request #20 from yannick1691/dev
Browse files Browse the repository at this point in the history
Fixed language
  • Loading branch information
Yannick authored Nov 22, 2017
2 parents 3eb3eae + af6d8e9 commit 9c4aa32
Show file tree
Hide file tree
Showing 12 changed files with 216 additions and 29 deletions.
2 changes: 1 addition & 1 deletion components/addItem/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default class AddItem extends Component{
return (
<div class={style.newItem}>
<form ref={input => (this.addItemForm = input)} class={style.newItemForm} onSubmit={(e) => this.addItem(e) }>
<input required ref={input => (this.name = input)} type="text" placeholder="Omschrijving van de opdracht" />
<input required ref={input => (this.name = input)} type="text" placeholder="Description of task" />
</form>
</div>
);
Expand Down
6 changes: 5 additions & 1 deletion components/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import firebase from 'firebase/app';
require('firebase/auth');
import fireApp from '../base2';
import Edit from '../routes/edit/index';
import Settings from '../routes/settings/index';

const github = new firebase.auth.GithubAuthProvider();
github.addScope('user:email');
Expand Down Expand Up @@ -86,7 +87,7 @@ export default class App extends Component {
const data = snapshot.val() || {};

// claim it as our own if there is no owner already
if(!data.owner) {
if (!data.owner) {
globalRef.set({
owner: authData.user.uid
});
Expand Down Expand Up @@ -132,6 +133,9 @@ export default class App extends Component {
<Edit path="/profile/:user/edit"
uid={this.state.uid}
/>
<Settings path="/settings"
uid={this.state.uid}
/>
<Teams path="/teams" uuid={this.state.uid} />
</Router>
<NotifyChange />
Expand Down
22 changes: 15 additions & 7 deletions components/groups/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,22 +102,30 @@ export default class BoardGroup extends Component {
<thead class={style.tableHead} style={`display: table-header-group;`}>
<tr>
<th scope="row" style={`text-align: left; font-size: 22px; color: ${this.props.details.color}; width: 25%; min-width: 300px; margin: 0 1px 0 0; padding-left: 12px;`}>
<input class={style.inputHeader} style={`color: ${this.props.details.color}`} name="name" onChange={(e) => this.handleChange(e, this.props.index)} type="text" value={details.name} placeholder="This is a example header (Click to edit)" />
<input
class={style.inputHeader}
style={`color: ${this.props.details.color}`}
name="name"
onChange={(e) => this.handleChange(e, this.props.index)}
type="text"
value={details.name}
placeholder="This is a example header (Click to edit)"
/>
</th>
</tr>
<tr class={style.tableH}>
{/* <th scope="row" style={`text-align: left; font-size: 18px; color: ${this.props.details.color}; width: 25%; min-width: 300px; margin: 0 1px 0 0;`}>
<input class={style.inputHeader} style={`color: ${this.props.details.color}`} name="name" onChange={(e) => this.handleChange(e, this.props.index)} type="text" value={details.name} placeholder="This is a example header (Click to edit)" />
</th> */}
<th style={`width: 25%; min-width: 300px;`}>opdracht</th>
<th style={`width: 5%; min-width: 60px; max-width: 90px;`}>Door wie</th>
<th style={`width: 25%; min-width: 300px;`}>Task</th>
<th style={`width: 5%; min-width: 60px; max-width: 90px;`}>Made by</th>
<th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p2</th>
<th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p3</th>
<th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p4</th>
<th style={`min-width: 130px;`}>status</th>
<th style={`min-width: 100px;`}>doel</th>
<th style={`min-width: 100px`}>deadline</th>
<th style={`min-width: 100px;`}>hoelang erover gedaan</th>
<th style={`min-width: 130px;`}>Status</th>
<th style={`min-width: 100px;`}>Goal</th>
<th style={`min-width: 100px`}>Deadline</th>
<th style={`min-width: 100px;`}>Time used</th>
<th style={`width: 3%;`}>delete</th>
</tr>
</thead>
Expand Down
4 changes: 2 additions & 2 deletions components/header/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { h, Component } from 'preact';
import { Link } from 'preact-router/match';
import userMenu from '../user';
import style from './style';

import logo from '../../assets/img/logo.svg';
Expand All @@ -15,8 +14,9 @@ export default class Header extends Component {
renderLoggedInNav() {
return (
<div class={style.headWrap}>
<Link class={style.logo} aria-label="start page" href="/"><img src={logo} alt={logo} /></Link>
<nav>
<Link>add to team</Link>
<Link href="/teams">my teams</Link>
<UserMenu
username={this.props.username}
userProfilePic={this.props.userProfilePic}
Expand Down
13 changes: 13 additions & 0 deletions components/header/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,19 @@
vertical-align: top;
}

.headWrap a.logo{
width: 200px;
display: inline-flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 15px;
}

.headWrap a.logo img{
width: 100%;
}

/* .headWrap nav a div{
width: 100%;
} */
Expand Down
2 changes: 1 addition & 1 deletion components/item/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export default class Item extends Component {
onChange={(e) => this.handleChange(e, this.props.index)}
type="number"
value={details.tooktime}
placeholder="tijd in uren"
placeholder="Time in hours"
/>
</div>
<div class={style.subRow} />
Expand Down
12 changes: 6 additions & 6 deletions components/statusComp/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,11 @@ export default class StatusComp extends Component {
onChange={(e) => this.handleChange(e)}
name="opdrachtgever"
value={this.state.board.opdrachtgever}
placeholder="naam opdrachtgever"
placeholder="name of client"
/>
</div>
<div class={style.column}>
<h3 class={style.h3__column}>deadline in</h3>
<h3 class={style.h3__column}>Deadline in</h3>
<input
type="text"
class={style.deadlineEdit}
Expand All @@ -97,14 +97,14 @@ export default class StatusComp extends Component {
/>
</div>
<div class={style.column}>
<h3 class={style.h3__column}>Totaal aantal opdrachten</h3>
<h3 class={style.h3__column}>Tasks</h3>
<input
type="text"
class={style.opdrachtgever}
onChange={(e) => this.handleChange(e)}
name="totalOpdracht"
value={this.state.board.totalOpdracht}
placeholder="Totaal aantal opdrachten."
placeholder="tasks."
/>
</div>
</div>
Expand Down Expand Up @@ -138,11 +138,11 @@ export default class StatusComp extends Component {
<h3>{this.state.board.opdrachtgever}</h3>
</div>
<div class={style.column}>
<h3 class={style.h3__column}>deadline in</h3>
<h3 class={style.h3__column}>Deadline in</h3>
<span class={style.deadline}>{this.calculateDayDeadline()}</span>
</div>
<div class={style.column}>
<h3 class={style.h3__column}>Totaal aantal opdrachten</h3>
<h3 class={style.h3__column}>Tasks</h3>
<span class={style.opAantal}>{this.state.board.totalOpdracht}</span>
</div>
</div>
Expand Down
18 changes: 9 additions & 9 deletions components/user/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import 'preact-material-components/List/style.css';
import 'preact-material-components/Menu/style.css';
import 'preact-material-components/Button/style.css';
import style from './style';
import { Router } from 'preact-router';
import { Link } from 'preact-router';

export default class UserMenu extends Component {
Expand All @@ -18,7 +17,8 @@ export default class UserMenu extends Component {
onClick={e => {
if (this.menu.MDComponent.open !== true){
this.menu.MDComponent.open = true;
} else {
}
else {
this.menu.MDComponent.open = false;
}
}}
Expand All @@ -38,20 +38,20 @@ export default class UserMenu extends Component {
<p>profile</p>
</Link>
<Link class={style.link} href={`/profile/${this.props.uid}/edit`}>
<i className="material-icons">account_circle</i>
<i className="material-icons">mode_edit</i>
<p>edit profile</p>
</Link>
<Link class={style.link} href={`/teams`}>
<i className="material-icons">account_circle</i>
<p>teams</p>
<Link class={style.link} href={`/`}>
<i className="material-icons">group_add</i>
<p>add to team</p>
</Link>
<li role="separator" class="mdc-list-divider"></li>
<li role="separator" class="mdc-list-divider" />
<Link class={style.link} href={`/settings`}>
<i className="material-icons">account_circle</i>
<i className="material-icons">settings</i>
<p>settings</p>
</Link>
<Menu.Item onclick={this.props.logout}>
<i className="material-icons">account_circle</i>
<i className="material-icons">close</i>
<p>logout</p>
</Menu.Item>
</Menu>
Expand Down
2 changes: 1 addition & 1 deletion routes/edit/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
display: block;
border: none;
outline: none;
padding: 25px 15px 10px;
padding: 26px 15px 10px;
margin: 0px;
background: none;
color: white;
Expand Down
2 changes: 1 addition & 1 deletion routes/profile/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { h, Component} from 'preact';
import { h, Component } from 'preact';
import style from './style';
import base from '../../base';

Expand Down
69 changes: 69 additions & 0 deletions routes/settings/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { h, Component } from 'preact';
import style from './style';
import base from '../../base';
import TeamCard from '../../components/teamCard';
import CreateTeam from '../../components/createTeam';

export default class Settings extends Component {
constructor() {
super();

this.removeTeam = this.removeTeam.bind(this);
this.addTeam = this.addTeam.bind(this);
}

state = {
teams: {}
}

componentWillMount(nextProps, nextState){
this.ref = base.syncState(`users/${this.props.uuid}/teams`, {
context: this,
state: 'teams'
});
}


componentWillUpdate(nextProps, nextState){
this.ref = base.syncState(`users/${this.props.uuid}/teams`, {
context: this,
state: 'teams'
});
}

componentWillUnmount() {
base.removeBinding(this.ref);
}

removeTeam = (key) => {
const teams = { ...this.state.teams };
teams[key] = null;
this.setState({ teams });
base.remove(`teams/${key}/members/${this.props.uuid}`);
};

addTeam(team) {
// update our state
const teams = { ...this.state.teams };
// Add in our team
teams[team.name] = true;
// set state
this.setState({ teams });
}

render() {
return (
<div class={style.content}>
<h2>teams</h2>
<div class={style.teamsContent}>
{
Object
.keys(this.state.teams)
.map(key => <TeamCard removeTeam={this.removeTeam} key={key} index={key} />)
}
<CreateTeam uuid={this.props.uuid} addTeam={this.addTeam} />
</div>
</div>
);
}
}
93 changes: 93 additions & 0 deletions routes/settings/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
.content{
display: block;
width: 100%;
}

.content h2{
text-align: center;
}

.teamsContent{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}

.cardWrap{
display: inline-block;
width: 20%;
min-width: 300px;
margin: 5px;
}

.cardWrap h1{
font-size: 25px;
text-transform: uppercase;
color: white;
}

.cardBackcolor{
background: #9c27b0;
color: white;
margin-left: -16px;
margin-top: -16px;
margin-right: -16px;
margin-bottom: -16px;
height: 175px;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
}

.buttonSubmit{
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 2.25rem;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 88px;
height: 36px;
padding: 0 16px;
border: none;
outline: none;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
overflow: hidden;
vertical-align: middle;
border-radius: 2px;
color: white;
}

.teamInput{
height: 35px;
width: 142px;
margin-left: 0px;
margin-right: 8px;
padding: 5px 10px;
border: none;
border-bottom: 2px solid #eee;
background: none;
color: #333;
font-size: 15px;
}

.teamInput:focus{
border: none;
outline: none;
border-bottom: 2px solid #9c27b0;
color: #9c27b0;
}

0 comments on commit 9c4aa32

Please sign in to comment.