Statistics
| Branch: | Tag: | Revision:

root / ui / templates / networks.html @ 8b095566

History | View | Annotate | Download (14.2 kB)

1
{% load i18n %}
2

    
3
<div id="networks" class="separator"></div>
4

    
5
<div id="networks-container">
6
    <!-- the create button -->
7
    <div id="networks-createcontainer">
8
        <a id="networkscreate" rel="#networkswizard" href="#">{% trans "Create New +" %}</a>
9
    </div>
10
    <div class="network" id="internet-template">
11
        <div class="actions">
12
            <a href="#" class="action-network-add">{% trans "Add Machine" %}</a>
13
        </div>    
14
        <div class="state">
15
            <div class="status">{% trans "Public Network" %}</div>
16
            <div class="indicator"></div>
17
            <div class="indicator"></div>
18
            <div class="indicator"></div>
19
            <div class="indicator"></div>
20
        </div>    
21
        <img class="network-logos" src="/static/internet.png" />
22
        <div href="#" class="name">
23
            <h5 class="namecontainer">
24
                <span class="name">{% trans "Internet" %}</span>
25
            </h5>
26
        </div>
27
        <h5 class="network-machines">
28
            {% trans "Show:" %}  
29
            <a class="show-machines" href="#">{% trans "machines" %} (2)</a>
30
        </h5>
31
        <div class="network-contents">
32
            <div class="network-contents-start-separator"></div>
33
            <div class="network-machine" id="machine-template">
34
                <div class="machine-actions">
35
                    <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
36
                    <a href="#" class="action-details">{% trans "Details" %}</a>
37
                </div>        
38
                <div class="state">
39
                    <div class="status"><span class="discreet">IPv4:</span> 192.94.73.15</div>
40
                    <div class="status"><span class="discreet">IPv6:</span> vv</div>
41
                    <img class="spinner" style="display:none" src="/static/progress.gif" />
42
                    <img class="wave" style="display:none" src="/static/wave.gif" />
43
                </div>
44
                <img class="logo" src="/static/machines/debian-on.png" />
45
                <div href="#" class="machine-name">
46
                    <h5 class="namecontainer editable">
47
                        <span class="name">my desktop1</span><span class="rename"></span>
48
                        <div class="editbuttons" style="display:none">
49
                            <span class="save" />
50
                            <span class="cancel" />
51
                        </div>
52
                    </h5>
53
                </div>
54
                <h5>
55
                    <a href="#" class="ip">{% trans "IPs" %}</a> | 
56
                    <a class="show-firewall" href="#">{% trans "Firewall" %}</a> 
57
                    (<span class="firewall-on">{% trans "On" %}</span>)   
58
                </h5>     
59
                <div class="firewall-content">
60
                    <div class="firewall-contents-start-separator"></div>
61
                    <input type="radio" class="checkboxes" name="image-id1" /> <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span><br />
62
                    <input type="radio" class="checkboxes" name="image-id1" /> <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span><br />
63
                    <input type="radio" class="checkboxes" name="image-id1" /> <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span><br />
64
                    <input type="radio" class="checkboxes" name="image-id1" /> <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
65
                    <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
66
                    <div class="firewall-contents-end-separator"></div>
67
                </div>
68
            </div>
69
            <div class="network-separator machines"></div>
70
            <div class="network-machine" id="machine-template">
71
                <div class="machine-actions">
72
                    <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
73
                    <a href="#" class="action-details">{% trans "Details" %}</a>
74
                </div>        
75
                <div class="state">
76
                    <div class="status"><span class="discreet">IPv4:</span> 192.94.73.18</div>
77
                    <div class="status"><span class="discreet">IPv6:</span> vv</div>
78
                    <img class="spinner" style="display:none" src="/static/progress.gif" />
79
                    <img class="wave" style="display:none" src="/static/wave.gif" />
80
                </div>
81
                <img class="logo" src="/static/machines/windows-off.png" />
82
                <div href="#" class="machine-name">
83
                    <h5 class="namecontainer editable">
84
                        <span class="name">my desktop1</span><span class="rename"></span>
85
                        <div class="editbuttons" style="display:none">
86
                            <span class="save" />
87
                            <span class="cancel" />
88
                        </div>
89
                    </h5>
90
                </div>
91
                <h5>
92
                    <a href="#" class="ip">{% trans "IPs" %}</a> | 
93
                    <a class="show-firewall" href="#">{% trans "Firewall" %}</a> 
94
                    (<span class="firewall-off">{% trans "Off" %}</span>)   
95
                </h5>  
96
                <div class="firewall-content">
97
                    <div class="firewall-contents-start-separator"></div>
98
                    <input type="radio" class="checkboxes" name="image-id2" /> <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span><br />
99
                    <input type="radio" class="checkboxes" name="image-id2" /> <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span><br />
100
                    <input type="radio" class="checkboxes" name="image-id2" /> <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span><br />
101
                    <input type="radio" class="checkboxes" name="image-id2" /> <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
102
                    <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
103
                    <div class="firewall-contents-end-separator"></div>
104
                </div>
105
            </div>
106
            <div class="network-contents-end-separator"></div>
107
        </div>
108
    </div>
109
    <div id="internet-separator"></div>
110
    <div id="private-networks">
111
        <div class="network" id="network-template">
112
            <div class="actions">
113
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
114
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
115
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
116
            </div>    
117
            <div class="state">
118
                <div class="status">{% trans "Private Network" %}</div>
119
                <div class="indicator"></div>
120
                <div class="indicator"></div>
121
                <div class="indicator"></div>
122
                <div class="indicator"></div>
123
            </div>    
124
            <img class="network-logos" src="/static/network.png" />
125
            <div href="#" class="name">
126
                <h5 class="namecontainer">
