root/src/domogik/ui/djangodomo/core/templates/admin/organization/rooms.html @ 1445:5027c8aa48c1

{% extends "layout_admin.html" %}
{% comment %}
# Copyright 2008 Domogik project

# This file is part of Domogik.
# Domogik is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# Domogik is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.

# You should have received a copy of the GNU General Public License
# along with Domogik.  If not, see
<http://www.gnu.org/licenses/>
.

# Author : Cédric Trévisan <cedric@domogik.org> {% endcomment %}


{% load i18n %}
{% block css %}
    <link href="/design/{{ request.session.user.skin_used|default:'skins/default' }}/css/page-admin-organization.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block js_include %}
{% endblock %}
{% block js_script %}
    $(function(){
        // Accordion
        $("#nav2").accordion({ autoHeight: false, header: ".subnav2", active:0});
        
        $("#tabs").tabs().domogik_tabs({
            addTitle: "{% trans "Add new room" %}",
            addId: "addDialogButton"
        });
        
        /* Tooltips */
        $('.buttonside[title], .add').tooltip_left();
        $('#help_dragdrop').tooltip_content_right({            
            content: '<h3>Mouse usage</h3><h3>Keyboard usage</h3><ul><li>Use the <kbd>Tab</kbd> to move to the room you want to organize.</li><li>Select the room you want to move with the <kbd>Spacebar</kbd>.</li><li>Use the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to select a area in the context menu.</li><li>Press <kbd>Enter</kbd> to move the room to the area.</li></ul>'
        });
        
        /* Drag & Drop */
        $('#dragdroprooms').dragdrop({
            dropcallback: function(self, element, target) {
                getREST('/base/room/update/id/' + element + '/area_id/' + target,
                    function(data) {
                        var status = (data.status).toLowerCase();
                        if (status == 'ok') {
                            self.valid();
                        } else {
                            self.cancel();
                            display_message('error', data.description);                                          
                        }
                    }
                )
            }
        });
        
        /* Dialogs */
        $('#delete_confirmation').dialog_confirmation({
            title: "{% trans 'Delete' %}",
            content: "{% trans "Please confirm to delete" %}"
        });
        
        $('#roomdialog').dialog_form({
            tips: "{% trans "All fields are required." %}",
            tipsid: 'tipsRoom',
            fields: [
                {name : 'roomname', type:'text', label:'Name', required: true, option: {min: 1, max: 80}},
                {name : 'roomdescription', type:'text', label:'Description', required: true, option: {min: 1, max: 80}}
            ]
        });
        
        /* Add a function to create an room */
        $('#roomdialog').dialog_form('addbutton', {
            title: "{% trans "Create new room" %}",
            button: "#addDialogButton",
            onok: function(values) {
                // Submit form
                getREST('/base/room/add/name/' + values.roomname + '/description/' + values.roomdescription,
                    function(data) {
                        var status = (data.status).toLowerCase();
                        if (status == 'ok') {
                            $.reloadPage({'status': 'ok', 'msg': '{% trans "Success" %} : {% trans "New room added" %} \'' + data.room[0].name + '\''});                                   
                        } else {
                            $.reloadPage({'status': 'error', 'msg': '{% trans "Error" %} : {% trans "Room not created" %} (' + data.description + ')'});                                                                      
                        }
                    }
                );
            }
        });
    });

{% endblock %}

{% block title %}{% trans page_title %}{% endblock %}

{% block banner %}
        <div class="section">
            <h1 class="ident"><span class="title">{% trans "Rooms" %}</span></h1>
            {% ifnotequal status "" %}
            <div id='messages' class='{{status}}'>{{msg}}</div>
            {% endifnotequal %}
            <ul class="actions"></ul>
        </div>
{% endblock %}

