Skip to content

Commit

Permalink
Implemented user options page. See #45
Browse files Browse the repository at this point in the history
  • Loading branch information
@MKHenson
MKHenson committed Aug 16, 2016
1 parent a35a004 commit a92261c
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 104 deletions.
32 changes: 30 additions & 2 deletions lib/gui/forms/options-form/options-project.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ module Animate {

export interface IOptionsProjectState {
infoServerMsg?: string;
imageUploadErr?: string;
loading?: boolean;
error?: boolean;
}
Expand All @@ -24,10 +25,36 @@ module Animate {
this.state = {
loading: false,
error: false,
infoServerMsg: null
infoServerMsg: null,
imageUploadErr: null
};
}

/**
* Sets the project image url
* @param {Engine.IFile} file
*/
setProjectImageUrl(file: Engine.IFile) {

var project = User.get.project;
this.setState({
loading: true,
imageUploadErr: null
});

project.updateDetails({ image: (file ? file.url : null) }).then( () => {
this.setState({
loading: false
});

}).catch( (err: Error) => {
this.setState({
loading: false,
imageUploadErr: err.message
});
});
}

/**
* Attempts to update the project
* @param {any} project details
Expand Down Expand Up @@ -119,8 +146,9 @@ module Animate {
<br/><br/><span className="nb">Your application must have an image in order to be shown in the gallery.</span><br/><br/>
Your project image should be either a .png or .jpg image that is 200 by 200 pixels.
</div>
{( this.state.imageUploadErr ? <Attention allowClose={false} mode={AttentionType.ERROR}>{this.state.imageUploadErr}</Attention> : null )}
</div>
<ImageUploader label="Upload Image" src={project.image} />
<ImageUploader label="Upload Image" src={project.image} onImage={(f) => {this.setProjectImageUrl(f); }} />
<div className="fix"></div>
</Group>
</div>
Expand Down
123 changes: 85 additions & 38 deletions lib/gui/forms/options-form/options-user.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@ module Animate {
}

export interface IOptionsUserStats {
loadingPercent: number;
errorMsgUserImg: string;
bioUpdateErr?: string;
imageUploadErr?: string;
loading?: boolean;
}



/**
* A component for editing the user properties
*/
export class OptionsUser extends React.Component<IOptionsUserProps, any> {
export class OptionsUser extends React.Component<IOptionsUserProps, IOptionsUserStats> {
static defaultProps: IOptionsUserProps = {
}

Expand All @@ -23,62 +22,110 @@ module Animate {
constructor( props : IOptionsUserProps) {
super(props);
this.state = {
loadingPercent: 0,
errorMsgUserImg: null
imageUploadErr: null,
bioUpdateErr: null,
loading: false
};
}

/**
* Updates the user bio information
* @param {string} bio The new bio data
*/
updateBio(bio:string) {
this.setState({
loading: true,
bioUpdateErr: null
});

User.get.updateDetails( { bio : bio } as Engine.IUserMeta ).catch( (err: Error) => {
this.setState({
bioUpdateErr: err.message
});
}).then( () => {
this.setState({
loading: false
});
});
}

/**
* Sets the user's avatar image
*/
setAvatarUrl(file) {

this.setState({
loading: true,
imageUploadErr: null
});

User.get.updateDetails({ image: (file ? file.url : null) }).then( () => {
this.setState({
loading: false
});

}).catch( (err: Error) => {
this.setState({
loading: false,
imageUploadErr: err.message
});
});
}

/**
* Draws the options JSX
* @returns {JSX.Element}
*/
render() : JSX.Element {
let user = User.get;
let user = User.get.entry;
let loadingSymbol : JSX.Element;

if (this.state.loading)
loadingSymbol = <i className="fa fa-cog fa-spin fa-3x fa-fw"></i>;

return <div id='options-user'>
<Group label="Details">
<div className="field-option">
<div className="label">Username: <span className="soft-text">{user.entry.username}</span></div>
<div className="fix"></div>
<div className="tr">
<div className="td">Username:</div>
<div className="td">{user.username}</div>
</div>
<div className="field-option">
<div className="label">Email: <span className="soft-text">{user.entry.email}</span></div>
<div className="fix"></div>
<div className="tr">
<div className="td">Email:</div>
<div className="td">{user.email}</div>
</div>
<div className="field-option">
<div className="label">Joined On: <span className="soft-text">{new Date(user.entry.createdOn).toLocaleDateString()} {new Date(user.entry.createdOn).toLocaleTimeString()}</span></div>
<div className="fix"></div>
<div className="tr">
<div className="td">Joined On:</div>
<div className="td">{new Date(user.createdOn).toLocaleDateString()} {new Date(user.createdOn).toLocaleTimeString()}</div>
</div>
<div className="field-option">
<div className="label">Joined On: <span className="soft-text">{new Date(user.entry.lastLoggedIn).toLocaleDateString()} {new Date(user.entry.lastLoggedIn).toLocaleTimeString()}</span></div>
<div className="fix"></div>
<div className="tr">
<div className="td">Last Logged In:</div>
<div className="td">{new Date(user.lastLoggedIn).toLocaleDateString()} {new Date(user.lastLoggedIn).toLocaleTimeString()}</div>
</div>
</Group>
<Group label="Avatar">
<div className="img-preview unselectable">
<div className="preview-child">
<div className="background-tiles inner ng-scope">
<img className="vert-align" en-src="( Animate.User.get.meta.image && Animate.User.get.meta.image.trim() != '' ? Animate.User.get.meta.image : './media/appling.png')" />
<div className="div-center"></div>
</div>
</div>
<div className="item-name reg-gradient" id="upload-projet-img" en-click="ctrl.pickAvatar()"><div className="cross"></div>Upload Image {this.state.loadingPercent}</div>
</div>
<ImageUploader label="Upload Image" src={user.meta ? user.meta.image : null} onImage={(f) => {this.setAvatarUrl(f); }} />
<div className="img-data">
<div className="info">Your avatar is the image others see you as. Use the upload button to change your profile picture.</div>
{( this.state.imageUploadErr ? <Attention allowClose={false} mode={AttentionType.ERROR}>{this.state.imageUploadErr}</Attention> : null )}
</div>
<div className="error" en-show="ctrl.$errorMsgUserImg && ctrl.$errorMsgUserImg != ''">{this.state.errorMsgUserImg}</div>
<div className="fix"></div>
</Group>
<Group label="User Information">
<div className="field-option">
<div className="label">Bio</div>
<textarea id="meta-bio" className="background-view-light">{user.meta.bio}</textarea>
<div className="soft-text info">Use the above pad to write about yourself. This will show up on Webinate next to your projects.</div>
<div className="fix"></div>
</div>
<div className="error" en-show="ctrl.$errorMsgImg != ''">{this.state.errorMsgUserImg}</div>
<div className="button reg-gradient curve-small" en-click="ctrl.updateBio(jQuery('#meta-bio').val());" en-className="{ disabled : ctrl.$loading }">Update Information</div>
<h3>Bio</h3>
<textarea id="meta-bio" className="background-view-light">{user.meta ? user.meta.bio : null}</textarea>
<div className="info">Use the above pad to write about yourself. This will show up on Webinate next to your projects.</div>

{( this.state.bioUpdateErr ? <Attention mode={AttentionType.ERROR} allowClose={false}>{this.state.bioUpdateErr}</Attention> : null )}

<button className="button reg-gradient curve-small" disabled={this.state.loading} onClick={(e) => {
e.preventDefault();
this.updateBio( jQuery('#meta-bio').val() );
}}>
Update Information
</button>

{loadingSymbol}
<div className="fix" />
</Group>
</div>
}
Expand Down
86 changes: 22 additions & 64 deletions lib/gui/forms/options-form/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
}

button {
margin: 10px 0 0 0;
float: right;
}

Expand All @@ -34,6 +33,11 @@
display: inline-block;
}

.attention {
margin: 0 0 10px 0;
}


/**
* OPTIONS WINDOW - PROJECT
* =========================
Expand All @@ -54,50 +58,6 @@
color:#000;
}



// .field-option .label {
// font-weight: bold;
// margin: 0 0 5px 5px;
// }
// .field-option .dropdown {
// line-height: 26px;
// }
// .field-option input, .field-option textarea {
// display:block;
// padding:10px;
// width:100%;
// }
// .build-options-form .button{
// min-width:150px;
// padding: 10px 15px;
// }

// /**
// * OPTIONS WINDOW - PROJECT
// * =========================
// */
// #options-project .cross {
// width:30px;
// height:30px;
// margin: 0 10px;
// }
// #options-project .img-preview {
// position:relative;
// overflow:hidden;
// width: 200px;
// height: 200px;
// float: left;
// margin-right:10px;
// }
// #upload-projet-img {
// cursor:pointer;
// }
// #options-project .error {
// margin: 10px 0;
// font-weight: bold;
// }

/**
* OPTIONS WINDOW - BUILD
* =========================
Expand All @@ -109,28 +69,26 @@
display: inline-block;
}


/**
* OPTIONS WINDOW - USER
* =========================
*/
#options-user .img-preview {
position:relative;
overflow:hidden;
width: 200px;
height: 200px;
float: left;
margin-right:10px;
}
#options-user .error {
margin: 10px 0 0 0;
font-weight: bold;
#options-user .group .group-content {
display: table;
width:100%;
.tr {
display: table-row;
}
.td {
display: table-cell;
&:first-child {
font-weight: bold;
padding: 5px 0;
}
&:last-child {
text-align: right;
}
}
}
#options-user .soft-text {
font-weight: normal;
float:right;
}
#options-user .field-option {
margin:10px 0px;
}

}

0 comments on commit a92261c

Please sign in to comment.