会议室预约系统

前言

近期为公司内部开发了一个会议室预约的小工具，作用是可以显示某一时间段的预约信息，并且对预约信息进行增删改查。其中，前端使用html、css 以及原生js,后端使用Servlet,Tomcat以及Highgo Database。以下是整个的设计、开发的过程。

一 、绘制表格

1.表头

行：表头为一周的时间，周一至周日

列：表头为早八点到下午六点半，每半个小时为一个可预约的时间段。

2.绘制表格

设置单元格id 为“_”+行号+“—”+列号形式，其中行号、列号都从1开始。

function createTable() {
    
  var div = document.getElementById("tableContainer");
  var timeArr = ['08:00-08:30','08:30-09:00','09:00-09:30','09:30-10:00','10:00- 
                   10:30','10:30-11:00','11:00-11:30','13:00-13:30','13:30-14:00','14:00- 
                   14:30','14:30-15:00','15:00-15:30','15:30-16:00','16:00- 
                   16:30','16:30-17:00','17:00-17:30','17:30-18:00','18:00-18:30'];
  var result = '';
  result+= "<table id='table'>";

  result += '<tr id = "title">'
        + '<th>'
        + '<div class="head-div">'
        + '<div class="head-date">日期</div>'
        + '<div class="head-time">时间</div>'
        + '</div>'
        + '</th>'
        + '<th></th>'
        + '<th></th>'
        + '<th></th>'
        + '<th></th>'
        + '<th></th>'
        + '<th></th>'
        + '<th></th>'
        + '</tr>';

  for(var i=0; i<timeArr.length;i++) {
        result += "<tr>";
        result +='<td>'+ timeArr[i]+ '</td>';

        for(var j=0;j<7;j++) {
            var a = '_'+ (i+1)+'-'+(j+1);
        result+='<td id = "'+a+' onclick="cellOnclick(this)" 
                  ondblclick="celldbClick(this)" onmouseover="cellOver(this)" 
                  onmouseout = "cellMove(this)"></td>';
        }

        result +="</tr>";

    }
  
  result+="</table>";

  div.innerHTML = result;

}

3.显示一周时间

时间格式为星期+日期，setDate(date)设置日期，addDate(date,n)方法使日期一次增加，其中,date为当日日期，n为增加的天数。formatDate(date)来规定日期显示的格式，因为date.getDate()返回的天数值如果小于10则不补零，不符合日期的标准格式，因此，天数值小于10要补零。

后因需求变更，需要将可选择时间段放置在标题栏附近，显示从上周开始共计五周的时间，此时间不带年份，因此将formatDate(date)方法优化为可以带年份也可以不带年份的format(date,flag),如果日期格式为年、月、日形式，将flag设为true,如果日期格式为月、日，将flag设为false.

 function setDate(date) {

       if(localStorage.getItem("current") == "current") {
        
           date = addDate(date,0);
       }

       if(localStorage.getItem("last") == "last") {
           
           date = addDate(date,-7);

       }

       if(localStorage.getItem("next") == "next") {
          
           date = addDate(date,7);
       }
       if(localStorage.getItem("three") == "three") {
          
           date = addDate(date,14);

       }

       if(localStorage.getItem("four") == "four") {

           date = addDate(date,21);

       }

       // set one week time

       var currentDay = date.getDay();
       if(currentDay == 0) {
           date = addDate(date,-7);
       }else{
           date = addDate(date,(-currentDay));
       }


        for(var i=1;i<cellLength;i++) {

            cells[i].innerHTML =  formatDate(addDate(date,1),true);

        }
    };

function addDate(date,n) {
    date.setDate(date.getDate() + n);
    return date;
};

function formatDate(date,flag) {

    var year = date.getFullYear()+'.';
    var month = (date.getMonth()+1)+'.';
    var day = date.getDate();
    
    if(day<10){
        day = '0'+ day;
    }
    
    if(flag) {
        var week =date.getDay();
        switch (week) {
            case 0:
                week="星期日";
                break;
            case 1 :
                week="星期一";
                break;
            case 2 :
                week="星期二";
                break;
            case 3 :
                week="星期三";
                break;
            case 4 :
                week="星期四";
                break;
            case 5 :
                week="星期五";
                break;
            case 6:
                week="星期六";
                break;
        }
        return week + '</br>' + year + month + day;
    } else {
        var days = month + day;
        return days;
    }
};

二、预约信息表格设计

因为页面主要以表格为主，且表格所占空间比较大，因此预约时所需填写的内容以弹窗形式展示，双击表格可以进行预约信息的增删改。预约信息为：会议时间，会议主题，参会人数，预约人，设备，招待，备注。

1. 会议时间：开始时间为所选单元格的开始时间，结束时间可选

2