Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 7d311ba1

History | View | Annotate | Download (7.4 kB)

1 
{% load i18n %}
2 
<!DOCTYPE html>
3 
<head>
4 
        <title>{{ project }}</title>
5 
        <!-- include the Tools -->
6 
        <script src="static/jquery.tools.min.js"></script>
7 
    <script src="static/jquery.cookie.js"></script>
8 
    <script src="static/jQueryRotate.js"></script>
9 
    <script src="static/jquery.dataTables.min.js"></script>
10 
    <script src="static/synnefo.js"></script>
11 
        <link rel="stylesheet" type="text/css" href="static/main.css"/>
12 
    <script>
13 
        // timeout value from settings.py
14 
        var TIMEOUT = {{timeout}};
15 
        var UPDATE_INTERVAL = {{5000}};
16 
        var STATUS_MESSAGES = {
17 
            'BUILD'     : '{% trans "Building" %}',
18 
            'REBOOT'     : '{% trans "Rebooting" %}',
19 
            'STOPPED'   : '{% trans "Stopped" %}',
20 
            'ACTIVE'   : '{% trans "Running" %}',
21 
            'ERROR'   : '{% trans "Error" %}'
22 
        };
23
24 
        var ERRORS = {
25 
            // error message header
26 
            'header' : '{% trans "Error!" %}',
27 
            // default
28 
            'default' : '{% trans "Could not contact the service. Please check your network connectivity and try again." %}',
29 
            // bad request
30 
            '400' : '{% trans "Malformed request." %}',
31 
            // not found
32 
            '404' : '{% trans "Your request has failed. Resource not found." %}',
33 
            // internal server error
34 
            '501' : '{% trans "There has been an Internal Error. Our administrators have been notified." %}',
35 
            // no images unavailable
36 
            // service unavailable
37 
            '503' : '{% trans "This service is unavailable right now, please try again later." %}'
38 
            'no_images' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
39 
            // no images unavailable
40 
            'no_flavors' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}',
41 
        };
42
43 
        var SUCCESS = {
44 
            'header' : '{% trans "Success!" %}',
45 
            'default' : '{% trans "Your request has been succefully executed." %}',
46 
        };
47
48 
        // ajax error checking
49 
        function ajax_error(jqXHR) {
50 
            // prepare the error message
51 
            $("#error-success h3").text(ERRORS['header']);
52
53 
            if (ERRORS[jqXHR.status]) {
54 
                $("#error-success p").text(ERRORS[jqXHR.status]);
55 
            } else {
56 
                $("#error-success p").text(ERRORS['default']);
57 
            }
58
59 
            // bring up error notification
60 
            var triggers = $("a#notification").overlay({
61 
                // some mask tweaks suitable for modal dialogs
62 
                mask: {
63 
                    color: '#ebecff',
64 
                    opacity: '0.9'
65 
                },
66 
                top: 'center',
67 
                closeOnClick: false,
68 
                oneInstance: false,
69 
                load: false,
70 
                onClose: function(){
71 
                    // With partial refresh working properly,
72 
                    // it is no longer necessary to refresh the whole page
73 
                    // choose_view();
74 
                }
75 
            });
76 
            $("a#notification").data('overlay').load();
77 
            return false;
78 
        }
79
80 
        // ajax success checking
81 
        function ajax_success() {
82 
            // prepare the error message
83 
            $("#error-success h3").text(SUCCESS['header']);
84 
            $("#error-success p").text(SUCCESS['default']);
85 
            // bring up success notification
86 
            var triggers = $("a#notification").overlay({
87 
                // some mask tweaks suitable for modal dialogs
88 
                mask: {
89 
                    color: '#ebecff',
90 
                    opacity: '0.9'
91 
                },
92 
                top: 'center',
93 
                closeOnClick: false,
94 
                oneInstance: false,
95 
                load: false,
96 
                onClose: function(){
97 
                    // With partial refresh working properly,
98 
                    // it is no longer necessary to refresh the whole page
99 
                    // choose_view();
100 
                }
101 
            });
102 
            $("a#notification").data('overlay').load();
103 
            return false;
104 
        }
