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" %} &raquo;</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">&laquo; {% trans "Back" %}</button>
121
				<button type="button" class="next right">{% trans "Next" %} &raquo;</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">&laquo; {% 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