Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 1508a5ab

History | View | Annotate | Download (10.6 kB)

1
{% load i18n %}
2
<!DOCTYPE html>
3
<head>
4
        <title>{{ project }}</title>
5
        <!-- include the Tools -->
6
    <!-- jquery tools minified for deployment-->
7
    <script src="static/jquery.tools.min.js"></script>
8
    
9
        <!-- jquery tools source for JS debugging -->
10
    <!--
11
    <script src="http://flowplayer.org/tools/download/1.2.5/jquery-1.4.2.js"></script>   
12
        <script src="http://flowplayer.org/tools/download/1.2.5/tabs/tabs.js"></script>
13
        <script src="http://flowplayer.org/tools/download/1.2.5/scrollable/scrollable.js"></script>
14
        <script src="http://flowplayer.org/tools/download/1.2.5/overlay/overlay.js"></script>
15
        <script src="http://flowplayer.org/tools/download/1.2.5/rangeinput/rangeinput.js"></script>
16
        <script src="http://flowplayer.org/tools/download/1.2.5/toolbox/toolbox.expose.js"></script>
17
    -->
18
    
19
    <script src="static/jquery.cookie.js"></script>
20
    <script src="static/jQueryRotate.js"></script>
21
    <script src="static/jquery.dataTables.min.js"></script>
22
    <script src="static/synnefo.js"></script>
23
        <link rel="stylesheet" type="text/css" href="static/main.css"/>        
24
    <script>
25
        // timeout value from settings.py
26
        var TIMEOUT = {{timeout}};
27
        var UPDATE_INTERVAL = {{5000}};
28
        var STATUS_MESSAGES = {
29
            'BUILD'     : '{% trans "Building" %}',
30
            'REBOOT'     : '{% trans "Rebooting" %}',            
31
            'STOPPED'   : '{% trans "Stopped" %}',
32
            'ACTIVE'   : '{% trans "Running" %}',
33
            'ERROR'   : '{% trans "Error" %}'
34
        };
35
        
36
        var ERRORS = {
37
            // error message header
38
            'HEADER' : '{% trans "Error!" %}',
39
            // default
40
            'DEFAULT' : '{% trans "Could not contact the service. Please check your network connectivity and try again." %}',
41
            // bad request
42
            '400' : '{% trans "Malformed request." %}',
43
            // not found
44
            '404' : '{% trans "Your request has failed. Resource not found." %}',
45
            // internal server error
46
            '500' : '{% trans "There has been an Internal Error. Our administrators have been notified." %}',
47
            // service unavailable
48
            '501' : '{% trans "This server has not been implemented yet." %}',
49
            // service unavailable
50
            '503' : '{% trans "This service is unavailable right now, please try again later." %}',
51
            // no images found
52
            'NO_IMAGES' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
53
            // no flavors found
54
            'NO_FLAVORS' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}'
55
        };
56
        
57
        var SUCCESS = {
58
            'HEADER' : '{% trans "Success!" %}',
59
            'DEFAULT' : '{% trans "Your request has been succefully executed." %}',
60
            'CREATE_VM_SUCCESS' : '{% trans "Success!" %}',
61
            'CREATE_VM_SUCCESS_ONE' : '{% trans "Your machine is now being built." %}',
62
            'CREATE_VM_SUCCESS_TWO' : '{% trans "Please write down the following password:" %}',
63
            'CREATE_VM_SUCCESS_THREE' : '{% trans "Do not lose this! You will need it to connect to your machine, once it is ready." %}'
64
        };
65
        
66
        // ajax error checking  
67
        function ajax_error(status, serverID, action, responseText) {
68
            var serverName = '';
69
            
70
            if (serverID != undefined) {
71
                // standard view
72
                serverName = $("#"+serverID).find("span.name").text();
73
                if (serverName == "") { // list view
74
                    serverName = $("#"+serverID).parent().parent().find("span.name").text();                    
75
                }
76
            }
77
            
78
            // prepare the error message
79
            $("#error-success h3").text(ERRORS['HEADER']);
80
            if (responseText != undefined){
81
                var errors = parse_error(responseText), details = '';
82
                if (serverName){
83
                    serverName="<p><strong>Server:</strong> " + serverName + "</p>";
84
                }
85
                if (errors[0].details != undefined) {
86
                    details = "<p><strong>Details:</strong> " + errors[0].details +"</p>";
87
                }
88
                $("#error-success div").html("<p>"+(errors[0].message || ERRORS[errors[0].code]) +"</p>"+serverName +"<p><strong>Action:</strong> " + action + "</p><p><strong>Code</strong>: " + errors[0].code + "</p>" + details);
89
            } else if (ERRORS[status] != undefined) {
90
                if (serverID == undefined){
91
                    $("#error-success p").text(ERRORS[status]);
92
                } else {
93
                    $("#error-success p").html("<b>" + serverName + "</b>" + ": " + ERRORS[status]);
94
                }
95
            } else {
96
                $("#error-success p").text(ERRORS['DEFAULT']);   
97
            }
98
            
99
            // bring up error notification
100
            var triggers = $("a#notification").overlay({
101
                // some mask tweaks suitable for modal dialogs
102
                mask: {
103
                    color: '#ebecff',
104
                    opacity: '0.9'
105
                },
106
                top: 'center',
107
                closeOnClick: false,
108
                oneInstance: false,
109
                load: false,
110
                onClose: function(){
111
                    // With partial refresh working properly,
112
                    // it is no longer necessary to refresh the whole page
113
                    // choose_view();
114
                }
115
            });
116
            $("a#notification").data('overlay').load();
117
            return false;
118
        }