{% block right %}
    <div class="subsection">
        <h2>{% trans "Rooms list" %}</h2>
        <div id="tabs">
            {% spaceless %}
                <ul>
                    {% for room in rooms_list %}
                        <li><a id="tab{{ room.id }}" href="#element{{ room.id }}" class="icon16-room-{{ room.config.icon }}">{{ room.name }}</a></li>
                    {% endfor %}
                </ul>
            {% endspaceless %}
            {% for room in rooms_list %}
            <div id="element{{ room.id }}" class="tabelement">
                <script type="text/javascript">
                    // <![CDATA[
                    $(function(){
                        /* Add a function to delete the current room */
                        $('#delete_confirmation').dialog_confirmation('addbutton', {
                            button: "#del{{ room.id }}",
                            name: "'{{ room.name }}'",
                            onok: function() {
                                getREST('/base/room/del/{{ room.id }}',
                                    function(data) {
                                        var status = (data.status).toLowerCase();
                                        if (status == 'ok') {
                                            $.reloadPage({'status': 'ok', 'msg': '{% trans "Success" %} : {% trans "Room" %} \'' + data.room[0].name + '\' {% trans "successfully deleted" %}'});                                   
                                        } else {
                                            $.reloadPage({'status': 'error', 'msg': '{% trans "Error" %} : {% trans "Room not deleted" %} (' + data.description + ')'});                                                                      
                                        }
                                    }
                                );
                            }
                        });
                        
                        $('#icon{{ room.id }}').editable_icon({
                            type: "room",
                            list: room_icons,
                            icon: "{{ room.config.icon }}",
                            validCallback: function(self, icon) {
                                $('#icon{{ room.id }}').processing('start');
                                getREST('/base/ui_config/set/name/room/reference/{{ room.id }}/key/icon/value/' + icon,
                                    function(data) {
                                        $('#icon{{ room.id }}').processing('stop');
                                        var status = (data.status).toLowerCase();
                                        if (status == 'ok') {
                                            self.valid();
                                            $("#tab{{ room.id }}").removeClass();
                                            $("#tab{{ room.id }}").addClass("icon16-room-" + icon);
                                        } else {
                                            self.cancel();
                                            display_message('error', data.description);                                          
                                        }
                                    }
                                )
                            }
                        });
                        
                        $( "#icon{{ room.id }}").processing();
                        
                        /* Add a function to update an room */
                        $('#roomdialog').dialog_form('updbutton', {
                            title: "{% trans "Update room" %} '{{ room.name }}'",
                            button: "#update{{ room.id }}",
                            values: {roomname : '{{ room.name }}', roomdescription : '{{ room.description }}'},
                            onok: function(values) {
                                // Submit form
                                getREST('/base/room/update/id/' + {{ area.id }} + '/name/' + values.areaname + '/description/' + values.areadescription,
                                    function(data) {
                                        var status = (data.status).toLowerCase();
                                        if (status == 'ok') {
                                            $.reloadPage({'status': 'ok', 'msg': '{% trans "Success" %} : {% trans "Room" %} \'' + data.room[0].name + '\' {% trans "successfully updated" %}'});                                   
                                        } else {
                                            $.reloadPage({'status': 'error', 'msg': '{% trans "Error" %} : {% trans "Room not updated" %} (' + data.description + ')'});                                                                      
                                        }
                                    }
                                );
                            }
                        });
                        
                    });
                    // ]]>
                </script>
                <ul class="actions">
                    <li><button id='del{{ room.id }}' class='icon16-action-del buttonside' title="{% trans "Delete" %} '{{ room.name }}'"><span class='offscreen'>{% trans "Delete" %} {{ room.name }}</span></button></li>
                    <li><button id="update{{ room.id }}" class="icon16-action-update buttonside" title="{% trans "Modify" %} '{{ room.name }}'"><span class='offscreen'>{% trans "Modify" %} {{ room.name }}</span></button></li>
                </ul>
                <div class="content">
                    <div id="icon{{ room.id }}"></div>
                    <h2 id="zone{{ room.id }}h">{{ room.name }}</h2>
                    <p>{{ room.description }}</p>

                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <div id="roomdialog"></div>
    <div id="delete_confirmation"></div>
    
    <div class="subsection" id="dragdroprooms">
        <h2 class='help' id='help_dragdrop'>{% trans "Rooms organisation" %} <span class='offscreen'>{% trans "Drag &amp; Drop instructions" %}</span></h2>
        <fieldset class="targetdrop">
            <legend class="choice">{% trans "Unattributed rooms" %}</legend>
            <ul class="draggables" value="None">
                {% for room in unattribued_rooms %}
                <li class="draggable icon32-room-{{ room.config.icon }}" value="{{ room.id }}">{{ room.name }}<span class="description">{{ room.description }}</span></li>
                {% empty %}
                <li class="empty">{% trans "Empty" %}</li>
                {% endfor %}
            </ul>
        </fieldset>
        {% for area in areas_list %}
        <fieldset class="targetdrop">
            <legend class="choice icon16-area-{{ area.config.icon }}">{{ area.name }}</legend>
            <ul class="draggables" value='{{ area.id }}'>
                {% for room in area.room %}
                <li class="draggable icon32-room-{{ room.config.icon }}" value="{{ room.id }}">{{ room.name }}<span class="description">{{ room.description }}</span></li>
                {% empty %}
                <li class="empty">{% trans "Empty" %}</li>
                {% endfor %}
            </ul>
        </fieldset>
        {% endfor %}
    </div>
{% endblock %}