Revision 94adeabb ui/templates/machines.html
b/ui/templates/machines.html | ||
---|---|---|
27 | 27 |
<div class="modal" id="wizard"> |
28 | 28 |
<!-- status bar --> |
29 | 29 |
<ul id="status"> |
30 |
<li class="active"><strong>1.</strong> {% trans "Image" %}</li>
|
|
31 |
<li><strong>2.</strong> {% trans "Machine" %}</li>
|
|
32 |
<li><strong>3.</strong> {% trans "Review" %}</li>
|
|
30 |
<li class="active"><span class="headernumber">1</span><div class="headerbody">{% trans "Image" %}</div></li>
|
|
31 |
<li><span class="headernumber">2</span><div class="headerbody">{% trans "Flavor" %}</div></li>
|
|
32 |
<li><span class="headernumber">3</span><div class="headerbody">{% trans "Name" %}</div></li>
|
|
33 | 33 |
</ul> |
34 | 34 |
<!-- scrollable items --> |
35 | 35 |
<div class="items"> |
36 | 36 |
<!-- pages --> |
37 | 37 |
<div class="page"> |
38 | 38 |
<h2>{% trans "Select an OS" %}</h2> |
39 |
<hr class="topruler" /> |
|
39 | 40 |
<ul class="tabs"> |
40 |
<li><a href="#">{% trans "standard" %}</a></li>
|
|
41 |
<li><a href="#">{% trans "custom" %}</a></li>
|
|
41 |
<li><a href="#">{% trans "system images" %}</a></li>
|
|
42 |
<li><a href="#">{% trans "your images" %}</a></li>
|
|
42 | 43 |
</ul> |
43 | 44 |
<div class="panes"> |
44 | 45 |
<li id="image-template" style="display:none"> |
45 | 46 |
<label for="image.id"> |
46 | 47 |
<a> |
47 |
<div class="image"> |
|
48 |
<img src="" class="image-logo"/> |
|
49 |
<strong class="image-title">image.title</strong> |
|
50 |
<input class="radio" type="radio" name="image-id" id="image-id" /> |
|
51 |
<br /> |
|
52 |
<span class="description">image.description</span> |
|
53 |
<span class="size">?? MB</span> |
|
54 |
</div> |
|
48 |
<div class="image-container"> |
|
49 |
<div class="image"> |
|
50 |
<input class="radio" type="radio" name="image-id" id="image-id" /> |
|
51 |
<img src="" class="image-logo"/> |
|
52 |
<strong class="image-title">image.title</strong> |
|
53 |
<br /> |
|
54 |
<span class="description">image.description</span> |
|
55 |
<span class="size">?? MB</span> |
|
56 |
</div> |
|
57 |
</div> |
|
55 | 58 |
</a> |
56 | 59 |
</label> |
57 | 60 |
</li> |
... | ... | |
62 | 65 |
<!-- custom images --> |
63 | 66 |
</ul> |
64 | 67 |
</div> |
68 |
<hr class="bottomruler" /> |
|
65 | 69 |
<button type="button" class="prev" id="cancel">{% trans "Cancel" %}</button> |
66 |
<button type="button" class="next right">{% trans "Next" %} »</button>
|
|
70 |
<button type="button" class="next right">{% trans "Next" %}</button> |
|
67 | 71 |
</div> |
68 | 72 |
<div class="page"> |
69 |
<h2>{% trans "Select CPU, RAM and storage" %}</h2> |
|
73 |
<h2>{% trans "Select CPUs, RAM and Disk Size" %}</h2> |
|
74 |
<hr class="topruler" /> |
|
70 | 75 |
<ul> |
71 |
<li> |
|
76 |
<li id="machinetype">
|
|
72 | 77 |
<div class="machine-type"> |
73 |
<label for="small"> |
|
78 |
<label for="small" id="small">
|
|
74 | 79 |
<input type="radio" id="small" name="machine-type" value="small" checked="true" /> |
75 | 80 |
<strong>{% trans "small" %}</strong> |
76 | 81 |
</label> |
77 | 82 |
</div> |
78 | 83 |
<div class="machine-type"> |
79 |
<label for="medium"> |
|
84 |
<label for="medium" id="medium">
|
|
80 | 85 |
<input type="radio" id="medium" name="machine-type" value="medium" /> |
81 | 86 |
<strong>{% trans "medium" %}</strong> |
82 | 87 |
</label> |
83 | 88 |
</div> |
84 | 89 |
<div class="machine-type"> |
85 |
<label for="large"> |
|
90 |
<label for="large" id="large">
|
|
86 | 91 |
<input type="radio" id="large" name="machine-type" value="large" /> |
87 | 92 |
<strong>{% trans "large" %}</strong> |
88 | 93 |
</label> |
89 | 94 |
</div> |
90 | 95 |
<div class="machine-type"> |
91 |
<label for="custom"> |
|
96 |
<label for="custom" id="custom">
|
|
92 | 97 |
<input type="radio" name="machine-type" id="custom" value="large" /> |
93 | 98 |
<strong>{% trans "custom" %}</strong> |
94 | 99 |
</label> |
95 | 100 |
</div> |
96 | 101 |
</li> |
97 |
<li> |
|
98 |
<label><strong class="sliders">CPU (cores)</strong></label> |
|
99 |
<input type="range" id="cpu" style="display:none" /> |
|
100 |
<input type="text" class="range" id="cpu-indicator" /> |
|
101 |
</li> |
|
102 |
<li> |
|
103 |
<label><strong class="sliders">RAM (MB)</strong></label> |
|
104 |
<input type="range" id="ram" style="display:none" /> |
|
105 |
<input type="text" class="range" id="ram-indicator" /> |
|
106 |
|
|
107 |
</li> |
|
108 |
<li> |
|
109 |
<label><strong class="sliders">Storage (GB)</strong></label> |
|
110 |
<input type="range" id="storage" style="display:none" /> |
|
111 |
<input type="text" class="range" id="storage-indicator" /> |
|
112 |
|
|
113 |
</li> |
|
114 |
<li> |
|
115 |
<div class="cost"> |
|
116 |
{% trans "Cost per hour:" %} 20 {% trans "credits" %} | {% trans "Credits currently in account:" %} 10.000 |
|
117 |
</div> |
|
118 |
</li> |
|
102 |
<div id="page2-container"> |
|
103 |
<li class="slider-container"> |
|
104 |
<label><strong class="sliders">CPUs</strong></label> |
|
105 |
<input type="range" id="cpu" style="display:none" /> |
|
106 |
<input type="text" class="range" id="cpu-indicator" /> |
|
107 |
<span class="units">cores</span> |
|
108 |
</li> |
|
109 |
<li class="slider-container"> |
|
110 |
<label><strong class="sliders">RAM</strong></label> |
|
111 |
<input type="range" id="ram" style="display:none" /> |
|
112 |
<input type="text" class="range" id="ram-indicator" /> |
|
113 |
<span class="units">MB</span> |
|
114 |
</li> |
|
115 |
<li class="slider-container"> |
|
116 |
<label><strong class="sliders">Size</strong></label> |
|
117 |
<input type="range" id="storage" style="display:none" /> |
|
118 |
<input type="text" class="range" id="storage-indicator" /> |
|
119 |
<span class="units">GB</span> |
|
120 |
</li> |
|
121 |
<li> |
|
122 |
<div class="cost"> |
|
123 |
<span> {% trans "Your wallet:" %} 10,000 Credits </span> | <span>{% trans "This setup will cost you:" %}<input type="text" id="credits-indicator" value="20" class="range" />{% trans "C/hour" %}</span> |
|
124 |
</div> |
|
125 |
</li> |
|
126 |
</div> |
|
119 | 127 |
</ul> |
120 |
<button type="button" class="prev">« {% trans "Back" %}</button> |
|
121 |
<button type="button" class="next right">{% trans "Next" %} »</button> |
|
128 |
<hr class="bottomruler" /> |
|
129 |
<button type="button" class="prev">{% trans "Back" %}</button> |
|
130 |
<button type="button" class="next right">{% trans "Next" %}</button> |
|
122 | 131 |
</div> |
123 | 132 |
<div class="page"> |
124 | 133 |
<h2>{% trans "Confirm your settings" %}</h2> |
125 |
<ul> |
|
134 |
<hr class="topruler" /> |
|
135 |
<ul id="page3-container"> |
|
126 | 136 |
<li class="required"> |
127 | 137 |
<label> |
128 |
<strong>Machine name</strong>
|
|
138 |
<strong>Name:</strong>
|
|
129 | 139 |
<input type="text" class="text" name="machine_name" value="My Ubuntu 10.04 x86_64 server"/> |
130 | 140 |
</label> |
131 | 141 |
</li> |
132 | 142 |
<li> |
133 |
<strong>{% trans "Image:" %}</strong> <span id="machine_image-label">Ubuntu 10.04 x86_64 server</span>
|
|
143 |
<span>{% trans "Image:" %}</span> <span id="machine_image-label">Ubuntu 10.04 x86_64 server</span>
|
|
134 | 144 |
</li> |
135 | 145 |
<li> |
136 |
<strong>{% trans "CPU:" %}</strong> <span id="machine_cpu-label">2</span> <span>{% trans "cores" %}</span>
|
|
146 |
<span>{% trans "CPUs:" %}</span> <span id="machine_cpu-label">2</span> <span>{% trans "cores" %}</span>
|
|
137 | 147 |
</li> |
138 | 148 |
<li> |
139 |
<strong>{% trans "RAM:" %}</strong> <span id="machine_ram-label">1024</span><span>MB</span>
|
|
149 |
<span>{% trans "RAM:" %}</span> <span id="machine_ram-label">1024</span><span>MB</span>
|
|
140 | 150 |
</li> |
141 | 151 |
<li> |
142 |
<strong>{% trans "Storage:" %}</strong> <span id="machine_storage-label">10</span><span>GB</span>
|
|
152 |
<span>{% trans "System Disk:" %}</span> <span id="machine_storage-label">10</span><span>GB</span>
|
|
143 | 153 |
</li> |
144 | 154 |
<li> |
145 |
<strong>{% trans "Cost per hour:" %}</strong> <span>20 {% trans "credits" %}</span>
|
|
155 |
<span>{% trans "Cost per Hour:" %}</span> <span>40 {% trans "credits" %}</span>
|
|
146 | 156 |
</li> |
147 | 157 |
<li> |
148 |
<strong>{% trans "Remaining credits:" %}</strong> <span>10.000</span>
|
|
158 |
<span>{% trans "Credits in Wallet:" %}</span> <span>10.000</span>
|
|
149 | 159 |
</li> |
150 | 160 |
</ul> |
151 |
<button type="button" class="prev">« {% trans "Back" %}</button> |
|
161 |
<hr class="bottomruler" /> |
|
162 |
<button type="button" class="prev">{% trans "Back" %}</button> |
|
152 | 163 |
<button type="button" class="next right" id="start">{% trans "Create VM" %}</button> |
153 | 164 |
</div> |
154 | 165 |
</div> |
... | ... | |
392 | 403 |
$("#cpu-indicator")[0].value = cpus[0]; |
393 | 404 |
$("#ram-indicator")[0].value = ram[0]; |
394 | 405 |
$("#storage-indicator")[0].value = disks[0]; |
406 |
$("#small").addClass("active"); |
|
407 |
$("#medium").removeClass("active"); |
|
408 |
$("#large").removeClass("active"); |
|
409 |
$("#custom").removeClass("active"); |
|
395 | 410 |
}); |
396 | 411 |
|
397 | 412 |
// selecting the medium size |
... | ... | |
401 | 416 |
$("#storage").data('rangeinput').setValue(1); |
402 | 417 |
$("#cpu-indicator")[0].value = cpus[1]; |
403 | 418 |
$("#ram-indicator")[0].value = ram[1]; |
404 |
$("#storage-indicator")[0].value = disks[1]; |
|
419 |
$("#storage-indicator")[0].value = disks[1]; |
|
420 |
$("#medium").addClass("active"); |
|
421 |
$("#small").removeClass("active"); |
|
422 |
$("#large").removeClass("active"); |
|
423 |
$("#custom").removeClass("active"); |
|
405 | 424 |
}); |
406 | 425 |
|
407 | 426 |
// selecting the large size |
... | ... | |
411 | 430 |
$("#storage").data('rangeinput').setValue(2); |
412 | 431 |
$("#cpu-indicator")[0].value = cpus[2]; |
413 | 432 |
$("#ram-indicator")[0].value = ram[2]; |
414 |
$("#storage-indicator")[0].value = disks[2]; |
|
433 |
$("#storage-indicator")[0].value = disks[2]; |
|
434 |
$("#large").addClass("active"); |
|
435 |
$("#medium").removeClass("active"); |
|
436 |
$("#small").removeClass("active"); |
|
437 |
$("#custom").removeClass("active"); |
|
415 | 438 |
}); |
416 | 439 |
|
417 | 440 |
// selecting the custom flavor enables the sliders |
... | ... | |
420 | 443 |
$("#ram").attr('disabled',false); |
421 | 444 |
$("#storage").attr('disabled',false); |
422 | 445 |
$("strong.sliders").style = 'color: #778899;'; |
446 |
$("#custom").addClass("active"); |
|
447 |
$("#medium").removeClass("active"); |
|
448 |
$("#large").removeClass("active"); |
|
449 |
$("#small").removeClass("active"); |
|
423 | 450 |
}); |
424 | 451 |
|
425 | 452 |
// exit the wizard |
Also available in: Unified diff