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>