zuel-itsm-3.0.2/assets/views/pages_user_profile.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.pages.USERPROFILE">{{ mainTitle }}</h1>
			<span class="mainDescription">There are many systems which have a need for user profile pages which display personal information on each member.</span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: USER PROFILE -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<!-- /// controller:  'UserCtrl' -  localtion: assets/js/controllers/userCtrl.js /// -->
			<div ng-controller="UserCtrl">
				<!-- start: USER TABSET -->
				<tabset class="tabbable">
					<!-- start: TAB OVERVIEW -->
					<tab heading="Overview">
						<div class="row">
							<div class="col-md-4">
								<div class="user-left">
									<div class="center">
										<h4>{{userInfo.name}} </h4>
										<div flow-init="{singleFile:true}" flow-name="obj.flow" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
											<div class="user-image">
												<div class="thumbnail">
													<img src="assets/images/default-user.png" alt="" ng-if="!obj.flow.files.length && noImage">
													<img ng-src="{{userInfo.avatar}}" alt="" ng-if="!obj.flow.files.length && !noImage">
													<img flow-img="obj.flow.files[0]" ng-if="obj.flow.files.length">
												</div>
												<div class="user-image-buttons" ng-if="obj.flow.files.length">
													<span class="btn btn-primary" flow-btn><i class="fa fa-pencil"></i></span>
													<span class="btn btn-danger" ng-click="obj.flow.cancel()"> <i class="fa fa-times"></i> </span>
												</div>
												<div class="user-image-buttons" ng-if="!obj.flow.files.length">
													<span class="btn btn-primary" flow-btn><i class="fa fa-pencil"></i></span>
													<span class="btn btn-danger" ng-if="!noImage" ng-click="removeImage()"><i class="fa fa-times"></i></span>
												</div>
											</div>
										</div>
										<hr>
										<div class="social-icons block">
											<ul>
												<li data-placement="top" data-original-title="Twitter" class="social-twitter tooltips">
													<a href="#" target="_blank">
														Twitter
													</a>
												</li>
												<li data-placement="top" data-original-title="Facebook" class="social-facebook tooltips">
													<a href="#" target="_blank">
														Facebook
													</a>
												</li>
												<li data-placement="top" data-original-title="Google" class="social-google tooltips">
													<a href="#" target="_blank">
														Google+
													</a>
												</li>
												<li data-placement="top" data-original-title="LinkedIn" class="social-linkedin tooltips">
													<a href="#" target="_blank">
														LinkedIn
													</a>
												</li>
												<li data-placement="top" data-original-title="Github" class="social-github tooltips">
													<a href="#" target="_blank">
														Github
													</a>
												</li>
											</ul>
										</div>
										<hr>
									</div>
									<table class="table table-condensed">
										<thead>
											<tr>
												<th colspan="3" translate="user.profiles.CONTACTINFO">Contact Information</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>url</td>
												<td>
												<a href="#">
													{{userInfo.url}}
												</a></td>
											</tr>
											<tr>
												<td>email:</td>
												<td>
												<a href>
													{{userInfo.email}}
												</a></td>
											</tr>
											<tr>
												<td>phone:</td>
												<td>{{userInfo.phone}}</td>
											</tr>
											<tr>
												<td>skye</td>
												<td>
												<a href>
													{{userInfo.skype}}
												</a></td>
											</tr>
										</tbody>
									</table>
									<table class="table table-condensed">
										<thead>
											<tr>
												<th colspan="3" translate="user.profiles.GENERALINFO">General information</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td translate="user.profiles.POSITION">Position</td>
												<td>UI Designer</td>
											</tr>
											<tr>
												<td>Last Logged In</td>
												<td>56 min</td>
											</tr>
											<tr>
												<td translate="user.profiles.DEPT">Position</td>
												<td>Senior Marketing Manager</td>
											</tr>
											<tr>
												<td>Supervisor</td>
												<td>
												<a href="#">
													Kenneth Ross
												</a></td>
											</tr>
											<tr>
												<td translate="user.profiles.ROLE">Status</td>
												<td><span class="label label-sm label-info">Administrator</span></td>
											</tr>
										</tbody>
									</table>
									<table class="table table-condensed">
										<thead>
											<tr>
												<th colspan="3" translate="user.profiles.ADDITIONINFO">Additional information</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td translate="user.profiles.GROUP">Groups</td>
												<td>New company web site development, HR Management</td>
											</tr>
										</tbody>
									</table>
									<div class="text-right">
										<a class="btn btn-primary btn-o btn-wide" href="#" ng-click="editActive = true">
											Edit Account
										</a>
									</div>
								</div>
							</div>
							<div class="col-md-8">
								<div class="row space20">
									<div class="col-sm-3">
										<button class="btn btn-icon margin-bottom-5 margin-bottom-5 btn-block">
											<i class="ti-layers-alt block text-primary text-extra-large margin-bottom-10"></i>
											Projects
										</button>
									</div>
									<div class="col-sm-3">
										<button class="btn btn-icon margin-bottom-5 btn-block">
											<i class="ti-comments block text-primary text-extra-large margin-bottom-10"></i>
											Messages <span class="badge badge-danger"> 23 </span>
										</button>
									</div>
									<div class="col-sm-3">
										<button class="btn btn-icon margin-bottom-5 btn-block">
											<i class="ti-calendar block text-primary text-extra-large margin-bottom-10"></i>
											Calendar
										</button>
									</div>
									<div class="col-sm-3">
										<button class="btn btn-icon margin-bottom-5 btn-block">
											<i class="ti-flag block text-primary text-extra-large margin-bottom-10"></i>
											Notifications
										</button>
									</div>
								</div>
								<div class="panel panel-white" id="activities">
									<div class="panel-heading border-light">
										<h4 class="panel-title text-primary">Recent Activities</h4>
										<paneltool class="panel-tools" tool-collapse="tool-collapse" tool-refresh="load1" tool-dismiss="tool-dismiss"></paneltool>
									</div>
									<div collapse="activities" ng-init="activities=false" class="panel-wrapper">
										<div class="panel-body">
											<ul class="timeline-xs">
												<li class="timeline-item success">
													<div class="margin-left-15">
														<div class="text-muted text-small">
															2 minutes ago
														</div>
														<p>
															<a class="text-info" href>
																Steven
															</a>
															has completed his account.
														</p>
													</div>
												</li>
												<li class="timeline-item">
													<div class="margin-left-15">
														<div class="text-muted text-small">
															12:30
														</div>
														<p>
															Staff Meeting
														</p>
													</div>
												</li>
												<li class="timeline-item danger">
													<div class="margin-left-15">
														<div class="text-muted text-small">
															11:11
														</div>
														<p>
															Completed new layout.
														</p>
													</div>
												</li>
												<li class="timeline-item info">
													<div class="margin-left-15">
														<div class="text-muted text-small">
															Thu, 12 Jun
														</div>
														<p>
															Contacted
															<a class="text-info" href>
																Microsoft
															</a>
															for license upgrades.
														</p>
													</div>
												</li>
												<li class="timeline-item">
													<div class="margin-left-15">
														<div class="text-muted text-small">
															Tue, 10 Jun
														</div>
														<p>
															Started development new site
														</p>
													</div>
												</li>
												<li class="timeline-item">
													<div class="margin-left-15">
														<div class="text-muted text-small">
															Sun, 11 Apr
														</div>
														<p>
															Lunch with
															<a class="text-info" href>
																Nicole
															</a>
															.
														</p>
													</div>
												</li>
												<li class="timeline-item warning">
													<div class="margin-left-15">
														<div class="text-muted text-small">
															Wed, 25 Mar
														</div>
														<p>
															server Maintenance.
														</p>
													</div>
												</li>
												<li class="timeline-item">
													<div class="margin-left-15">
														<div class="text-muted text-small">
															Fri, 20 Mar
														</div>
														<p>
															New User Registration
															<a class="text-info" href>
																more details
															</a>
															.
														</p>
													</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="panel panel-white space20">
									<div class="panel-heading">
										<h4 class="panel-title">Recent Tweets</h4>
									</div>
									<div class="panel-body">
										<ul class="ltwt">
											<li class="ltwt_tweet">
												<p class="ltwt_tweet_text">
													<a href class="text-info">
														@Shakespeare
													</a>
													Some are born great, some achieve greatness, and some have greatness thrust upon them.
												</p>
												<span class="block text-light"><i class="fa fa-fw fa-clock-o"></i> 2 minuts ago</span>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</tab>
					<!-- end: TAB OVERVIEW -->
					<!-- start: TAB EDIT ACCOUNT -->
					<tab heading="Edit Account" active="editActive">
						<form action="#" role="form" id="form">
							<fieldset>
								<legend>
									Account Info
								</legend>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
											<label class="control-label">
												First Name
											</label>
											<input type="text" placeholder="Enter your first name" class="form-control" name="firstname" ng-model="userInfo.firstName">
										</div>
										<div class="form-group">
											<label class="control-label">
												Last Name
											</label>
											<input type="text" placeholder="Enter your last name" class="form-control" name="lastname" ng-model="userInfo.lastName">
										</div>
										<div class="form-group">
											<label class="control-label">
												Email Address
											</label>
											<input type="email" placeholder="email address" class="form-control" name="email" ng-model="userInfo.email">
										</div>
										<div class="form-group">
											<label class="control-label">
												Phone
											</label>
											<input type="text" placeholder="phone number" class="form-control" name="phone" ng-model="userInfo.phone">
										</div>
										<div class="form-group">
											<label class="control-label">
												Url
											</label>
											<input type="text" placeholder="Enter Url" class="form-control" name="url" ng-model="userInfo.url">
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="block">
												Gender
											</label>
											<div class="clip-radio radio-primary">
												<input type="radio" id="us-female" name="gender" value="female" ng-model="userInfo.gender">
												<label for="us-female">
													Female
												</label>
												<input type="radio" id="us-male" name="gender" value="male" ng-model="userInfo.gender">
												<label for="us-male">
													Male
												</label>
											</div>
										</div>
										<div class="row">
											<div class="col-md-4">
												<div class="form-group">
													<label class="control-label">
														Zip Code
													</label>
													<input class="form-control" placeholder="enter a zip code" type="text" name="zipcode" ng-model="userInfo.zipCode">
												</div>
											</div>
											<div class="col-md-8">
												<div class="form-group">
													<label class="control-label">
														City
													</label>
													<input class="form-control" placeholder="enter your city" type="text" name="city" ng-model="userInfo.city">
												</div>
											</div>
										</div>
										<div class="form-group">
											<label>
												Image Upload
											</label>
											<div flow-init flow-object="obj.flow">
												<div class="user-image">
													<div class="thumbnail margin-bottom-5">
														<img src="assets/images/default-user.png" alt="" ng-if="!obj.flow.files.length && noImage">
														<img ng-src="{{userInfo.avatar}}" alt="" ng-if="!obj.flow.files.length && !noImage">
														<img flow-img="obj.flow.files[0]" ng-if="obj.flow.files.length">
													</div>
												</div>
												<div class="user-image-buttons-edit" ng-if="obj.flow.files.length">
													<span class="btn btn-primary" flow-btn><i class="fa fa-pencil"></i></span>
													<span class="btn btn-danger" ng-click="obj.flow.cancel()"> <i class="fa fa-times"></i></span>
												</div>
												<div class="user-image-buttons-edit" ng-if="!obj.flow.files.length">
													<span class="btn btn-primary" flow-btn><i class="fa fa-pencil"></i></span>
													<span class="btn btn-danger" ng-if="!noImage" ng-click="removeImage()"><i class="fa fa-times"></i> </span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</fieldset>
							<fieldset>
								<legend>
									Additional Info
								</legend>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
											<label class="control-label">
												Twitter
											</label>
											<span class="input-icon">
												<input class="form-control" type="text" placeholder="Twitter" name="twitter" ng-model="userInfo.twitter">
												<i class="fa fa-twitter"></i> </span>
										</div>
										<div class="form-group">
											<label class="control-label">
												Facebook
											</label>
											<span class="input-icon">
												<input class="form-control" type="text" placeholder="Facebook" name="facebook" ng-model="userInfo.facebook">
												<i class="fa fa-facebook"></i> </span>
										</div>
										<div class="form-group">
											<label class="control-label">
												Google Plus
											</label>
											<span class="input-icon">
												<input class="form-control" type="text" placeholder="Google Plus" name="google" ng-model="userInfo.google">
												<i class="fa fa-google-plus"></i> </span>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label class="control-label">
												Github
											</label>
											<span class="input-icon">
												<input class="form-control" type="text" placeholder="Github" name="github" ng-model="userInfo.github">
												<i class="fa fa-github"></i> </span>
										</div>
										<div class="form-group">
											<label class="control-label">
												Linkedin
											</label>
											<span class="input-icon">
												<input class="form-control" type="text" placeholder="Linkedin" name="linkedin" ng-model="userInfo.linkedin">
												<i class="fa fa-linkedin"></i> </span>
										</div>
										<div class="form-group">
											<label class="control-label">
												Skype
											</label>
											<span class="input-icon">
												<input class="form-control" type="text" placeholder="Skype" name="skype" ng-model="userInfo.skype">
												<i class="fa fa-skype"></i> </span>
										</div>
									</div>
								</div>
							</fieldset>
						</form>
					</tab>
					<!-- end: TAB EDIT ACCOUNT -->
					<!-- start: TAB PROJECTS -->
					<tab heading="Projects">
						<table class="table" id="projects">
							<thead>
								<tr>
									<th>Project Name</th>
									<th class="hidden-xs">Client</th>
									<th>Proj Comp</th>
									<th class="hidden-xs">%Comp</th>
									<th class="hidden-xs center">Priority</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>IT Help Desk</td>
									<td class="hidden-xs">Master Company</td>
									<td>11 november 2014</td>
									<td class="hidden-xs">
									<div class="progress active progress-xs">
										<div style="width: 70%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="progress-bar progress-bar-warning">
											<span class="sr-only"> 70% Complete (danger)</span>
										</div>
									</div></td>
									<td class="center hidden-xs"><span class="label label-danger">Critical</span></td>
								</tr>
								<tr>
									<td>PM New Product Dev</td>
									<td class="hidden-xs">Brand Company</td>
									<td>12 june 2014</td>
									<td class="hidden-xs">
									<div class="progress active progress-xs">
										<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-info">
											<span class="sr-only"> 40% Complete</span>
										</div>
									</div></td>
									<td class="center hidden-xs"><span class="label label-warning">High</span></td>
								</tr>
								<tr>
									<td>ClipTheme Web Site</td>
									<td class="hidden-xs">Internal</td>
									<td>11 november 2014</td>
									<td class="hidden-xs">
									<div class="progress active progress-xs">
										<div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-success">
											<span class="sr-only"> 90% Complete</span>
										</div>
									</div></td>
									<td class="center hidden-xs"><span class="label label-success">Normal</span></td>
								</tr>
								<tr>
									<td>Local Ad</td>
									<td class="hidden-xs">UI Fab</td>
									<td>15 april 2014</td>
									<td class="hidden-xs">
									<div class="progress active progress-xs">
										<div style="width: 50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar" class="progress-bar progress-bar-warning">
											<span class="sr-only"> 50% Complete</span>
										</div>
									</div></td>
									<td class="center hidden-xs"><span class="label label-success">Normal</span></td>
								</tr>
								<tr>
									<td>Design new theme</td>
									<td class="hidden-xs">Internal</td>
									<td>2 october 2014</td>
									<td class="hidden-xs">
									<div class="progress active progress-xs">
										<div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-success">
											<span class="sr-only"> 20% Complete (warning)</span>
										</div>
									</div></td>
									<td class="center hidden-xs"><span class="label label-danger">Critical</span></td>
								</tr>
								<tr>
									<td>IT Help Desk</td>
									<td class="hidden-xs">Designer TM</td>
									<td>6 december 2014</td>
									<td class="hidden-xs">
									<div class="progress active progress-xs">
										<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-warning">
											<span class="sr-only"> 40% Complete (warning)</span>
										</div>
									</div></td>
									<td class="center hidden-xs"><span class="label label-warning">High</span></td>
								</tr>
							</tbody>
						</table>
					</tab>
					<!-- end: TAB PROJECTS -->
				</tabset>
				<!-- end: USER TABSET -->
			</div>
		</div>
	</div>
</div>
<!-- end: USER PROFILE -->