Verified Commit f4679031 authored by Raphael Fetzer's avatar Raphael Fetzer 👷
Browse files

Neues Papier-Design, kein Reload beim Download

parent 0aa059ad
......@@ -123,6 +123,10 @@ a {
height: 300px;
}
#design_preview img {
box-shadow: 0 0 10px #e4e4e4;
}
@media (min-width:768px) {
.container .jumbotron, .container-fluid .jumbotron {
margin-left: 200px;
......
......@@ -93,6 +93,12 @@
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxes">Optionale Formularinhalte</label>
<div class="col-md-4">
<div class="checkbox">
<label for="zeitraum">
<input type="checkbox" name="checkboxes" id="zeitraum">
Kurszeitraum (von...bis) anzeigen
</label>
</div>
<div class="checkbox">
<label for="punkte">
<input type="checkbox" name="checkboxes" id="punkte">
......@@ -127,9 +133,10 @@
<div class="col-md-4">
<select id="design" name="design" class="form-control" onchange="showPreview();">
<option value="serioes">Seriös</option>
<option value="verspielt">Verspielt</option>
<option value="gestrichelt">Gestrichelt</option>
<option value="papier">Papier</option>
</select>
<span class="help-block">Spiegelt nicht die obigen Einstellungen wider.</span>
<span class="help-block">Die Designvorschau zeigt das Erscheinungsbild und spiegelt nicht die obigen Einstellungen wider (eigenes Logo, optionale Formularinhalte, ...).</span>
<div id="design_preview" onchange="showPreview();"></div>
......@@ -139,17 +146,17 @@
</fieldset>
<fieldset>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="download">Vorlage herunterladen</label>
<div class="col-md-4">
<input type="submit" name="download" value="Download" class="btn btn-primary">
</div>
</div>
</fieldset>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="download">Vorlage herunterladen</label>
<div class="col-md-4">
<input type="button" name="download" onclick="BuildZIP();" class="btn btn-primary" value="Download">
</div>
</div>
</fieldset>
</form>
</div>
</div>
......@@ -177,7 +184,7 @@
</div>
<script>
var version = "0.12";
var version = "0.13";
document.write("<script type='text/javascript' src='js/zertifikat.js?v=" + version + "'><\/script>");
</script>
......
var zip = new JSZip();
var logoname = "logo.png";
document.getElementById("version").innerHTML = version;
showPreview();
// Standardlogo verwenden
JSZipUtils.getBinaryContent("./img/logo.png", function (err, data) {
if(err) {
throw err; // or handle the error
}
zip.file(logoname, data);
});
function BuildZIP() {
var zip = new JSZip();
var logoname = "logo.png";
var filecounter = 0;
var files = [];
function generateZIP(){
zip.generateAsync({
type:"blob",
compression:"DEFLATE",
platform: "UNIX"
})
.then(function(content) {
saveAs(content, "openolat-leistungsnachweis-"+document.getElementById('design').value.toLowerCase()+".zip");
}, function (e) {
showError(e);
});
}
var zertifikat = "\
<!--\n\
Zweck: Vorlage für Leistungsnachweise/Zertifikate in OpenOLAT\n\
......@@ -100,22 +106,33 @@ function BuildZIP() {
bottom: 1cm;\n\
}";
if (document.getElementById("design").value === "serioes") {
//Seriös
}
else {
//Verspielt
switch (document.getElementById("design").value) {
case "gestrichelt":
zertifikat += "\n\n\
body {\n\
border: 3px dashed black;\n\
padding: 1em;\n\
background-color: beige;\n\
background-color: #eaf3ff;\n\
font-family: Courier;\n\
}\n\
\n\
.footer {\n\
bottom: 2cm;\n\
}";
break;
case "papier":
zertifikat += "\n\n\
html {\n\
font-family: Georgia, serif;\n\
background-image: url(papier.jpg);\n\
background-size: cover;\n\
}\n\
}";
files.push("papier.jpg");
break;
default:
// seriös
}
zertifikat += "\n\
......@@ -138,6 +155,9 @@ function BuildZIP() {
var logofile = document.getElementById('logofile').files[0];
if (logofile != null) {
zip.file(logoname, logofile);
} else {
// Standardlogo verwenden
files.push("logo.png");
}
zertifikat += "\n\
......@@ -154,8 +174,13 @@ function BuildZIP() {
// Name, Zeitraum, Titel
zertifikat += "\n\
<p>Hiermit bescheinigen wir, dass</p>\n\
<h2>$fullName</h2>\n\
<p>vom $from bis $to an der Veranstaltung</p>\n\
<h2>$fullName</h2>\n\<p>";
if (document.getElementById("zeitraum").checked){
zertifikat += "vom $from bis $to ";
}
zertifikat += "an der Veranstaltung</p>\n\
<h2>„$title“</h2>";
// Punkte
......@@ -189,17 +214,27 @@ function BuildZIP() {
zip.file("index.html", zertifikat, {binary:false});
zip.generateAsync({
type:"blob",
compression:"DEFLATE",
platform: "UNIX"
})
.then(function(content) {
// see FileSaver.js
saveAs(content, "openolat-leistungsnachweis.zip");
if (files.length == 0) {
generateZIP();
}
files.forEach(function(file){
// loading a file and add it in a zip file
JSZipUtils.getBinaryContent("./img/" + file, function (err, data) {
if(err) {
throw err; // or handle the error
}
zip.file(file, data, {binary:true});
filecounter++;
if (filecounter == files.length) {
generateZIP();
}
});
});
}
function showPreview() {
document.getElementById("design_preview").innerHTML = "<img src='img/"+document.getElementById('design').value+".jpg'>";
}
\ No newline at end of file
document.getElementById("design_preview").innerHTML = "<img src='img/vorschau_"+document.getElementById('design').value+".jpg'>";
}
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