266 lines
11 KiB
HTML
266 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Ambition-敏捷项目开发管理工具</title>
|
||
<!-- Tell the browser to be responsive to screen width -->
|
||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||
<!-- Font Awesome -->
|
||
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.css">
|
||
<!-- Theme style -->
|
||
<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
|
||
<!-- Bootstrap 3.3.5 -->
|
||
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
|
||
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
|
||
page. However, you can choose any other skin. Make sure you
|
||
apply the skin class to the body tag so the changes take effect.
|
||
-->
|
||
<link rel="stylesheet" href="../dist/css/skins/skin-green.min.css">
|
||
<!-- date picker -->
|
||
<link rel="stylesheet" href="../dist/css/datepicker.css">
|
||
|
||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||
<!--[if lt IE 9]>
|
||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
<style>
|
||
.project-enter {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 17px;
|
||
}
|
||
|
||
hr {
|
||
flex: 1 1 auto;
|
||
width: 90%;
|
||
height: 1px;
|
||
border: 0;
|
||
margin: 32px 0 0 5px;
|
||
background-image: linear-gradient(to right, rgba(0, 0, 0, .50) 0, rgba(0, 0, 0, 0) 100%);
|
||
background-repeat: repeat-x;
|
||
display: block;
|
||
float: left;
|
||
}
|
||
|
||
.content-title {
|
||
width: 7%;
|
||
float: left;
|
||
}
|
||
|
||
.title-wrapper {
|
||
margin-bottom: 30px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="hold-transition skin-green sidebar-mini" style="overflow-x:hidden;">
|
||
<div class="wrapper">
|
||
<!-- Content Wrapper. Contains page content -->
|
||
<div class="content-wrapper" style="margin-left:0px;">
|
||
<section class="content-header">
|
||
<b>Ambition-敏捷项目开发管理工具</b>
|
||
</h1>
|
||
</section>
|
||
<!-- header section -->
|
||
<!-- Content Header (Page header) -->
|
||
<section class="content">
|
||
<div class="row">
|
||
<!-- col -->
|
||
<div class="col-lg-10 col-lg-offset-1 title-wrapper">
|
||
<div class="content-title">
|
||
<h3>项目选择</h3>
|
||
</div>
|
||
<hr>
|
||
</div>
|
||
<!-- col -->
|
||
<div class="col-lg-8 col-lg-offset-2">
|
||
<div id="cy_container" class="row">
|
||
<div id="cy_template" class="col-lg-4" style="display:none;">
|
||
<div class="box box-widget widget-user">
|
||
<!-- Add the bg color to the header using any of the bg-* classes -->
|
||
<div id="cy_template_bg" class="widget-user-header bg-yellow">
|
||
<!-- /.widget-user-image -->
|
||
<h3 id="cy_template_name" class="widget-user-username">网吧五连座</h3>
|
||
<h5 id="cy_template_content" class="widget-user-desc">Ruby开发项目</h5>
|
||
<button id="cy_template_enterbtn" class="btn btn-default pull-right project-enter">
|
||
<i class="fa fa-sign-in"></i>
|
||
</button>
|
||
</div>
|
||
<div class="box-footer no-padding">
|
||
<ul class="nav nav-stacked">
|
||
<li><a href="#">任务数 <span id="cy_template_mission_count" class="pull-right badge bg-blue">31</span></a></li>
|
||
<li><a href="#">参与人数 <span id="cy_template_users_count" class="pull-right badge bg-aqua">5</span></a></li>
|
||
<li><a href="#">通知数 <span id="cy_template_shares_count" class="pull-right badge bg-green">12</span></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- /.widget-user -->
|
||
</div>
|
||
<!-- col -->
|
||
|
||
<div class="col-lg-4" style="height:242px;width:252px;margin-left:15px;background-color:white">
|
||
|
||
<!-- Add the bg color to the header using any of the bg-* classes -->
|
||
|
||
<!-- /.widget-user-image -->
|
||
|
||
<center>
|
||
<i class="fa fa-fw fa-plus-square" style="font-size:45px;display:block;margin-top:30%"></i>
|
||
<button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal" style="margin-top:10%">
|
||
新建项目
|
||
</button>
|
||
</center>
|
||
<!-- 模态框（Modal） -->
|
||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
|
||
aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close"
|
||
data-dismiss="modal" aria-hidden="true">
|
||
×
|
||
</button>
|
||
<h4 class="modal-title" id="myModalLabel">
|
||
新建项目
|
||
</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form role="form">
|
||
<div class="box-body">
|
||
<div class="form-group">
|
||
<label for="exampleName">项目名称</label>
|
||
<input type="email" class="form-control" id="exampleName">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleTextarea">项目简介</label>
|
||
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
|
||
</div>
|
||
</div><!-- /.box-body -->
|
||
</form>
|
||
</div>
|
||
<div id="creat_project" class="modal-footer">
|
||
<button type="button" class="btn btn-primary">
|
||
创建
|
||
</button>
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal -->
|
||
</div>
|
||
|
||
<!-- /.widget-user -->
|
||
|
||
<!-- col -->
|
||
</div>
|
||
<!-- row -->
|
||
</div>
|
||
<!-- col -->
|
||
</div>
|
||
<!-- row -->
|
||
</section>
|
||
<!-- content section -->
|
||
</div>
|
||
<!-- content-wrapper -->
|
||
</div>
|
||
<!-- ./wrapper -->
|
||
<center><strong>Copyright © 2016 <a href="#">Lucio Yang</a>.</strong> All rights reserved.</center>
|
||
<!-- jQuery 2.1.4 -->
|
||
<script src="../plugins/jQuery/jQuery-2.1.4.min.js"></script>
|
||
<!-- Bootstrap 3.3.5 -->
|
||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||
<!-- AdminLTE App -->
|
||
<script src="../dist/js/app.min.js"></script>
|
||
<!-- AdminLTE for demo purposes -->
|
||
<script src="../dist/js/demo.js"></script>
|
||
<script>
|
||
|
||
$(document).ready(function(){
|
||
htmlobj=$.ajax(
|
||
{
|
||
type:"GET",
|
||
dataType:"json",
|
||
url:"/projects.json",
|
||
statusCode: {
|
||
200: function() {// 请求成功
|
||
var bg_color = ["bg-yellow","bg-blue","bg-purple","bg-red"];
|
||
var jstr = htmlobj.responseText;
|
||
var robj = eval('('+jstr+')');
|
||
var count=0;
|
||
if(robj["code"]==0){
|
||
var data = robj["data"];
|
||
for(var i=data.length-1;i>=0;--i){
|
||
var template = $("#cy_template");
|
||
var tp = template.clone("true");
|
||
var id = data[i]["id"];
|
||
tp.find("#cy_template_name").html(data[i]["name"]);
|
||
tp.find("#cy_template_content").html(data[i]["content"]);
|
||
tp.find("#cy_template_mission_count").html(data[i]["mission_count"]);
|
||
tp.find("#cy_template_users_count").html(data[i]["users_count"]);
|
||
tp.find("#cy_template_shares_count").html(data[i]["shares_count"]);
|
||
tp.find("#cy_template_enterbtn").attr("onclick","cy_enter("+id+");");
|
||
|
||
tp.find("#cy_template_name").attr("id","cy_name_"+id);
|
||
tp.find("#cy_template_content").attr("id","cy_content_"+id);
|
||
tp.find("#cy_template_mission_count").attr("id","cy_mission_count_"+id);
|
||
tp.find("#cy_template_users_count").attr("id","cy_users_count_"+id);
|
||
tp.find("#cy_template_shares_count").attr("id","cy_shares_count_"+id);
|
||
tp.find("#cy_template_enterbtn").attr("id","cy_enter_"+id);
|
||
|
||
tp.find("#cy_template_bg").attr("class","widget-user-header "+bg_color[(count++)%4]);
|
||
tp.find("#cy_template_bg").attr("id","cy_bg_"+id);
|
||
|
||
|
||
tp.attr("id","cy_project_"+id);
|
||
|
||
tp.css("display","block");
|
||
|
||
$("#cy_container").prepend(tp);
|
||
}
|
||
}
|
||
else{
|
||
//todo
|
||
}
|
||
},
|
||
401:function(){// 未授权
|
||
alert("用户名或密码错误！");
|
||
}
|
||
}
|
||
});
|
||
});
|
||
$("#creat_project").click(function(){
|
||
var pName=$("#exampleName").val();
|
||
var pContent=$("#exampleTextarea").val();
|
||
$.ajax({
|
||
type:"post",
|
||
dataType:"json",
|
||
url:"/projects.json",
|
||
data:{
|
||
"project[name]":pName,
|
||
"project[content]":pContent
|
||
},
|
||
statusCode: {
|
||
201: function() {// 请求成功
|
||
alert("创建成功！");
|
||
window.location.reload();
|
||
},
|
||
401:function(){// 未授权
|
||
alert("未登录！");
|
||
window.location.href="login.html";
|
||
},
|
||
422:function(){
|
||
alert("项目名重复！");
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
function cy_enter(id){
|
||
console.log(id);
|
||
window.location.href="../index.html?projectid="+id;
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |