Skip to content

GitLab

Commit e2952ca1 authored by Andreas Åkre Solberg's avatar Andreas Åkre Solberg
Browse files

Improve visual effect when creating a new lab, and redirects to frontpage afterwards.

parent f12236c6
Pipeline #2953 passed with stages
in 1 minute and 30 seconds
Hide whitespace changes
Inline Side-by-side
public/js/createlab.js
View file @ e2952ca1
......@@ -168,6 +168,9 @@ var submitForm = function() {
console.log("Form", data);
$("#debug").empty().append(JSON.stringify(data, undefined, 2));
$(".sectionForm").hide();
$(".sectionCreating").show();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
......@@ -176,7 +179,7 @@ var submitForm = function() {
data: JSON.stringify(data),
success: (response) => {
location.reload();
location = '/'
},
error: (error) => {
......
views/create-lab.mustache
View file @ e2952ca1
......@@ -17,110 +17,116 @@
<p>Som faglærer kan du enkelt opprette en maskinlab for dine studenter. Du kan her sette opp en mal og ressurspolicy for hvor mye ressurser hver student kan disponere.</p>
<form>
<form class="sectionForm">
<div class="form-group">
<label for="labname">Navn på lab</label>
<input type="name" class="form-control" id="labname" placeholder="Navn på lab" value="">
</div>
<div class="control-group">
<label for="select-gr">Velg undervisningsgruppe</label>
<select id="select-gr" placeholder="Velg gruppe..."></select>
</div>
<div class="control-group">
<label for="select-net">Velg nettverk og sikkerhetspolicy</label>
<select id="select-net" placeholder="Velg oppsett for nettverk og sikkerhet"></select>
</div>
<div class="form-group">
<label for="labname">Navn på lab</label>
<input type="name" class="form-control" id="labname" placeholder="Navn på lab" value="">
</div>
<div class="control-group">
<label for="select-images2">Tilgjengelige maskinimage</label>
<select id="select-images2" class="repositories" placeholder="Gjør et utvalg av image"></select>
<!-- <p class="itemdesc">Du kan også velge å <a href="#">laste opp egne image</a></p> -->
</div>
<div class="control-group">
<label for="select-gr">Velg undervisningsgruppe</label>
<select id="select-gr" placeholder="Velg gruppe..."></select>
</div>
<div class="control-group">
<label for="select-it">Velg instanstype</label>
<select id="select-it" class="repositories" placeholder="Velg instanstype"></select>
<!-- <p class="itemdesc">Sjekk <a href="#">prislista</a> for detaljer.</p> -->
</div>
<div class="control-group">
<label for="select-net">Velg nettverk og sikkerhetspolicy</label>
<select id="select-net" placeholder="Velg oppsett for nettverk og sikkerhet"></select>
</div>
<div class="row">
<div class="col-md-6">
<div class="control-group">
<label for="select-loc">Velg lokasjon</label>
<select id="select-loc" class="repositories" placeholder="Velg lokasjon"></select>
</div>
<div class="control-group">
<label for="select-images2">Tilgjengelige maskinimage</label>
<select id="select-images2" class="repositories" placeholder="Gjør et utvalg av image"></select>
<!-- <p class="itemdesc">Du kan også velge å <a href="#">laste opp egne image</a></p> -->
</div>
<div class="control-group">
<label for="select-it">Velg instanstype</label>
<select id="select-it" class="repositories" placeholder="Velg instanstype"></select>
<!-- <p class="itemdesc">Sjekk <a href="#">prislista</a> for detaljer.</p> -->
</div>
<div class="col-md-3">
<div class="form-group">
<label for="instance-num">Max instanser per student</label>
<input type="number" class="form-control" id="instance-num" placeholder="Max instanser" min="1" max="99" value="1">
<div class="row">
<div class="col-md-6">
<div class="control-group">
<label for="select-loc">Velg lokasjon</label>
<select id="select-loc" class="repositories" placeholder="Velg lokasjon"></select>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="instance-tot">Max instanser totalt</label>
<input type="number" class="form-control" id="instance-tot" placeholder="Max instanser" min="1" max="99" value="99">
<div class="col-md-3">
<div class="form-group">
<label for="instance-num">Max instanser per student</label>
<input type="number" class="form-control" id="instance-num" placeholder="Max instanser" min="1" max="99" value="1">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="instance-tot">Max instanser totalt</label>
<input type="number" class="form-control" id="instance-tot" placeholder="Max instanser" min="1" max="99" value="99">
</div>
</div>
</div>
</div>
<div class="row" style="display: none">
<div class="row" style="display: none">
<div class="col-md-6">
<div class="col-md-6">
<div class="form-group">
<label for="period-from">Oppstartsdato</label>
<input type="text" class="form-control" id="period-from">
<p class="itemdesc">Studentene vil ikke kunne opprette noen maskiner før ved midnatt denne datoen.</p>
</div>
<div class="form-group">
<label for="period-from">Oppstartsdato</label>
<input type="text" class="form-control" id="period-from">
<p class="itemdesc">Studentene vil ikke kunne opprette noen maskiner før ved midnatt denne datoen.</p>
</div>
</div>
<div class="col-md-6">
<div class="col-md-6">
<div class="form-group">
<label for="period-to">Nedstenging av lab</label>
<input type="text" class="form-control" id="period-to">
<p class="itemdesc">Etter datoen for nedstenging av lab-en vil alle maskinene automatisk slettes.</p>
</div>
<div class="form-group">
<label for="period-to">Nedstenging av lab</label>
<input type="text" class="form-control" id="period-to">
<p class="itemdesc">Etter datoen for nedstenging av lab-en vil alle maskinene automatisk slettes.</p>
</div>
</div>
</div>
<script>
var date = new Date();
var opts = {
format: "yyyy-mm-dd",
language: "no",
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
startDate: date
};
$('#period-from').datepicker(opts);
$('#period-to').datepicker(opts);
</script>
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
<p class="gutter">
<a class="btn btn-primary submit" target="_blank"
href="/" role="button">
<span class="glyphicon glyphicon-cloud"></span> Opprett ny lab</a>
</p>
<script>
var date = new Date();
var opts = {
format: "yyyy-mm-dd",
language: "no",
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
startDate: date
};
$('#period-from').datepicker(opts);
$('#period-to').datepicker(opts);
</script>
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
<p class="gutter">
<a class="btn btn-primary submit" target="_blank"
href="/" role="button">
<span class="glyphicon glyphicon-cloud"></span> Opprett ny lab</a>
</p>
</form>
<pre id="debug">
</pre>
<!-- <pre id="debug">
</pre> -->
<div class="sectionCreating" style="display:none">
<a href="#" class="btn btn-primary"><img src="/img/tailspin.svg" alt=""> oppretter lab</a>
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment