ambition/public/pages/task.html

655 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
.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">
<h3 class="box-title">未开始</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" onclick="mission_create(1)"><i class="fa fa-plus"></i></button>
</div>
</div>
<!-- /.box-header -->
<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">
<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">
<h3 class="box-title">进行中</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" onclick="mission_create(2)"><i class="fa fa-plus"></i></button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body" id="container_2">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">已完成</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" onclick="mission_create(3)"><i class="fa fa-plus"></i></button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body" id="container_3">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">已测试</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" onclick="mission_create(4)"><i class="fa fa-plus"></i></button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body" id="container_4">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- row -->
<!-- 模态框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;">
<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 -->
<div class="box-body">
<strong><i class="fa fa-book margin-r-5"></i>任务名称</strong>
<p class="text-muted" id="mission_task_name">
</p>
<hr>
<strong><i class="fa fa-tasks margin-r-5"></i>任务内容</strong>
<p class="text-muted" id="mission_task_content"></p>
<hr>
<strong><i class="fa fa-calendar margin-r-5"></i>截止时间</strong> <span id="mission_task_deadline"></span>
<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>
<hr>
<strong><i class="fa fa-file-text-o margin-r-5"></i>参与人员</strong>
<p id="mission_task_users">
</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">
</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">
<span class="input-group-btn">
<button type="button" class="btn btn-primary btn-flat" onclick="publish_comment()">提交评论</button>
</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()">
修改
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<!-- 模态框Modal -->
</div>
<!-- 更新和创建共用模态框 -->
<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;">
<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="输入任务名称">
</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>
</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="输入截止时间">
</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="">
普通
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="mission_edit_priority" value="2">
紧急
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="mission_edit_priority" value="3">
非常紧急
</label>
</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">
</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">
提交
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</section>
<!-- content section -->
</div>
<!-- content-wrapper -->
</div>
<!-- ./wrapper -->
<center><strong>Copyright &copy; 2016 <a href="#">Ambition Inc.</a>.</strong> All rights reserved.</center>
<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>
<!-- 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 -->
<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("请输入完整!");
}
});
$(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");
$.ajax({
type:"GET",
dataType:"json",
url:"/missions.json",
data:{
"project_id":parent.LoginUserInfo.selectProject,
"status_type":type
},
statusCode: {
200: function(rpstr) {// 请求成功
var color = ["","#d2d6de","#dd4b39","#00a65a","#00c0ef"];
if(rpstr.code=="0"){
var data=rpstr.data;
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);// 保存在页面,以便评论使用
//修改模态框
$.ajax({
type:"GET",
dataType:"json",
url:"/missions/detail.json",
async:false,
data:{
"id":mission_id
},
statusCode: {
200: function(rpstr) {// 请求成功
if(rpstr.code=="0"){
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");
}
var name_list_str = "";
for(var i=0; i < data.users.length; ++i){
if(i != 0){
name_list_str+=','
}
name_list_str += data.users[i];
}
$("#mission_task_users").html(name_list_str);
$("#mission_comments_container").html("");
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);
}
// 初始化修改页面
$("#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');
}
else{
//todo
}
},
401:function(){// 未授权
alert("未登录!");
}
}
});
//显示模态框
$("#show_modal").click();
}
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);
}
else{
alert("服务器内部出错啦!");
}
},
401:function(){// 未授权
// TODO
}
}
});
}else{
alert("请输入完整!");
}
}
</script>
</body>
</html>