se-hub/templates/views/home.html

<div>
	<div class="loader" ng-if="loadingData">
		<md-progress-circular md-mode="indeterminate"></md-progress-circular>
	</div>
	<md-content>
		<md-card class="gray-font fadeOutUp" ng-if="isEnterd">
			<div layout="row">
				<div class="spacer"></div>
				<div>
					<h1><i class="fa fa-graduation-cap"></i></h1>
				</div>
				<div class="spacer"></div>
			</div>
			<div layout="row">
				<div class="spacer"></div>
				<div>
					<h1>Welcome To SE-Hub</h1>
					<P>Software Engineering Course Made Easy</P>
					v1.0
				</div>
				<div class="spacer"></div>
			</div>
		</md-card>
	</md-content>
	<md-content>
		<h1 style="margin-left:15px;"><i class="fa fa-dashboard"></i> Dash Board</h1>
	</md-content>
	<div ng-if="user.isLecturer"> <!-- Lecturer Mode -->
		<div class ="addMessage" layout="row" layout-margin layout padding>
			<div>
				<md-button ng-click="addMessageClicked()" ng class="md-raised md-primary" aria-label="aM"><i class="fa fa-comments"></i>
				</md-button>
			</div>
		</div>
		<div ng-if="addMsg">
			<div layout = "row" layout-margin layout padding layout-align = "left center">	
				<md-button ng-click="postMessageClicked()" ng class="md-raised md-primary">Post</md-button>
				<md-button ng-click="clearAllClicked()" ng class="md-raised md-primary">Clear All</md-button>
			</div>
			<div class="port_spacer"></div>
			<div layout-padding layout = "row">
				<div flex = "60">
					<md-input-container>
						<label> Write Your Desired Message Here And Press Post</label>
						<input type="text" minlength="1" ng-model="msg.msgToAdd" required></input>	
					</md-input-container>
				</div>
				<div flex = "30">
					<md-select placeholder="Choose Course" ng-model="courseObj.name" ng-change="chooseCourseClicked()" style="z-index: 300" class="courseDropDown" required>
						<md-option ng-repeat="c in courses" value="{{c.courseName}}">{{c.courseName}}</md-option>
					</md-select>
				</div>
			</div>
		</div>
		<md-card>
			<div flex = "90">
				<md-content>
					<md-tabs md-dynamic-height md-border-bottom>
						<md-tab label="Messages">
							<md-content class="tabDesign">
								<md-card ng-repeat = "msg in userMessages">
									<div layout = "row" layout-padding>
										<div flex = "10">
											<img ng-src="{{msg.user.avatar_url}}" style="width:80%">
										</div>
										<div flex = "20" layout = "column">
											<div>
												{{msg.user.username}}
											</div>
											<div>
												{{msg.group.courseName}}
												{{msg.group.projectName}}
											</div>
										</div>
										<div flex = "40">
											{{msg.message}}
										</div>
									</div>
								</md-card>
							</md-content>
						</md-tab>
						<md-tab label="Tasks waiting for review">
							<md-content class="md-padding">
								<div ng-repeat = "course in unSubmittedTasks">
									<md-card ng-repeat = "task in course.tasks" layout-padding>
										<div ng-repeat = "uName in task.usersToReview">
											Title: {{task.title}}
											<br></br>
											<md-button ng-click="reviewTask(task)">
												Name: {{uName.name}}
											</md-button>
										</div>
										<div ng-repeat = "projName in task.projectsToReview">
											Title: {{task.title}}
											<br></br>
											<md-button ng-click="reviewTask(task)">
												Name: {{projName.projectName}}
											</md-button>
										</div>
									</md-card>	
								</div>
							</md-content>
						</md-tab>
					</md-tabs>
				</md-content>
			</div>
		</md-card>
	</div>
	<div ng-if="isStudent"> <!-- Student Mode -->
		<div layout = "column" flex = 90 layout-margin>
			<div>
				Closest Task-
				<md-card layout-margin layout-padding>
					<div>	
						<md-button ng-click="gotoTask(userTasks[0])">
							 {{userTasks[0].title}}
						</md-button>
					</div>
				</md-card>
			</div>
			<div>
				Latest Message-
				<md-card layout-margin layout-padding ng-if="!userMessages">
					{{userMessages[0].message}}
				</md-card>
				<md-card layout-margin layout-padding ng-if="userMessages">
					No Messages.
				</md-card>
			</div>
		</div>
		<div class ="addMessage" layout="row" layout-margin layout padding>
			<div>
				<md-button ng-click="addMessageClicked()" ng class="md-raised md-primary" aria-label="aM"><i class="fa fa-comments"></i></md-button>
			</div>
		</div>
		<div ng-if="addMsg">
			<div layout = "row" layout-margin layout padding layout-align = "left center">	
				<md-button ng-click="postMessageClicked()" ng class="md-raised md-primary">Post</md-button>
			</div>
			<div class="port_spacer"></div>
			<div layout-padding layout = "row">
				<div flex = "60">
					<md-input-container>
						<label> Write Your Desired Message Here And Press Post</label>
						<input type="text" minlength="1" ng-model="msg.msgToAdd" required></input>	
					</md-input-container>
				</div>
				<div flex = "30">
					<md-select placeholder="Choose Course" ng-model="courseObj.name" ng-change="chooseCourseClicked()" style="z-index: 300" class="courseDropDown" required>
						<md-option ng-repeat="c in courses" value="{{c.courseName}}">{{c.courseName}}</md-option>
					</md-select>
				</div>
			</div>
		</div>
		<md-content>
			<md-card>
				<div flex="100">
					<md-tabs md-dynamic-height md-border-bottom>
						<md-tab label="Messages">
							<md-card ng-repeat = "msg in userMessages">
								<div layout = "column" layout-padding>
									<div flex = "30" class="md-avatar">
										<img ng-src="{{msg.user.avatar_url}}" style="width:100%">
									</div>
									<div flex = "20" layout = "row">
										<div>
											{{msg.user.username}}
										</div>
										<div>
											{{msg.group.courseName}}
											{{msg.group.projectName}}
										</div>
									</div>
									<div flex = "40">
										{{msg.message}}
									</div>
								</div>
							</md-card>
						</md-tab>
						<md-tab label="Tasks">
							<md-content class="md-padding">
								<md-card ng-repeat = "task in userTasks" layout-padding>
									<div>
										Title: 
										<md-button ng-click="gotoTask(task)">
											{{task.title}}
										</md-button>
										<br></br>
										Description: {{task.description}}
									</div>
								</md-card>	
							</md-content>
						</md-tab>
					</md-tabs>
				</div>
			</md-card>
		</md-content>
	</div>
</div>