Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 01864f44

History | View | Annotate | Download (8.1 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 
            '501' : '{% trans "There has been an Internal Error. Our administrators have been notified." %}',
47 
            // service unavailable
48 
            '503' : '{% trans "This service is unavailable right now, please try again later." %}',
49 
            // no images unavailable
50 
            'NO_IMAGES' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
51 
            // no images unavailable
52 
            'NO_FLAVORS' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}'
53 
        };
54
55 
        var SUCCESS = {
56 
            'HEADER' : '{% trans "Success!" %}',
57 
            'DEFAULT' : '{% trans "Your request has been succefully executed." %}',
58 
        };
59
60 
        // ajax error checking
61 
        function ajax_error(status) {
62 
            // prepare the error message
63 
            $("#error-success h3").text(ERRORS['HEADER']);
64
65 
            if (status != undefined && ERRORS[status]) {
66 
                $("#error-success p").text(ERRORS[status]);
67 
            } else {
68 
                $("#error-success p").text(ERRORS['DEFAULT']);
69 
            }
70
71 
            // bring up error notification
72 
            var triggers = $("a#notification").overlay({
73 
                // some mask tweaks suitable for modal dialogs
74 
                mask: {
75 
                    color: '#ebecff',
76 
                    opacity: '0.9'
77 
                },
78 
                top: 'center',
79 
                closeOnClick: false,
80 
                oneInstance: false,
81 
                load: false,
82 
                onClose: function(){
83 
                    // With partial refresh working properly,
84 
                    // it is no longer necessary to refresh the whole page
85 
                    // choose_view();
86 
                }
87 
            });
88 
            $("a#notification").data('overlay').load();
89 
            return false;
90 
        }
91
92 
        // ajax success checking
93 
        function ajax_success(status, password) {
94 
            // prepare the error message
95 
            $("#error-success h3").text(SUCCESS['HEADER']);
96 
            $("#error-success p").text(SUCCESS['DEFAULT']);
97 
            // bring up success notification
98 
            var triggers = $("a#notification").overlay({
99 
                // some mask tweaks suitable for modal dialogs
100 
                mask: {
101 
                    color: '#ebecff',
102 
                    opacity: '0.9'
103 
                },
104 
                top: 'center',
105 
                closeOnClick: false,
106 
                oneInstance: false,
107 
                load: false,
108 
                onClose: function(){
109 
                    // With partial refresh working properly,
110 
                    // it is no longer necessary to refresh the whole page
111 
                    // choose_view();
112 
                }
113 
            });
114 
            $("a#notification").data('overlay').load();
115 
            return false;
116 
        }
117 
    </script>
118 
</head>
119 
<body>
120 
    <div id="wrapper">
121 
        <div id='user'>
122 
            <a href="#">{% trans "username" %}</a> &nbsp;|&nbsp; <a href="#">{% trans "settings" %}</a>
123 
            {% get_available_languages as LANGUAGES %}
124 
            {% for lang in LANGUAGES %}
125 
                &nbsp;|&nbsp;
126 
                <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
127 
            {% endfor %}
128 
        </div>
129 
        <div id='header'>
130 
            <a href="/" class="logo">
131 
                <img src="static/nefo.png" alt="+nefo"/>
132 
            </a>
133 
            <div class='fatborder'></div>
134 
        </div>
135 
        <!-- tabs -->
136 
        <ul class="css-tabs">
137 
                <li><a href="machines" title="{% trans "manage  virtual " %}" class="primary" id="machines">
138 
                {% trans "machines" %}</a></li>
139 
                <li><a href="disks" title="{% trans "manage  storage " %}" class="primary" id="disks">
140 
                {% trans "disks" %}</a></li>
141 
                <li><a href="images" title="{% trans "manage  images" %}" class="primary" id="images">
142 
                {% trans "images" %}</a></li>
143 
                <li><a href="networks" title="{% trans "configure " %}" class="primary" id="networks">
144 
                {% trans "networks" %}</a></li>
145 
            <li><a href="files" title="{% trans "your " %}" class="secondary" id="files">
146 
                {% trans "files" %}</a></li>
147 
                <li><a href="desktops" title="{% trans "your " %}" class="secondary" id="desktops">
148 
                {% trans "desktops" %}</a></li>
149 
                <li><a href="apps" title="{% trans "your " %}" class="secondary" id="apps">
150 
                {% trans "apps" %}</a></li>
151 
        </ul>
152 
        <div class="more-tabs"><img src="static/arrow.png" id="arrow"></img></div>
153 
        <div class="css-panes">
154 
                <div id="machines-pane" class="pane" style="display:block">{% include "machines.html" %}</div>
155 
                <div id="disks-pane" class="pane"></div>
156 
                <div id="images-pane" class="pane"></div>
157 
                <div id="networks-pane" class="pane"></div>
158 
            <div id="files-pane" class="pane"></div>
159 
                <div id="desktops-pane" class="pane"></div>
160 
                <div id="apps-pane" class="pane"></div>
161 
        </div>
162 
    </div>
163 
    <!-- activate tabs with JavaScript -->
164 
    <script>
165 
                $(function() {
166 
                    $('ul.css-tabs li').hover(function(){
167 
                            $(this).find('a:not(.current)').animate({top:'0px'},{queue:false,duration:150});
168 
            }, function(){
169 
                $('ul.css-tabs li a:not(.current)').animate({top:'9px'},{queue:false,duration:150});
170 
                    });
171 
                });
172
173 
        $(function() {
174 
                $("ul.css-tabs").tabs("div.css-panes div.pane", {
175 
                        onBeforeClick: function(event, i) {
176 
                    $('ul.css-tabs li a').animate({top:'9px'},{queue:false,duration:150});
177 
                                // get the pane to be opened
178 
                                var pane = this.getPanes().eq(i);
179 
                    pane.text('');
180 
                                // load it with a page specified in the tab's href attribute
181 
                                pane.load(this.getTabs().eq(i).attr("href"),function(){if (!i) {choose_view()}});
182 
                        }
183 
                });
184 
        });
185
186 
        // toggle main menu
187 
        $("#arrow").click(function(event){
188 
                toggleMenu();
189 
        });
190
191 
    </script>
192 
</body>
193 
</html>
194