92 lines
3.5 KiB
HTML
92 lines
3.5 KiB
HTML
<div class="form-horizontal">
|
|
<div class="form-group">
|
|
<label class="col-sm-3 control-label">Username:</label>
|
|
<div class="col-sm-9">
|
|
<div class="form-control-static">{{ username }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="username" class="col-sm-3 control-label">Python environment:</label>
|
|
<div class="col-sm-9">
|
|
<select class="form-control" name="python-env">
|
|
{%- for pyenv in python_envs -%}
|
|
<option value="{{ pyenv.path }}">{{ pyenv.name }} ({{ pyenv.scope | upper }})</option>
|
|
{% endfor -%}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cpu" class="col-sm-3 control-label">CPU:</label>
|
|
<div class="col-sm-9">
|
|
{%- for cpu in cpu_available -%}
|
|
<div class="col-sm-2">
|
|
<input type="radio" name="cpu" id="cpu_{{loop.index0}}" value="{{loop.index0}}"
|
|
data-max-duration="{{cpu.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
|
|
<label for="cpu_{{loop.index0}}" class="btn btn-default btn-block">
|
|
{{ cpu.description }}
|
|
</label>
|
|
</div>
|
|
{% endfor -%}
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ram" class="col-sm-3 control-label">Memory:</label>
|
|
<div class="col-sm-9">
|
|
{%- for ram in ram_available -%}
|
|
<div class="col-sm-2">
|
|
<input type="radio" name="ram" id="ram_{{loop.index0}}" value="{{loop.index0}}"
|
|
data-max-duration="{{ram.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
|
|
<label for="ram_{{loop.index0}}" class="btn btn-default btn-block">
|
|
{{ ram.description }} GB
|
|
</label>
|
|
</div>
|
|
{% endfor -%}
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="gpu" class="col-sm-3 control-label">GPU:</label>
|
|
<div class="col-sm-9">
|
|
{%- for gpu in gpu_available -%}
|
|
<div class="col-sm-2">
|
|
<input type="radio" name="gpu" id="gpu_{{loop.index0}}" value="{{loop.index0}}"
|
|
data-max-duration="{{gpu.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
|
|
<label for="gpu_{{loop.index0}}" class="btn btn-default btn-block">
|
|
{{ gpu.description | capitalize }}
|
|
</label>
|
|
</div>
|
|
{% endfor -%}
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-3 control-label">Session duration:</label>
|
|
<div class="col-sm-9">
|
|
<div class="form-control-static"><span id="time-max-duration">24</span> h</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Append button style
|
|
var $style = $(`<style>
|
|
input[type=radio] {
|
|
display: none;
|
|
}
|
|
input[type=radio]:checked + label {
|
|
background-color: #f37524;
|
|
border-color: #e34f21;
|
|
color: #fff;
|
|
}
|
|
</style>`)
|
|
$('html > head').append($style);
|
|
|
|
// Adjust time duration
|
|
var $reservations_dropdown = $("#time-max-duration");
|
|
|
|
$('input[type=radio]').change(function () {
|
|
var cpu = $('input[name=cpu]:checked').data('max-duration');
|
|
var ram = $('input[name=ram]:checked').data('max-duration');
|
|
var gpu = $('input[name=gpu]:checked').data('max-duration');
|
|
|
|
$reservations_dropdown.text(Math.min(cpu, ram, gpu));
|
|
})
|
|
</script>
|