105 
    </script>
106 
</head>
107 
<body>
108 
    <div id="wrapper">
109 
        <div id='user'>
110 
            <a href="#">{% trans "username" %}</a> &nbsp;|&nbsp; <a href="#">{% trans "settings" %}</a>
111 
            {% get_available_languages as LANGUAGES %}
112 
            {% for lang in LANGUAGES %}
113 
                &nbsp;|&nbsp;
114 
                <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
115 
            {% endfor %}
116 
        </div>
117 
        <div id='header'>
118 
            <a href="/" class="logo">
119 
                <img src="static/nefo.png" alt="+nefo"/>
120 
            </a>
121 
            <div class='fatborder'></div>
122 
        </div>
123 
        <!-- tabs -->
124 
        <ul class="css-tabs">
125 
                <li><a href="machines" title="{% trans "manage  virtual " %}" class="primary" id="machines">
126 
                {% trans "machines" %}</a></li>
127 
                <li><a href="disks" title="{% trans "manage  storage " %}" class="primary" id="disks">
128 
                {% trans "disks" %}</a></li>
129 
                <li><a href="images" title="{% trans "manage  images" %}" class="primary" id="images">
130 
                {% trans "images" %}</a></li>
131 
                <li><a href="networks" title="{% trans "configure " %}" class="primary" id="networks">
132 
                {% trans "networks" %}</a></li>
133 
            <li><a href="files" title="{% trans "your " %}" class="secondary" id="files">
134 
                {% trans "files" %}</a></li>
135 
                <li><a href="desktops" title="{% trans "your " %}" class="secondary" id="desktops">
136 
                {% trans "desktops" %}</a></li>
137 
                <li><a href="apps" title="{% trans "your " %}" class="secondary" id="apps">
138 
                {% trans "apps" %}</a></li>
139 
        </ul>
140 
        <div class="more-tabs"><img src="static/arrow.png" id="arrow"></img></div>
141 
        <div class="css-panes">
142 
                <div id="machines-pane" class="pane" style="display:block">{% include "machines.html" %}</div>
143 
                <div id="disks-pane" class="pane"></div>
144 
                <div id="images-pane" class="pane"></div>
145 
                <div id="networks-pane" class="pane"></div>
146 
            <div id="files-pane" class="pane"></div>
147 
                <div id="desktops-pane" class="pane"></div>
148 
                <div id="apps-pane" class="pane"></div>
149 
        </div>
150 
    </div>
151 
    <!-- activate tabs with JavaScript -->
152 
    <script>
153 
                $(function() {
154 
                    $('ul.css-tabs li').hover(function(){
155 
                            $(this).find('a:not(.current)').animate({top:'0px'},{queue:false,duration:150});
156 
            }, function(){
157 
                $('ul.css-tabs li a:not(.current)').animate({top:'9px'},{queue:false,duration:150});
158 
                    });
159 
                });
160
161 
        $(function() {
162 
                $("ul.css-tabs").tabs("div.css-panes div.pane", {
163 
                        onBeforeClick: function(event, i) {
164 
                    $('ul.css-tabs li a').animate({top:'9px'},{queue:false,duration:150});
165 
                                // get the pane to be opened
166 
                                var pane = this.getPanes().eq(i);
167 
                    pane.text('');
168 
                                // load it with a page specified in the tab's href attribute
169 
                                pane.load(this.getTabs().eq(i).attr("href"),function(){if (!i) {choose_view()}});
170 
                        }
171 
                });
172 
        });
173
174 
        // toggle main menu
175 
        $("#arrow").click(function(event){
176 
                toggleMenu();
177 
        });
178
179 
    </script>
180 
</body>
181 
</html>
182