Merge pull request #72 from edu-xored/profile-page

implemented profile page (issue #19)

src/client/components/Profile/Activity.tsx

@@ -0,0 +1,51 @@
+import * as _ from 'lodash';
+import * as React from "react";
+
+interface IActivityItemProps {
+  messageId: number;
+  date: string;
+  description: string;
+}
+
+class ActivityItem extends React.Component<IActivityItemProps, {}> {
+  render() {
+    return(
+      <li className="ui segment" style={{margin:"10px"}}>
+        <div className="contetnt">
+            <div className="header">
+                <h5>{"Date: " + this.props.date}</h5>
+            </div>
+            <div className="description">
+                <p>{this.props.description}</p>
+            </div>
+        </div>
+      </li>
+    );
+  }
+}
+
+export interface IActivity {
+  data: IActivityItemProps[];
+}
+
+export class Activity extends React.Component<IActivity, {}> {
+  renderItems() {
+    return _.map(this.props.data, (item, i) => (
+      <ActivityItem key={i}
+        messageId={item.messageId}
+        date={item.date}
+        description={item.description}/>
+    ));
+  }
+
+  render() {
+    return(
+      <div id="Activity" className="ui vertical stripe quote segment">
+        <h3>Activity</h3>
+        <ul  type = "none" className="ui container">
+          {this.renderItems()}
+        </ul>
+      </div>
+    );
+  }
+}

src/client/components/Profile/Card.tsx

@@ -0,0 +1,143 @@
+import * as React from "react";
+import API from '../../api';
+import {User} from '../../../lib/model';
+
+interface FrontCardProps {
+  username: string;
+  role: string;
+  imageSrc: string;
+}
+
+class FrontCard extends React.Component<FrontCardProps, {}> {
+  render() {
+  return (
+      <div className="ui card">
+
+        <div className="blurring dimmable image">
+          <div className="ui dimmer">
+            <div className="content">
+              <div className="center">
+              </div>
+            </div>
+          </div>
+          <img src={this.props.imageSrc} alt="Avatar"/>
+        </div>
+
+        <div className="content">
+          <h4 className="header">{this.props.username}</h4>
+          <span className="header">{this.props.role}</span>
+        </div>
+
+        <div className="extra content">
+          <a>
+          </a>
+        </div>
+
+      </div>
+    );
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+interface BackCardProps {
+  team: string;
+  position: string;
+  place: string;
+  description: string;
+}
+
+class BackCard extends React.Component<BackCardProps, {}> {
+  render() {
+    return (
+      <div className="ui card">
+        <div className="content">
+          <div className="header">{this.props.team}</div>
+          <div className="header">{this.props.position}</div>
+          <div className="header">{this.props.place}</div>
+          <div className="extra content">
+              <div className="description">{this.props.description}</div>
+          </div>
+        </div>
+        <div className="extra content">
+        </div>
+      </div>
+    );
+  }
+}
+
+/////////////////////////////////////////////////////////////////////////////////////
+
+// constants
+const FRONT_SIDE = "front_side";
+const BACK_SIDE = "back_side";
+
+interface CardProps {
+  username: string;
+  role: string;
+  imageSrc: string;
+  team: string;
+  position: string;
+  place: string;
+  description: string;
+}
+
+///////////////////////////////////////////////////////////////////////////////////////
+interface ICardState {
+    user?: User;
+}
+
+const otherImg = "http://i1.kym-cdn.com/entries/icons/original/000/004/349/Minecraft_Creeper_Wallpaper_by_LynchMob10_09_1_.jpg";
+
+export class Card extends React.Component<{}, ICardState> {
+  constructor(props: {}) {
+      super(props);
+      this.state = {user: null};
+  }
+
+  componentDidMount() {
+      API.me().then(user => {
+          this.setState({user: user });
+      });
+  }
+
+  render() {
+    const {user} = this.state;
+    if (!user) return null;
+
+    return (
+          <div id="Card" className="ui card">
+
+            <div className="blurring dimmable image">
+              <div className="ui dimmer">
+                <div className="content">
+                  <div className="center">
+                  </div>
+                </div>
+              </div>
+              <img src={user.avatar ? user.avatar : otherImg} alt="Avatar"/>
+            </div>
+
+            <div className="content">
+              <a className="header">{user.name}</a>
+              <div className="meta">
+                <span><h5 className="date">{user.role} </h5></span>
+              </div>
+            </div>
+            <div className="content">
+              <span className="header">{"Your team"}</span>
+              <span className="header">{user.place}</span>
+              <span className="header">{user.position}</span>
+            </div>
+            <div className="content">
+              <div className="description">{"Description"}</div>
+            </div>
+            <div className="extra content">
+              <a>
+              </a>
+            </div>
+
+          </div>
+      );
+    }
+}

src/client/components/Profile/TeamList.tsx

@@ -0,0 +1,48 @@
+import * as _ from 'lodash';
+import * as React from "react";
+
+interface ListItemProps {
+  teamId: string;
+  teamName: string;
+  imageSrc: string;
+}
+
+class TeamItem extends React.Component<ListItemProps, {}> {
+  constructor(props: any) {
+    super(props);
+  }
+  render() {
+    return (
+      <li className="content">
+        <div >
+          <span>
+            <img className="ui avatar image" src={this.props.imageSrc} alt="Avatar"/>
+            <a>{this.props.teamName}</a>
+          </span>
+        </div>
+      </li>
+    );
+  }
+}
+
+export interface TeamListProps {
+  data: ListItemProps[];
+}
+
+export class TeamList extends React.Component<TeamListProps, {}> {
+  renderItems() {
+      return _.map(this.props.data, (item, i) => (
+        <TeamItem key={i} teamId={item.teamId} teamName={item.teamName} imageSrc={item.imageSrc} />
+      ));
+  }
+
+  render() {
+    return(
+      <div className="ui card">
+        <ul type = "none">
+          {this.renderItems()}
+        </ul>
+      </div>
+    );
+  }
+}