127
                    <span class="name">{% trans "My Network 1" %}</span><span class="rename-network"></span>
128
                </h5>
129
            </div>
130
            <h5 class="network-machines">
131
                {% trans "Show:" %}  
132
                <a class="show-machines" href="#">{% trans "machines" %} (2)</a>
133
            </h5>
134
            <div class="network-contents">
135
                <div class="network-contents-start-separator"></div>
136
                <div class="network-machine" id="machine-template">
137
                    <div class="machine-actions">
138
                        <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
139
                        <a href="#" class="action-details">{% trans "Details" %}</a>
140
                    </div>        
141
                    <div class="state">
142
                        <div class="status"><span class="discreet">IPv4:</span> 192.94.73.15</div>
143
                        <div class="status"><span class="discreet">IPv6:</span> vv</div>
144
                        <img class="spinner" style="display:none" src="/static/progress.gif" />
145
                        <img class="wave" style="display:none" src="/static/wave.gif" />
146
                    </div>
147
                    <img class="logo" src="/static/machines/debian-on.png" />
148
                    <div href="#" class="machine-name">
149
                        <h5 class="namecontainer editable">
150
                            <span class="name">my desktop1</span><span class="rename"></span>
151
                            <div class="editbuttons" style="display:none">
152
                                <span class="save" />
153
                                <span class="cancel" />
154
                            </div>
155
                        </h5>
156
                    </div>
157
                    <a href="#" class="ip">
158
                        <h5><a href="#" class="machine-connect">{% trans "Connect" %}</a> {% trans "to manage private IPs" %}</h5>
159
                    </a>
160
                    <div class="firewall-content">
161
                        firewall content
162
                    </div>
163
                </div>
164
                <div class="network-separator machines"></div>
165
                <div class="network-machine" id="machine-template">
166
                    <div class="machine-actions">
167
                        <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
168
                        <a href="#" class="action-details">{% trans "Details" %}</a>
169
                    </div>        
170
                    <div class="state">
171
                        <div class="status"><span class="discreet">IPv4:</span> 192.94.73.18</div>
172
                        <div class="status"><span class="discreet">IPv6:</span> vv</div>
173
                        <img class="spinner" style="display:none" src="/static/progress.gif" />
174
                        <img class="wave" style="display:none" src="/static/wave.gif" />
175
                    </div>
176
                    <img class="logo" src="/static/machines/ubuntu-on.png" />
177
                    <div href="#" class="machine-name">
178
                        <h5 class="namecontainer editable">
179
                            <span class="name">my desktop1</span><span class="rename"></span>
180
                            <div class="editbuttons" style="display:none">
181
                                <span class="save" />
182
                                <span class="cancel" />
183
                            </div>
184
                        </h5>
185
                    </div>
186
                    <a href="#" class="ip">
187
                        <h5><a href="#" class="machine-connect">{% trans "Connect" %}</a> {% trans "to manage private IPs" %}</h5>
188
                    </a>
189
                </div>
190
                <div class="network-contents-end-separator"></div>
191
            </div>
192
        </div>
193
        <div class="network-separator"></div>
194
        <div class="network" id="network-template">
195
            <div class="actions">
196
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
197
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
198
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
199
            </div>    
200
            <div class="state">
201
                <div class="status">{% trans "Private Network" %}</div>
202
                <div class="indicator"></div>
203
                <div class="indicator"></div>
204
                <div class="indicator"></div>
205
                <div class="indicator"></div>
206
            </div>    
207
            <img class="network-logos" src="/static/network.png" />
208
            <div href="#" class="name">
209
                <h5 class="namecontainer">
210
                    <span class="name">{% trans "My Network 2" %}</span><span class="rename-network"></span>
211
                </h5>
212
            </div>
213
            <h5 class="network-machines">
214
                {% trans "Show:" %}  
215
                <a class="show-machines" href="#">{% trans "machines" %} (0)</a>
216
            </h5>
217
            <div class="network-contents">
218
            </div>
219
        </div>
220
        <div class="network-separator"></div>
221
        <div class="network" id="network-template">
222
            <div class="actions">
223
                <a href="#" class="action-add">{% trans "Add Machine" %}</a>
224
                <a href="#" class="action-network-edit">{% trans "Edit" %}</a>
225
                <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
226
            </div>    
227
            <div class="state">
228
                <div class="status">{% trans "Private Network" %}</div>
229
                <div class="indicator"></div>
230
                <div class="indicator"></div>
231
                <div class="indicator"></div>
232
                <div class="indicator"></div>
233
            </div>    
234
            <img class="network-logos" src="/static/network.png" />
235
            <div href="#" class="name">
236
                <h5 class="namecontainer">
237
                    <span class="name">{% trans "My Network 3" %}</span><span class="rename-network"></span>
238
                </h5>
239
            </div>
240
            <h5 class="network-machines">
241
                {% trans "Show:" %}  
242
                <a class="show-machines" href="#">{% trans "machines" %} (0)</a>
243
            </h5>
244
            <div class="network-contents">
245
            </div>
246
        </div>
247
    </div>
248
</div>
249
<div id="networks" class="separator"></div>
250

    
251
<script>
252
//hide the all of the networks contents
253
$(".network-contents").hide();
254
//toggle the component with class network-contents
255
$(".show-machines").click(function() {
256
    $(this).parent().next(".network-contents").slideToggle(600);
257
});
258

259

260
//hide the all of the firewall contents
261
$(".firewall-content").hide();
262
//toggle the component with class firewall-contents
263
$(".show-firewall").click(function() {
264
    $(this).parent().next(".firewall-content").slideToggle(600);
265
});
266

267
//hide firewall content on apply click
268
$(".firewall-apply").click(function() {
269
    $(this).parent().slideToggle(600);
270
});
271
</script>