ambition/public/pages/task.html

655 lines
34 KiB
HTML
Raw Permalink Normal View History

2016-12-08 10:10:37 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ambition-敏捷开发项目管理工具</title>
2016-12-08 10:10:37 +08:00
<!-- 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>
.task-content-a {
text-decoration: none !important;
color: black !important;
}
.content-container-unstart {
background: #F4F4F4;
box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
border-left: 8px solid #d2d6de;
}
.content-container-processing {
background: #F4F4F4;
box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
border-left: 8px solid #dd4b39;
}
.content-container-success {
background: #F4F4F4;
box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
border-left: 8px solid #00a65a;
}
.content-container-tested {
background: #F4F4F4;
box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
border-left: 8px solid #00c0ef;
}
.modal-detail {
background-color: #ecf0f5;
}
</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">
<h1>
任务
<small>Ready to work!</small>
</h1>
</section>
<!-- header section -->
<!-- Content Header (Page header) -->
<section class="content">
<div class="row">
<div class="col-md-3">
<div class="box box-default">
<div class="box-header with-border">
2017-01-02 16:14:17 +08:00
<h3 class="box-title">未开始</h3>
2016-12-08 10:10:37 +08:00
<div class="box-tools pull-right">
<button class="btn btn-box-tool" onclick="mission_create(1)"><i class="fa fa-plus"></i></button>
2016-12-08 10:10:37 +08:00
</div>
</div>
<!-- /.box-header -->
2017-01-02 16:14:17 +08:00
<div class="box-body" id="container_1">
<div class="callout content-container-unstart" id="mission_template" style="display:none">
<a href="javascript:showTaskDetail(1);" class="task-content-a">
2016-12-08 10:10:37 +08:00
<h4>前端原型开发</h4>
<p>开发出项目的前端原型。</p>
</a>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="box box-danger">
<div class="box-header with-border">
2017-01-02 16:14:17 +08:00
<h3 class="box-title">进行中</h3>
2016-12-08 10:10:37 +08:00
<div class="box-tools pull-right">
<button class="btn btn-box-tool" onclick="mission_create(2)"><i class="fa fa-plus"></i></button>
2016-12-08 10:10:37 +08:00
</div>
</div>
<!-- /.box-header -->
2017-01-02 16:14:17 +08:00
<div class="box-body" id="container_2">
2016-12-08 10:10:37 +08:00
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="box box-success">
<div class="box-header with-border">
2017-01-02 16:14:17 +08:00
<h3 class="box-title">已完成</h3>
2016-12-08 10:10:37 +08:00
<div class="box-tools pull-right">
<button class="btn btn-box-tool" onclick="mission_create(3)"><i class="fa fa-plus"></i></button>
2016-12-08 10:10:37 +08:00
</div>
</div>
<!-- /.box-header -->
2017-01-02 16:14:17 +08:00
<div class="box-body" id="container_3">
2016-12-08 10:10:37 +08:00
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="box box-info">
<div class="box-header with-border">
2017-01-02 16:14:17 +08:00
<h3 class="box-title">已测试</h3>
2016-12-08 10:10:37 +08:00
<div class="box-tools pull-right">
<button class="btn btn-box-tool" onclick="mission_create(4)"><i class="fa fa-plus"></i></button>
2016-12-08 10:10:37 +08:00
</div>
</div>
<!-- /.box-header -->
2017-01-02 16:14:17 +08:00
<div class="box-body" id="container_4">
2016-12-08 10:10:37 +08:00
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- row -->
2017-01-02 16:14:17 +08:00
2016-12-08 10:10:37 +08:00
<!-- 模态框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 modal-detail">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<input id="mission_id" style="display:none;">
2016-12-08 10:10:37 +08:00
<h4 class="modal-title" id="myModalLabel">
2017-01-02 16:14:17 +08:00
2016-12-08 10:10:37 +08:00
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">基本信息</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<strong><i class="fa fa-book margin-r-5"></i>任务名称</strong>
<p class="text-muted" id="mission_task_name">
2016-12-08 10:10:37 +08:00
</p>
<hr>
<strong><i class="fa fa-tasks margin-r-5"></i>任务内容</strong>
<p class="text-muted" id="mission_task_content"></p>
2016-12-08 10:10:37 +08:00
<hr>
<strong><i class="fa fa-calendar margin-r-5"></i>截止时间</strong> <span id="mission_task_deadline"></span>
2016-12-08 10:10:37 +08:00
<hr>
<strong><i class="fa fa-clock-o margin-r-5"></i>优先级</strong>
<div class="label label-danger" style="font-size:15px;font-weight:0 !important;" id="mission_task_priority"></div>
2016-12-08 10:10:37 +08:00
<hr>
<strong><i class="fa fa-file-text-o margin-r-5"></i>参与人员</strong>
<p id="mission_task_users">
2016-12-08 10:10:37 +08:00
</p>
</div>
<!-- /.box-body -->
</div>
</div>
<!-- col -->
<div class="col-lg-12">
<div class="box box-primary direct-chat direct-chat-primary">
<div class="box-header with-border">
<h3 class="box-title">任务评论</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages" id="mission_comments_container">
2016-12-08 10:10:37 +08:00
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="input-group">
<input type="text" name="message" id="mission_comments_content" placeholder="输入评论内容" class="form-control">
2016-12-08 10:10:37 +08:00
<span class="input-group-btn">
<button type="button" class="btn btn-primary btn-flat" onclick="publish_comment()">提交评论</button>
2016-12-08 10:10:37 +08:00
</span>
</div>
</div>
<!-- /.box-footer-->
</div>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="mission_update()">
2016-12-08 10:10:37 +08:00
修改
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<!-- 模态框Modal -->
</div>
<!-- 更新和创建共用模态框 -->
2016-12-08 10:10:37 +08:00
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-detail">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<!-- 用来记录动作是要更新还是创建1创建2更新 -->
<input id="mission_edit_type" style="display:none;">
<!-- 用来记录任务所在的状态 -->
<input id="mission_edit_status" style="display:none;">
2016-12-08 10:10:37 +08:00
<h4 class="modal-title" id="myModalLabel">
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">任务信息</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="form-group row has-feedback">
<label for="inputPassword3" class="col-sm-2 col-md-push-2 control-label">任务名称</label>
<div class="col-sm-6 col-md-push-2">
<input type="text" class="form-control" value="" id="mission_edit_name" placeholder="输入任务名称">
2016-12-08 10:10:37 +08:00
</div>
</div>
<!-- ./form-group -->
<div class="form-group row has-feedback">
<label for="inputPassword3" class="col-sm-2 col-md-push-2 control-label">任务内容</label>
<div class="col-sm-6 col-md-push-2">
<textarea class="form-control" rows="3" placeholder="输入任务内容" id="mission_edit_content"></textarea> </div>
2016-12-08 10:10:37 +08:00
</div>
<!-- ./form-group -->
<div class="form-group row has-feedback">
<label for="inputPassword3" class="col-sm-2 col-md-push-2 control-label">截止时间</label>
<div class="col-sm-6 col-md-push-2">
<input type="text" class="form-control" value="" id="mission_edit_deadline" placeholder="输入截止时间">
2016-12-08 10:10:37 +08:00
</div>
</div>
<!-- ./form-group -->
<div class="form-group row has-feedback">
<label for="inputPassword3" class="col-sm-2 col-md-push-2 control-label">优先级</label>
<div class="col-sm-6 col-md-push-2">
<div class="radio">
<label>
<input type="radio" name="mission_edit_priority" value="1" checked="">
2016-12-08 10:10:37 +08:00
普通
</label>
2016-12-08 10:10:37 +08:00
</div>
<div class="radio">
<label>
<input type="radio" name="mission_edit_priority" value="2">
紧急
</label>
2016-12-08 10:10:37 +08:00
</div>
<div class="radio">
<label>
<input type="radio" name="mission_edit_priority" value="3">
非常紧急
</label>
2016-12-08 10:10:37 +08:00
</div>
</div>
</div>
<!-- ./form-group -->
<div class="form-group row has-feedback">
<label for="inputPassword3" class="col-sm-2 col-md-push-2 control-label">参与人员</label>
<div class="col-sm-6 col-md-push-2" id="mission_edit_users_options">
2016-12-08 10:10:37 +08:00
</div>
</div>
<!-- ./form-group -->
</div>
<!-- /.box-body -->
</form>
</div>
</div>
<!-- col -->
<div class="col-lg-12">
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="mission_edit_submit">
2016-12-08 10:10:37 +08:00
提交
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
2017-01-02 16:14:17 +08:00
2016-12-08 10:10:37 +08:00
</section>
<!-- content section -->
</div>
<!-- content-wrapper -->
</div>
<!-- ./wrapper -->
<center><strong>Copyright &copy; 2016 <a href="#">Ambition Inc.</a>.</strong> All rights reserved.</center>
2017-01-02 16:14:17 +08:00
<a id="show_modal" style="display:none" data-toggle="modal" data-target="#myModal"></a>
<a id="show_modal2" style="display:none" data-toggle="modal" data-target="#myModal2"></a>
2017-01-02 16:14:17 +08:00
2016-12-08 10:10:37 +08:00
<!-- 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>
<!-- date select and query -->
<!-- Custom Scripts -->
2017-01-01 16:31:47 +08:00
<script>
function mission_create(status){
$("#mission_edit_type").val('1');// 表示创建操作
$("#show_modal2").click();
// 初始化表单
$("#mission_edit_content").val("");
$("#mission_edit_deadline").val("");
$("#mission_edit_name").val("");
$('input:radio[name="mission_edit_priority"][value="1"]').attr('checked','checked');
$("#mission_edit_status").val(status);
$("#mission_edit_users_options").html("");
// 初始化可选用户
$.ajax({
type:"get",
dataType:"json",
url:"/projects/detail.json",
async:false,// 强制同步
data:{
"id":parent.LoginUserInfo.selectProject
},
statusCode: {
200: function(rpstr) {// 请求成功
var data=rpstr.data;
if(rpstr.code=="0"){
var users = data.users;
for(var i = 0; i < users.length; ++i){
var user='<label class="checkbox-inline"><input type="checkbox" name="mission_edit_users" value="'+users[i].id+'">'+users[i].name+'</label>';
$("#mission_edit_users_options").append(user);
}
}
else{
alert("服务器内部出错啦!");
}
},
401:function(){// 未授权
// TODO
}
}
});
$("[name='mission_edit_users']:checkbox").attr("checked", false);
}
function mission_update(){
$("#mission_edit_type").val('2');// 表示创建操作
// 初始化表单
$("#mission_edit_users_options").html("");
$("#show_modal2").click();
// 初始化可选用户
$.ajax({
type:"get",
dataType:"json",
url:"/projects/detail.json",
async:false,// 强制同步
data:{
"id":parent.LoginUserInfo.selectProject
},
statusCode: {
200: function(rpstr) {// 请求成功
var data=rpstr.data;
if(rpstr.code=="0"){
var users = data.users;
for(var i = 0; i < users.length; ++i){
var user='<label class="checkbox-inline"><input type="checkbox" name="mission_edit_users" value="'+users[i].id+'">'+users[i].name+'</label>';
$("#mission_edit_users_options").append(user);
}
}
else{
alert("服务器内部出错啦!");
}
},
401:function(){// 未授权
// TODO
}
}
});
$("[name='mission_edit_users']:checkbox").attr("checked", false);
}
$("#mission_edit_submit").click(function (){
var mission_edit_name=$("#mission_edit_name").val();
var mission_edit_content=$("#mission_edit_content").val();
var mission_edit_deadline=$("#mission_edit_deadline").val();
var mission_edit_priority=$('input:radio[name="mission_edit_priority"]:checked').val();
var mission_edit_status=$("#mission_edit_status").val();
var mission_edit_users=[];
$("input[name='mission_edit_users']:checkbox:checked").each(function(){
mission_edit_users.push($(this).val());
});
//alert(mission_edit_users.length);
if( mission_edit_name.length>0 && mission_edit_content.length>0 && mission_edit_deadline.length>0 && mission_edit_priority>0 && mission_edit_users.length>0){
if( $("#mission_edit_type").val()==1 ){// 创建
$.ajax({
type:"post",
dataType:"json",
url:"/missions.json",
data:{
"project_id":parent.LoginUserInfo.selectProject,
"name":mission_edit_name,
"content":mission_edit_content,
"deadline":mission_edit_deadline,
"priority":mission_edit_priority,
"users":mission_edit_users,
"status":mission_edit_status
},
statusCode: {
200: function(rpstr) {// 请求成功
var robj = rpstr;
if(robj["code"]==0){
alert("创建成功!");
window.location.reload();
}
},
422:function(){
alert("输入不符合要求,请重新输入!");
}
}
});
}else if($("#mission_edit_type").val()==2){// 更新
$.ajax({
type:"patch",
dataType:"json",
url:"/missions/detail.json",
data:{
"id":parent.LoginUserInfo.selectProject,
"name":mission_edit_name,
"content":mission_edit_content,
"deadline":mission_edit_deadline,
"priority":mission_edit_priority,
"users":mission_edit_users
},
statusCode: {
200: function(rpstr) {// 请求成功
var robj = rpstr;
if(robj["code"]==0){
alert("修改成功!");
window.location.reload();
}
},
422:function(){
alert("输入不符合要求,请重新输入!");
}
}
});
}
}else{
alert("请输入完整!");
}
});
2017-01-02 16:14:17 +08:00
$(document).ready(function(){
//获取某状态的任务列表
getTaskList(1,"container_1");
getTaskList(2,"container_2");
getTaskList(3,"container_3");
getTaskList(4,"container_4");
function getTaskList(type,container_id){
//alert("11");
2017-01-02 16:14:17 +08:00
$.ajax({
type:"GET",
dataType:"json",
url:"/missions.json",
2017-01-02 16:14:17 +08:00
data:{
"project_id":parent.LoginUserInfo.selectProject,
"status_type":type
},
statusCode: {
200: function(rpstr) {// 请求成功
var color = ["","#d2d6de","#dd4b39","#00a65a","#00c0ef"];
if(rpstr.code=="0"){
2017-01-02 16:25:11 +08:00
var data=rpstr.data;
2017-01-02 16:14:17 +08:00
for(var i = 0; i < data.length; ++i){
var template = $("#mission_template");
var tp=template.clone("true");
tp.find("h4").html(data[i].name);
tp.find("p").html(data[i].content);
tp.attr("id","mission_"+data[i].id);
tp.children("a").attr("href","javascript:showTaskDetail("+data[i].id+")");
tp.css("border-left","8px solid"+color[type]);
tp.css("display","block");
$("#"+container_id).append(tp);
}
}
else{
//todo
}
},
401:function(){// 未授权
alert("未登录!");
}
}
});
}
});
//获取任务详情(修改模态框)
function showTaskDetail(mission_id){
$("#mission_id").val(mission_id);// 保存在页面,以便评论使用
2017-01-02 16:14:17 +08:00
//修改模态框
$.ajax({
type:"GET",
dataType:"json",
2017-01-02 16:22:06 +08:00
url:"/missions/detail.json",
async:false,
2017-01-02 16:14:17 +08:00
data:{
"id":mission_id
},
statusCode: {
200: function(rpstr) {// 请求成功
if(rpstr.code=="0"){
2017-01-02 16:25:11 +08:00
var data=rpstr.data;
$("#mission_task_name").html(data.name);
$("#mission_task_content").html(data.content);
$("#mission_task_deadline").html(data.deadline.substring(0,10)+" "+data.deadline.substring(11,16));
if(data.priority==1){
$("#mission_task_priority").html("普通");
$("#mission_task_priority").attr("class","label label-info");
}
if(data.priority==2){
$("#mission_task_priority").html("紧急");
$("#mission_task_priority").attr("class","label label-danger");
}
if(data.priority==3){
$("#mission_task_priority").html("非常紧急");
$("#mission_task_priority").attr("class","label label-danger");
}
2017-01-02 16:14:17 +08:00
var name_list_str = "";
for(var i=0; i < data.users.length; ++i){
2017-01-02 16:14:17 +08:00
if(i != 0){
name_list_str+=','
2017-01-02 16:14:17 +08:00
}
name_list_str += data.users[i];
2017-01-02 16:14:17 +08:00
}
$("#mission_task_users").html(name_list_str);
$("#mission_comments_container").html("");
2017-01-02 16:14:17 +08:00
for(var i=0; i < data.comments.length; ++i){
var comment='\
<div class="direct-chat-msg">\
<div class="direct-chat-info clearfix">\
<span class="direct-chat-name pull-left">'+data.comments[i].nickname+'</span>\
<span class="direct-chat-timestamp pull-right">'+data.comments[i].time.substring(0,5)+' '+data.comments[i].time.substring(6,11)+'</span>\
</div>\
<img class="direct-chat-img" src="../dist/img/avatar5.png" alt="message user image">\
<div class="direct-chat-text">'+data.comments[i].content+'</div>\
</div>';
$("#mission_comments_container").append(comment);
2017-01-02 16:14:17 +08:00
}
// 初始化修改页面
$("#mission_edit_content").val(data.content);
$("#mission_edit_deadline").val(data.deadline.substring(0,10)+" "+data.deadline.substring(11,16));
$("#mission_edit_name").val(data.name);
$('input:radio[name="mission_edit_priority"][value='+data.priority+']').attr('checked','checked');
2017-01-02 16:14:17 +08:00
}
else{
//todo
}
},
401:function(){// 未授权
alert("未登录!");
}
}
});
//显示模态框
$("#show_modal").click();
2017-01-02 16:14:17 +08:00
}
function publish_comment(){
var mission_id=$("#mission_id").val();
var comment_content=$("#mission_comments_content").val();
if( comment_content.length>0 ){
$.ajax({
type:"post",
dataType:"json",
url:"/missions/comments.json",
data:{
"mission_id":mission_id,
"content":comment_content
},
async:false,// 强制同步
statusCode: {
200: function(rpstr) {// 请求成功
var data=rpstr.data;
if(rpstr.code=="0"){
alert("评论成功!");
$('#myModal').modal('hide');
setTimeout("showTaskDetail("+mission_id+")", 500);
2017-01-02 16:14:17 +08:00
}
else{
alert("服务器内部出错啦!");
}
},
401:function(){// 未授权
// TODO
}
}
});
}else{
alert("请输入完整!");
}
}
2017-01-01 16:31:47 +08:00
</script>
2016-12-08 10:10:37 +08:00
</body>
</html>