Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (10.7 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 server handshake
52 
            '0' : '{% trans "Could not contact the server." %}',
53 
            // no images found
54 
            'NO_IMAGES' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
55 
            // no flavors found
56 
            'NO_FLAVORS' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}'
57 
        };
58
59 
        var SUCCESS = {
60 
            'HEADER' : '{% trans "Success!" %}',
61 
            'DEFAULT' : '{% trans "Your request has been succefully executed." %}',
62 
            'CREATE_VM_SUCCESS' : '{% trans "Success!" %}',
63 
            'CREATE_VM_SUCCESS_ONE' : '{% trans "Your machine is now being built." %}',
64 
            'CREATE_VM_SUCCESS_TWO' : '{% trans "Please write down the following password:" %}',
65 
            'CREATE_VM_SUCCESS_THREE' : '{% trans "Do not lose this! You will need it to connect to your machine, once it is ready." %}'
66 
        };
67
68 
        // ajax error checking
69 
        function ajax_error(status, serverID, action, responseText) {
70 
            var serverName = '';
71
72 
            if (serverID != undefined) {
73 
                // standard view
74 
                serverName = $("#"+serverID).find("span.name").text();
75 
                if (serverName == "") { // list view
76 
                    serverName = $("#"+serverID).parent().parent().find("span.name").text();
77 
                }
78 
            }
79
80 
            // prepare the error message
81 
            $("#error-success h3").text(ERRORS['HEADER']);
82 
            if (responseText != undefined){
83 
                var errors = parse_error(responseText), details = '';
84 
                if (serverName){
85 
                    serverName="<p><strong>Server:</strong> " + serverName + "</p>";
86 
                }
87 
                if (errors[0].details != undefined) {
88 
                    details = "<p><strong>Details:</strong> " + errors[0].details +"</p>";
89 
                }
90 
                $("#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);
91 
            } else if (ERRORS[status] != undefined) {
92 
                if (serverID == undefined){
93 
                    $("#error-success p").text(ERRORS[status]);
94 
                } else {
95 
                    $("#error-success p").html("<b>" + serverName + "</b>" + ": " + ERRORS[status]);
96 
                }
97 
            } else {
98 
                $("#error-success p").text(ERRORS['DEFAULT']);
99 
            }
100
101 
            // bring up error notification
102 
            var triggers = $("a#notification").overlay({
103 
                // some mask tweaks suitable for modal dialogs
104 
                mask: {
105 
                    color: '#ebecff',
106 
                    opacity: '0.9'
107 
                },
108 
                top: 'center',
109 
                closeOnClick: false,
110 
                oneInstance: false,
111 
                load: false,
112 
                onClose: function(){
113 
                    // With partial refresh working properly,
114 
                    // it is no longer necessary to refresh the whole page
115 
                    // choose_view();
116 
                }
117 
            });
118 
            $("a#notification").data('overlay').load();
119 
            return false;
120 
        }
121
122 
        // ajax success checking
123 
        function ajax_success(status, password) {
124 
            // prepare the error message
125 
            // bring up success notification
126 
            if (status != undefined && SUCCESS[status]) {
127 
                if (password != undefined && status == "CREATE_VM_SUCCESS") {
128 
                    $("#error-success h3").text(SUCCESS[status]);
129 
                    var CREATE_VM_SUCCESS_MSG = SUCCESS["CREATE_VM_SUCCESS_ONE"] + '<br />'
130 
                        + SUCCESS["CREATE_VM_SUCCESS_TWO"] + '<br /><br />' + '<b>' + password + '</b>'
131 
                        + '<br /><br />' + SUCCESS["CREATE_VM_SUCCESS_THREE"] ;
132 
                    $("#error-success div").html("<p>" + CREATE_VM_SUCCESS_MSG + "</p>");
133 
                } else {
134 
                    $("#error-success h3").text(SUCCESS['HEADER']);
135 
                    $("#error-success div").text("<p>" + SUCCESS[status] + "</p>");
136 
                }
137 
            } else {
138 
                $("#error-success h3").text(SUCCESS['HEADER']);
139 
                $("#error-success div").html("<p>" + SUCCESS['DEFAULT'] + "</p>");
140
141 
            }
142
143
144 
            var triggers = $("a#notification").overlay({
145 
                // some mask tweaks suitable for modal dialogs
146 
                mask: {
147 
                    color: '#ebecff',
148 
                    opacity: '0.9'
149 
                },
150 
                top: 'center',
151 
                closeOnClick: false,
152 
                oneInstance: false,
153 
                load: false,
154 
                onClose: function(){
155 
                    // With partial refresh working properly,
156 
                    // it is no longer necessary to refresh the whole page
157 
                    // choose_view();
158 
                }
159 
            });
160 
            $("a#notification").data('overlay').load();
161 
            return false;
162 
        }
163 
    </script>
164 
</head>
165 
<body>
166 
    <div id="wrapper">
167 
        <div id='user'>
168 
            <a href="#">{% trans "username" %}</a> &nbsp;|&nbsp; <a href="#">{% trans "settings" %}</a>
169 
            {% get_available_languages as LANGUAGES %}
170 
            {% for lang in LANGUAGES %}
171 
                &nbsp;|&nbsp;
172 
                <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
173 
            {% endfor %}
174 
        </div>
175 
        <div id='header'>
176 
            <a href="/" class="logo">
177 
                <img src="static/nefo.png" alt="+nefo"/>
178 
            </a>
179 
            <div class='fatborder'></div>
180 
        </div>
181 
        <!-- tabs -->
182 
        <ul class="css-tabs">
183 
                <li><a href="machines" title="{% trans "manage  virtual " %}" class="primary" id="machines">
184 
                {% trans "machines" %}</a></li>
185 
                <li><a href="disks" title="{% trans "manage  storage " %}" class="primary" id="disks">
186 
                {% trans "disks" %}</a></li>
187 
                <li><a href="images" title="{% trans "manage  images" %}" class="primary" id="images">
188 
                {% trans "images" %}</a></li>
189 
                <li><a href="networks" title="{% trans "configure " %}" class="primary" id="networks">
190 
                {% trans "networks" %}</a></li>
191 
            <li><a href="files" title="{% trans "your " %}" class="secondary" id="files">
192 
                {% trans "files" %}</a></li>
193 
                <li><a href="desktops" title="{% trans "your " %}" class="secondary" id="desktops">
194 
                {% trans "desktops" %}</a></li>
195 
                <li><a href="apps" title="{% trans "your " %}" class="secondary" id="apps">
196 
                {% trans "apps" %}</a></li>
197 
        </ul>
198 
        <div class="more-tabs"><img src="static/arrow.png" id="arrow"></img></div>
199 
        <div class="css-panes">
200 
                <div id="machines-pane" class="pane" style="display:block">{% include "machines.html" %}</div>
201 
                <div id="disks-pane" class="pane"></div>
202 
                <div id="images-pane" class="pane"></div>
203 
                <div id="networks-pane" class="pane"></div>
204 
            <div id="files-pane" class="pane"></div>
205 
                <div id="desktops-pane" class="pane"></div>
206 
                <div id="apps-pane" class="pane"></div>
207 

    		
  

  

  

    
      208
    
    
      
        </div>


    		
  

  

  

    
      209
    
    
      
    </div>


    		
  

  

  

    
      210
    
    
      
    <!-- activate tabs with JavaScript -->


    		
  

  

  

    
      211
    
    
      
    <script>


    		
  

  

  

    
      212
    
    
      
                $(function() {


    		
  

  

  

    
      213
    
    
      
                    $('ul.css-tabs li').hover(function(){


    		
  

  

  

    
      214
    
    
      
                            $(this).find('a:not(.current)').animate({top:'0px'},{queue:false,duration:150});


    		
  

  

  

    
      215
    
    
      
            }, function(){


    		
  

  

  

    
      216
    
    
      
                $('ul.css-tabs li a:not(.current)').animate({top:'9px'},{queue:false,duration:150});


    		
  

  

  

    
      217
    
    
      
                    });


    		
  

  

  

    
      218
    
    
      
                });


    		
  

  

  

    
      219
    
    
      
                


    		
  

  

  

    
      220
    
    
      
        $(function() {


    		
  

  

  

    
      221
    
    
      
                $("ul.css-tabs").tabs("div.css-panes div.pane", {        


    		
  

  

  

    
      222
    
    
      
                        onBeforeClick: function(event, i) {


    		
  

  

  

    
      223
    
    
      
                    $('ul.css-tabs li a').animate({top:'9px'},{queue:false,duration:150});


    		
  

  

  

    
      224
    
    
      
                                // get the pane to be opened


    		
  

  

  

    
      225
    
    
      
                                var pane = this.getPanes().eq(i);


    		
  

  

  

    
      226
    
    
      
                    pane.text('');


    		
  

  

  

    
      227
    
    
      
                                // load it with a page specified in the tab's href attribute


    		
  

  

  

    
      228
    
    
      
                                pane.load(this.getTabs().eq(i).attr("href"),function(){if (!i) {choose_view()}});


    		
  

  

  

    
      229
    
    
      
                        }


    		
  

  

  

    
      230
    
    
      
                });


    		
  

  

  

    
      231
    
    
      
        });


    		
  

  

  

    
      232
    
    
      



    		
  

  

  

    
      233
    
    
      
        // toggle main menu


    		
  

  

  

    
      234
    
    
      
        $("#arrow").click(function(event){


    		
  

  

  

    
      235
    
    
      
                toggleMenu();


    		
  

  

  

    
      236
    
    
      
        });    


    		
  

  

  

    
      237
    
    
      
        


    		
  

  

  

    
      238
    
    
      
    </script>


    		
  

  

  

    
      239
    
    
      
</body>


    		
  

  

  

    
      240
    
    
      
</html>


    		
  

  

  

    
      241