Statistics
| Branch: | Tag: | Revision:

root / ui / templates / networks.html @ 59d17f06

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

    
269
<script>
270
//hide the all of the networks contents
271
$(".network-contents").hide();
272
//toggle the component with class network-contents
273
$(".show-machines").click(function() {
274
    $(this).parent().next(".network-contents").slideToggle(600);
275
});
276

277

278
//hide the all of the firewall contents
279
$(".firewall-content").hide();
280
//toggle the component with class firewall-contents
281
$(".show-firewall").click(function() {
282
    $(this).parent().next(".firewall-content").slideToggle(600);
283
});
284

285
//hide firewall content on apply click
286
$(".firewall-apply").click(function() {
287
    $(this).parent().slideToggle(600);
288
});
289
</script>