119
        
120
        // ajax success checking
121
        function ajax_success(status, password) {
122
            // prepare the error message
123
            // bring up success notification
124
            if (status != undefined && SUCCESS[status]) {
125
                if (password != undefined && status == "CREATE_VM_SUCCESS") {
126
                    $("#error-success h3").text(SUCCESS[status]);
127
                    var CREATE_VM_SUCCESS_MSG = SUCCESS["CREATE_VM_SUCCESS_ONE"] + '<br />'
128
                        + SUCCESS["CREATE_VM_SUCCESS_TWO"] + '<br /><br />' + '<b>' + password + '</b>'
129
                        + '<br /><br />' + SUCCESS["CREATE_VM_SUCCESS_THREE"] ;
130
                    $("#error-success div").html("<p>" + CREATE_VM_SUCCESS_MSG + "</p>");             
131
                } else {
132
                    $("#error-success h3").text(SUCCESS['HEADER']);
133
                    $("#error-success div").text("<p>" + SUCCESS[status] + "</p>");             
134
                }
135
            } else {
136
                $("#error-success h3").text(SUCCESS['HEADER']);
137
                $("#error-success div").html("<p>" + SUCCESS['DEFAULT'] + "</p>");             
138

139
            }
140

141

142
            var triggers = $("a#notification").overlay({
143
                // some mask tweaks suitable for modal dialogs
144
                mask: {
145
                    color: '#ebecff',
146
                    opacity: '0.9'
147
                },
148
                top: 'center',
149
                closeOnClick: false,
150
                oneInstance: false,
151
                load: false,
152
                onClose: function(){
153
                    // With partial refresh working properly,
154
                    // it is no longer necessary to refresh the whole page
155
                    // choose_view();
156
                }
157
            });
158
            $("a#notification").data('overlay').load();
159
            return false;
160
        }
161
    </script>
162
</head>
163
<body>
164
    <div id="wrapper">
165
        <div id='user'>
166
            <a href="#">{% trans "username" %}</a> &nbsp;|&nbsp; <a href="#">{% trans "settings" %}</a>
167
            {% get_available_languages as LANGUAGES %}
168
            {% for lang in LANGUAGES %}
169
                &nbsp;|&nbsp;
170
                <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a> 
171
            {% endfor %}
172
        </div>
173
        <div id='header'>
174
            <a href="/" class="logo">
175
                <img src="static/nefo.png" alt="+nefo"/>
176
            </a>
177
            <div class='fatborder'></div>
178
        </div>
179
        <!-- tabs -->
180
        <ul class="css-tabs">
181
                <li><a href="machines" title="{% trans "manage  virtual " %}" class="primary" id="machines">
182
                {% trans "machines" %}</a></li>
183
                <li><a href="disks" title="{% trans "manage  storage " %}" class="primary" id="disks">
184
                {% trans "disks" %}</a></li>
185
                <li><a href="images" title="{% trans "manage  images" %}" class="primary" id="images">
186
                {% trans "images" %}</a></li>
187
                <li><a href="networks" title="{% trans "configure " %}" class="primary" id="networks">
188
                {% trans "networks" %}</a></li>
189
            <li><a href="files" title="{% trans "your " %}" class="secondary" id="files">
190
                {% trans "files" %}</a></li>
191
                <li><a href="desktops" title="{% trans "your " %}" class="secondary" id="desktops">
192
                {% trans "desktops" %}</a></li>
193
                <li><a href="apps" title="{% trans "your " %}" class="secondary" id="apps">
194
                {% trans "apps" %}</a></li>
195
        </ul>
196
        <div class="more-tabs"><img src="static/arrow.png" id="arrow"></img></div>
197
        <div class="css-panes">
198
                <div id="machines-pane" class="pane" style="display:block">{% include "machines.html" %}</div>
199
                <div id="disks-pane" class="pane"></div>
200
                <div id="images-pane" class="pane"></div>
201
                <div id="networks-pane" class="pane"></div>
202
            <div id="files-pane" class="pane"></div>
203
                <div id="desktops-pane" class="pane"></div>
204
                <div id="apps-pane" class="pane"></div>
205
        </div>
206
    </div>
207
    <!-- activate tabs with JavaScript -->
208
    <script>
209
                $(function() {
210
                    $('ul.css-tabs li').hover(function(){
211
                            $(this).find('a:not(.current)').animate({top:'0px'},{queue:false,duration:150});
212
            }, function(){
213
                $('ul.css-tabs li a:not(.current)').animate({top:'9px'},{queue:false,duration:150});
214
                    });
215
                });
216
                
217
        $(function() {
218
                $("ul.css-tabs").tabs("div.css-panes div.pane", {        
219
                        onBeforeClick: function(event, i) {
220
                    $('ul.css-tabs li a').animate({top:'9px'},{queue:false,duration:150});
221
                                // get the pane to be opened
222
                                var pane = this.getPanes().eq(i);
223
                    pane.text('');
224
                                // load it with a page specified in the tab's href attribute
225
                                pane.load(this.getTabs().eq(i).attr("href"),function(){if (!i) {choose_view()}});
226
                        }
227
                });
228
        });
229

230
        // toggle main menu
231
        $("#arrow").click(function(event){
232
                toggleMenu();
233
        });    
234
        
235
    </script>
236
</body>
237
</html>
238