会议室预定功能

1，当选择一个时间，然后点击提交按钮，就会发送一个基于form表单的post请求，会把时间发过去然后，返回的页面就是刚才选择日期的会议室预定情况

2，点击空白小格子时，颜色会变浅绿，

3，点击被预定的小格子时，当名字是自己的名字时，会使颜色消失，变成白色小格子，然后把房间号和时间段放入删除列表；当点击的名字不是自己时，会弹出警告框，不能对其进行操作

4，点击保存按钮时，会把所有的浅绿的小格子的房间号和时间段放入添加列表；然后发送ajax请求，把添加列表和删除列表发送到后端处理

5，后端拿到数据，先对删除列表，把要删除的删除；然后再处理添加列表，把该添加的添加上

class UserInfo（models.Model）:       #这是user表
　　pass

class House(models.Model):          #这是房间表
    '''会议室表'''
    name=models.CharField(max_length=5)
    size=models.CharField(max_length=5)

    def __str__(self):
        return self.name

times=((1, '09:00-10:00'), (2, '10:00-11:00'), (3, '11:00-12:00'), (4, '12:00-13:00'),
        (5, '13:00-14:00'), (6, '14:00-15:00'), (7, '15:00-16:00'), (8, '16:00-17:00'),
        (9, '17:00-18:00'), (10, '18:00-19:00'), (11, '19:00-20:00'),(12, '20:00-21:00'))
class Order(models.Model):            #这是会议室预定记录表
    '''会议室预定记录表'''
    date=models.DateField()
    user=models.ForeignKey(to='UserInfo',on_delete=models.CASCADE)
    house=models.ForeignKey(to='House',on_delete=models.CASCADE)
    time = models.IntegerField(choices=times)
    class Meta:
        unique_together = ("date", "house", 'time')          #这是联合唯一，

{% extends 'base.html' %}
{% block css %}
    <style>
        .outer{
            width: 100%;
            height: 40px;
            background-color: #337ab7;
            color: white;
            line-height: 40px;
        }

        .left{
            float: left;
            margin-top: 10px;
            margin-left: 10px;
            color: black;
            height: 20px;
        }
        #title{
            float: right;
            margin-right: 500px;
            font-size: 20px;
        }
        #date{
            float: left;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="outer">
            <div id="date">          #这是日期
                <form action="/houseorder/" method="post">
                {% csrf_token %}
                <div>                        
                    <input type="submit" style="color: black;height: 20px;margin-top: 10px;line-height: 20px">
                    <input type="date" name="time" class="left" value="{{ date }}">
                </div>
                </form>
            </div>
            <div id="title">会议室预定表</div>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>会议室</th>
                    {% for choice in choices %}   #这是循环生产时间的信息，也就是表头
                        <th>{{ choice.1 }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {{ data }}         #所有的表体数据都是由后端构造的
            </tbody>
        </table>
        <button class="btn btn-info tijiao">保存</button>
    </div>

{% endblock %}
{% block script %}
    <script>
        var add_dic={};
        var del_dic={};
        //给每个nn类的标签绑定点击事件
        $('.nn').click(function () {
            var text=$(this).text();
            var user=$('.user').attr('id');
            console.log(user);
            var num=$(this).children('span').first().attr('class');
            var name=$(this).parent().attr('class');
            //已经被别人选中的
            if ($(this).hasClass('warning')){
                alert('别人已经选定')
            }
            //被自己选中的
            else if ($(this).hasClass('danger')){
                $(this).removeClass('danger');
                $(this).children('span').text('');
                if (del_dic[name]){
                    del_dic[name].push(num)}
                else {del_dic[name]=[num]}
            }
            //刚才被点中的，再次点击，取消颜色
            else if($(this).hasClass('success')){
                $(this).removeClass('success');
            }
            //没被选中的，点击变颜色
            else {
                $(this).addClass('success');
            }
        });
        //保存的点击事件
        $('.tijiao').click(function () {
            //循环所有的td标签，然后把拥有success类的标签的值放入add_dic
            $('td').each(function () {
                var num=$(this).children('span').first().attr('class');
                var name=$(this).parent().attr('class');
                if($(this).hasClass('success')){
                    if (add_dic[name]){
                        add_dic[name].push(num)}
                    else {add_dic[name]=[num]}
                }});
            //把add_dic，not_add_dic加入一个列表中，最后把当前选择的日期也放进去
            var date=$('.left').first().val();
            //用ajax请求，把列表发送到后端
            $.ajax({
                url:'',
                type:'post',
                data: {'add_dic':JSON.stringify(add_dic),'del_dic':JSON.stringify(del_dic),'date':JSON.stringify(date),'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()},
                success: function (res) {
                    console.log(res);
                    location.href='/houseorder/?time='+res
                }
            })
        })
    </script>
{% endblock %}

def houseorder(request):
    date = request.GET.get('time')
    now = time.strftime('%Y-%m-%d', time.localtime(time.time()))
    if request.is_ajax():                #这是对ajax请求的处理
        add_dic = json.loads(request.POST.get('add_dic'))
        del_dic = json.loads(request.POST.get('del_dic'))
        date = json.loads(request.POST.get('date'))
        date =date or now
        if del_dic:                   #拿到要删除的字典，然后删除
            for key, value in del_dic.items():
                for ele in value:
                    Order.objects.filter(date=date, user_id=request.user.id, house_id=int(key),
                                         time=int(ele)).delete()
        if add_dic:                   #这是拿到添加的字典，然后添加
            for key, value in add_dic.items():
                for i in value:
                    Order.objects.create(date=date, user_id=request.user.id, house_id=int(key), time=int(i))
        return HttpResponse(date)
    #点击日历提交的post请求
    if request.method == 'POST':
        date = request.POST.get('time')
　　这是构建页面需要的数据，比如说表体。。。
    date=date or now
    username = request.user.name
    orders = Order.objects.filter(date=date)
    houses = House.objects.all()
    choices = times
    data_list = []
    for house in houses:      #这就是构建表体数据
        data_list.append(mark_safe('<tr class="%s"><td>%s(%s)</td>' % (house.id, house.name, house.size)))
        for choice in choices:
            for order in orders:
                if order.house.id == house.id and choice[0] == order.time:
                    if username==order.user.name:
                        tt = mark_safe('<td class="nn danger"><span class="%s">%s</span></td>' % (choice[0], order.user.name))
                        break
                    else:
                        tt = mark_safe('<td class="nn warning"><span class="%s">%s</span></td>' % (choice[0], order.user.name))
                        break
            else:
                tt =mark_safe( '<td class="nn"><span class="%s"></span></td>' % choice[0])
            data_list.append(tt)
        data_list.append('</tr>')
    data = mark_safe(''.join(data_list))
    return render(request, 'houseorder.html', locals())