jollyKuma
6/26/2017 - 6:31 AM
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"></script>
<style>
.border-dashed {
border-left: 2px dashed #ddd !important;
}
.border-solid {
border-right: 1px solid #555 !important;
}
.w-30 {
width: 30px !important;
}
.w-5 {
width: 5% !important;
}
.bg-orange {
background-color: #FDD692;
}
.bg-red {
background-color: #EE7785;
}
</style>
</head>
<body>
<div class="container">
<h2>Negotiation Management</h2>
<table id="dicker_table" class="table table-bordered negotiationManagementTable">
<thead>
<td class="w-30"></td>
<td class="w-30">10:00 ~ 10:20</td>
<td class="w-5 border-dashed"></td>
<td class="w-30">10:30 ~ 10:50</td>
<td class="w-5 border-dashed"></td>
<td class="w-30">11:00 ~ 11:20</td>
<td class="w-5 border-dashed"></td>
</thead>
<tr class="occupied_dicker">
<td>Occupied Dicker</td>
<td>1</td>
<td class=" border-dashed"></td>
<td>1</td>
<td class=" border-dashed"></td>
<td>2</td>
<td class=" border-dashed"></td>
</tr>
<tr class="vacant_dicker">
<td>Vacant Dicker</td>
<td>1</td>
<td class=" border-dashed"></td>
<td>1</td>
<td class=" border-dashed"></td>
<td>2</td>
<td class=" border-dashed"></td>
</tr>
<tr class="duplicate_dicker">
<td>Duplicated Dicker</td>
<td>0</td>
<td class=" border-dashed"></td>
<td>0</td>
<td class=" border-dashed"></td>
<td>2</td>
<td class=" border-dashed"></td>
</tr>
<!---This will create the bottom row-->
<tr class="entry-company-cell">
<td rowspan="2" class="text-center">DickerBooth 001</td>
<td class="bg-red">Company 1</td>
<td class=" border-dashed bg-red">売</td>
<td class=""></td>
<td class=" border-dashed"></td>
<td class="bg-orange">Company 3</td>
<td class=" border-dashed bg-orange">買</td>
</tr>
<tr class="receive-company-cell">
<td class="bg-red">Company 4</td>
<td class=" border-dashed bg-red">買</td>
<td class=""></td>
<td class=" border-dashed"></td>
<td class="bg-orange">Company 6</td>
<td class=" border-dashed bg-orange">売</td>
</tr>
<!--End Create-->
<tr class="entry-company-cell">
<td rowspan="2" class="text-center">DickerBooth 002</td>
<td class=""></td>
<td class=" border-dashed"></td>
<td class="bg-orange">Company 1</td>
<td class=" border-dashed bg-orange">買</td>
<td class="bg-red">Company 2</td>
<td class=" border-dashed bg-red">売</td>
</tr>
<tr class="receive-company-cell">
<td class=""></td>
<td class=" border-dashed"></td>
<td class="bg-orange">Company 6</td>
<td class=" border-dashed bg-orange">売</td>
<td class="bg-red">Company 4</td>
<td class=" border-dashed bg-red">買</td>
</tr>
</table>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>
var spareBooth = {vars: {}} ;
var data = [
{
"id": 39,
"dicker_booth_id": 13,
"dicker_booth_name": "Spare Booth 1",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "10:00 ~ 10:20",
"entry_company_id": 3,
"entry_company_name": "IAOY",
"receive_company_id": 1,
"receive_company_name": "Sprobe",
"need_id": 1,
"need_name": "売",
"interested_need_id": 2,
"interested_need_name": "買",
"status": 0
},
{
"id": 40,
"dicker_booth_id": 14,
"dicker_booth_name": "spare Booth 2",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:40:00",
"time": "10:40 ~ 11:00",
"entry_company_id": 2,
"entry_company_name": "Hakuten",
"receive_company_id": 3,
"receive_company_name": "IAOY",
"need_id": 1,
"need_name": "売",
"interested_need_id": 2,
"interested_need_name": "買",
"status": 0
},
{
"id": 41,
"dicker_booth_id": 15,
"dicker_booth_name": "spare booth 3",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "10:00 ~ 10:20",
"entry_company_id": 2,
"entry_company_name": "Hakuten",
"receive_company_id": 1,
"receive_company_name": "Sprobe",
"need_id": 1,
"need_name": "売",
"interested_need_id": 2,
"interested_need_name": "買",
"status": 0
},
{
"id": 41,
"dicker_booth_id": 16,
"dicker_booth_name": "spare booth 4",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "10:50 ~ 11:00",
"entry_company_id": 3,
"entry_company_name": "Sprasia",
"receive_company_id": 2,
"receive_company_name": "Hakuten",
"need_id": 2,
"need_name": "買売",
"interested_need_id": 1,
"interested_need_name": "売",
"status": 0
},
{
"id": 42,
"dicker_booth_id": 17,
"dicker_booth_name": "spare booth 5",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "10:50 ~ 11:00",
"entry_company_id": 3,
"entry_company_name": "IACT",
"receive_company_id": 2,
"receive_company_name": "Hakuten Japan",
"need_id": 2,
"need_name": "買",
"interested_need_id": 1,
"interested_need_name": "売",
"status": 0
},
{
"id": 43,
"dicker_booth_id": 18,
"dicker_booth_name": "spare booth 6",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "10:00 ~ 10:20",
"entry_company_id": 3,
"entry_company_name": "IOAY",
"receive_company_id": 2,
"receive_company_name": "SOLXYS",
"need_id": 2,
"need_name": "買",
"interested_need_id": 1,
"interested_need_name": "売",
"status": 0
},
{
"id": 44,
"dicker_booth_id": 19,
"dicker_booth_name": "spare booth 7",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "10:00 ~ 10:20",
"entry_company_id": 3,
"entry_company_name": "IOAY",
"receive_company_id": 2,
"receive_company_name": "Hakuten",
"need_id": 2,
"need_name": "買",
"interested_need_id": 1,
"interested_need_name": "売",
"status": 0
}, {
"id": 45,
"dicker_booth_id": 20,
"dicker_booth_name": "spare booth 8",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "11:00 ~ 11:20",
"entry_company_id": 3,
"entry_company_name": "Sprobe",
"receive_company_id": 2,
"receive_company_name": "IAOY",
"need_id": 2,
"need_name": "買",
"interested_need_id": 1,
"interested_need_name": "売",
"status": 0
}, {
"id": 46,
"dicker_booth_id": 20,
"dicker_booth_name": "spare booth 9",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "12:00 ~ 12:20",
"entry_company_id": 3,
"entry_company_name": "Sprobe",
"receive_company_id": 2,
"receive_company_name": "Hakuten Japan",
"need_id": 2,
"need_name": "買",
"interested_need_id": 1,
"interested_need_name": "売",
"status": 0
}, {
"id": 47,
"dicker_booth_id": 21,
"dicker_booth_name": "spare booth 10",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "12:00 ~ 12:20",
"entry_company_id": 3,
"entry_company_name": "Sprasia",
"receive_company_id": 2,
"receive_company_name": "Coco Movie",
"need_id": 2,
"need_name": "買",
"interested_need_id": 1,
"interested_need_name": "売",
"status": 0
}, {
"id": 48,
"dicker_booth_id": 13,
"dicker_booth_name": "Spare Booth 11",
"reserve_flag": 1,
"meeting_frame_date": "2017-03-06 10:00:00",
"time": "1:00 ~ 1:20",
"entry_company_id": 3,
"entry_company_name": "IAOY",
"receive_company_id": 1,
"receive_company_name": "Sprobe",
"need_id": 1,
"need_name": "売",
"interested_need_id": 2,
"interested_need_name": "買",
"status": 0
},
];
var dicker_table = $('#dicker_table');
$.ajax({
type: 'GET',
// url: spareBooth.vars.get_spareBooth_url,
url:'http://localhost:3000/data',
data: data,
dataType: 'json',
success: function (data, textStatus, xhr) {
if(data.length !== 0){
generateTimeCells(data);
generateDickerBodyCells(data);
generateDickerCounts();
}
},
error: function (xhr, textStatus, errorThrown) {
console.log('no data')
}
});
function generateTimeCells(data) {
var time = '';
var spareBoothSched = [];
var spareBoothSchedCopy = []
spareBooth.vars.spareBooths = data ;
$.each(spareBooth.vars.spareBooths, function (key, value) {
time = value['time'];
spareBoothSched.push(time);
});
console.log(data);
var uniqueTime = _.uniq(spareBoothSched);
console.log(uniqueTime);
$.map(uniqueTime, function(value) {
var $schedCell = $('<td class="w-30 negotiationManagementTable-border-left border-solid font-bold">'+ value+'</td>' +
'<td class="w-5 border-dashed negotiationManagementTable-border-left-dashed "></td>');
$('.negotiationManagementTable thead>tr :last-child').after($schedCell);
});
}
function generateDickerCounts() {
var theadSize = dicker_table.children('thead').children('tr').children('td').length;
var occupiedDickerLength = dicker_table.children('tbody').children('.occupied_dicker').children('td').length;
var addOccupiedCell = theadSize - occupiedDickerLength;
for(var i = 0 ; i < addOccupiedCell; i++ ) {
var emptyOccupiedTd = $('<td>0</td>');
$('.occupied_dicker td:last-child').after(emptyOccupiedTd);
$('.occupied_dicker td:even:not(:first-child)').addClass('border-dashed');
$('.occupied_dicker td:nth-child(2n+8)').prev().empty();
}
for(var i = 0 ; i < addOccupiedCell; i++ ) {
var emptyOccupiedTd = $('<td>0</td>');
$('.vacant_dicker td:last-child').after(emptyOccupiedTd);
$('.vacant_dicker td:even:not(:first-child)').addClass('border-dashed');
}
for(var i = 0 ; i < addOccupiedCell; i++ ) {
var emptyOccupiedTd = $('<td>0</td>');
$('.duplicate_dicker td:last-child').after(emptyOccupiedTd);
$('.duplicate_dicker td:even:not(:first-child)').addClass('border-dashed');
}
}
function generateDickerBodyCells() {
var $dickerNameCellAppend = [];
var dicker_name_count = [];
var $dickerNameCell;
$.each(spareBooth.vars.spareBooths, function (key, value) {
var dicker_name = value['dicker_booth_name'];
var dicker_entry_company = value['entry_company_name'];
var dicker_interested_need = value['interested_need_name'];
var dicker_need = value['need_name'];
var dicker_receive_company = value['receive_company_name'];
var reserve_flag = value['reserve_flag'];
dicker_name_count.push(dicker_name);
$dickerNameCell = $('<tr class="entryCompanyRow"></tr>');
$dickerReceiveCell = $('<tr class="entryCompanyRow"></tr>');
var $dickerEntryCompanyCell = $('<td class="w-30 negotiationManagementTable-border-left text-center">'+ dicker_entry_company+'</td>');
var $dickerReceiveCompanyCell = $('<td class="w-30 negotiationManagementTable-border-left text-center">'+ dicker_receive_company+'</td>');
var $dickerInterestedNeedCell = $('<td class="w-5 border-dashed negotiationManagementTable-border-left-dashed font-bold text-center dropdown negotiation-dropdown-need">'+ dicker_interested_need+'</td>');
var $dickerNeedCell = $('<td class="w-5 border-dashed negotiationManagementTable-border-left-dashed font-bold text-center dropdown negotiation-dropdown-need">'+ dicker_need+'</td>');
$('<td rowspan="2" class="w-30 negotiationManagementTable-border-left text-center"></td>').text(dicker_name).appendTo($dickerNameCell);
$dickerEntryCompanyCell.appendTo($dickerNameCell);
$dickerInterestedNeedCell.appendTo($dickerNameCell);
$dickerReceiveCompanyCell.appendTo($dickerReceiveCell);
$dickerNeedCell.appendTo($dickerReceiveCell);
var background = reserve_flag == 1 ? 'bg-orange' : 'bg-red';
$dickerEntryCompanyCell.addClass(background);
$dickerReceiveCompanyCell.addClass(background);
$dickerInterestedNeedCell.addClass(background);
$dickerNeedCell.addClass(background);
$('.negotiationManagementTable').append($dickerNameCell);
$('.negotiationManagementTable tbody>tr:last-child').after($dickerReceiveCell);
});
}
</script>
</body>
</html>