mirror of
https://gitlab.com/comenius-institut/foerbico/metadata-form.git
synced 2025-12-10 00:34:31 +00:00
1502 lines
71 KiB
HTML
1502 lines
71 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<title>OER Metadaten Formular für religionspädagogische Bildung</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"/>
|
|
|
|
<!-- jQuery Select2 -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"/>
|
|
|
|
<!-- datepicker -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.de.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.en-US.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"/>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
|
|
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
|
|
|
|
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-de_DE.min.js"></script>
|
|
<script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
|
|
<style>
|
|
.btn-primary {
|
|
background-color: #0A1F40;
|
|
border: 0;
|
|
}
|
|
.btn-outline-primary {
|
|
color: #0A1F40;
|
|
border-color: #0A1F40;
|
|
}
|
|
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
|
|
background-color: #0A1F40;
|
|
border-color: #0A1F40;
|
|
}
|
|
.btn-outline-primary:hover {
|
|
background-color: #0A1F40;
|
|
border-color: #0A1F40;
|
|
}
|
|
|
|
.main {
|
|
margin-top: 40px;
|
|
padding: 0 60px;
|
|
margin-bottom: 50px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.input-dropdown {
|
|
background: #F1F6DF;
|
|
color: #0A1F40;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
}
|
|
|
|
.context-selector {
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.context-selector .btn {
|
|
margin: 0 5px;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.context-selector .btn.active {
|
|
background-color: #0A1F40;
|
|
color: white;
|
|
}
|
|
|
|
.context-section {
|
|
display: none;
|
|
}
|
|
|
|
.context-section.active {
|
|
display: block;
|
|
}
|
|
|
|
@media only screen and (min-width: 1400px) {
|
|
.dualpane {
|
|
display: flex;
|
|
flex-direction: row;
|
|
column-gap: 40px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1400px) {
|
|
.dualpane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 40px;
|
|
}
|
|
.widescreen {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-light bg-light shadow" style="display: flex; justify-content: space-between;">
|
|
<div class="navbar-brand">
|
|
<img src="logo.svg" height="50" width="50" alt="LOGO">
|
|
</div>
|
|
<div>
|
|
<h2 data-i18n="FORM_HEADING">FOERBICO Metadaten Formular</h2>
|
|
</div>
|
|
<div class="form-inline">
|
|
<form class=" ml-auto mr-3">
|
|
<button class="btn" type="button" data-toggle="modal" data-target="#importModal">Import</button>
|
|
</form>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarLanguageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span id="selectedLanguageLabel">DE</span>
|
|
</a>
|
|
<div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarLanguageDropdown">
|
|
<a class="dropdown-item" onclick="changeLanguage('en')">English</a>
|
|
<a class="dropdown-item" onclick="changeLanguage('de')">Deutsch</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="importModalLabel" data-i18n="LABEL_IMPORT">Import</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<textarea rows="15" class="form-control" id="importData" placeholder="Daten" data-i18n-placeholder="LABEL_IMPORT_DATA_PLACEHOLDER"></textarea>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="LABEL_CANCEL">Abbrechen</button>
|
|
<button type="button" class="btn btn-primary" onclick="importData()" data-i18n="LABEL_IMPORT">Import</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="context-selector">
|
|
<div class="btn-group" role="group" aria-label="Anwendungskontext">
|
|
<button type="button" class="btn btn-outline-primary active" id="context-university" data-i18n="LABEL_CONTEXT_UNIVERSITY">Hochschule</button>
|
|
<button type="button" class="btn btn-outline-primary" id="context-school" data-i18n="LABEL_CONTEXT_SCHOOL">Schule</button>
|
|
<button type="button" class="btn btn-outline-primary" id="context-parish" data-i18n="LABEL_CONTEXT_PARISH">Gemeinde</button>
|
|
<button type="button" class="btn btn-outline-primary" id="context-catechesis" data-i18n="LABEL_CONTEXT_CATECHESIS">Katechese</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dualpane">
|
|
<!-- left side -->
|
|
<div style="flex: 2;" class="card">
|
|
<form id="metadata-form" class="was-validated">
|
|
<div class="form-group">
|
|
<label for="inputTitle" class="form-row col-form-label" data-i18n="LABEL_TITLE">Titel</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control" id="inputTitle" placeholder="Titel"
|
|
data-i18n-placeholder="LABEL_TITLE" value="" oninput="generate()" required>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputDescription" class="form-row col-form-label"
|
|
data-i18n="LABEL_DESCRIPTION">Beschreibung</label>
|
|
<div class="form-row">
|
|
<textarea class="form-control" id="inputDescription" oninput="generate()" placeholder="Beschreibung" data-i18n-placeholder="LABEL_DESCRIPTION"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputTags" class="form-row col-form-label" data-i18n="LABEL_KEYWORDS">Schlagworte</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control" id="inputTags" placeholder="Komma getrennte Liste von Schlagworten"
|
|
data-i18n-placeholder="LABEL_KEYWORDS_PLACEHOLDER" value="" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Religious Context -->
|
|
<div class="form-group">
|
|
<label for="inputReligiousContext" class="form-row col-form-label" data-i18n="LABEL_RELIGIOUS_CONTEXT">Religiöser Kontext</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputReligiousContext" data-i18n-title="LABEL_RELIGIOUS_CONTEXT_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Religious Tradition -->
|
|
<div class="form-group">
|
|
<label for="inputReligiousTradition" class="form-row col-form-label" data-i18n="LABEL_RELIGIOUS_TRADITION">Religiöse Tradition</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputReligiousTradition" data-i18n-title="LABEL_RELIGIOUS_TRADITION_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Educational Context -->
|
|
<div class="form-group">
|
|
<label for="inputEducationalContext" class="form-row col-form-label" data-i18n="LABEL_EDUCATIONAL_CONTEXT">Bildungskontext</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputEducationalContext" data-i18n-title="LABEL_EDUCATIONAL_CONTEXT_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Educational Level -->
|
|
<div class="form-group">
|
|
<label for="inputEducationalLevel" class="form-row col-form-label" data-i18n="LABEL_EDUCATIONALLEVEL">Bildungsstufe</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputEducationalLevel" data-i18n-title="LABEL_EDUCATIONALLEVEL_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Religious Pedagogical Area -->
|
|
<div class="form-group">
|
|
<label for="inputReligionsPedagogicalArea" class="form-row col-form-label" data-i18n="LABEL_RELIGIONS_PEDAGOGICAL_AREA">Religionspädagogischer Lernbereich</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputReligionsPedagogicalArea" data-i18n-title="LABEL_RELIGIONS_PEDAGOGICAL_AREA_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Competency Area -->
|
|
<div class="form-group">
|
|
<label for="inputCompetencyArea" class="form-row col-form-label" data-i18n="LABEL_COMPETENCY_AREA">Kompetenzbereich</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputCompetencyArea" data-i18n-title="LABEL_COMPETENCY_AREA_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Methodological Approach -->
|
|
<div class="form-group">
|
|
<label for="inputMethodologicalApproach" class="form-row col-form-label" data-i18n="LABEL_METHODOLOGICAL_APPROACH">Methodischer Ansatz</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputMethodologicalApproach" data-i18n-title="LABEL_METHODOLOGICAL_APPROACH_CHOOSE" multiple>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theological Perspective -->
|
|
<div class="form-group">
|
|
<label for="inputTheologicalPerspective" class="form-row col-form-label" data-i18n="LABEL_THEOLOGICAL_PERSPECTIVE">Theologische Perspektive</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputTheologicalPerspective" data-i18n-title="LABEL_THEOLOGICAL_PERSPECTIVE_CHOOSE" multiple>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hermeneutical Approach -->
|
|
<div class="form-group">
|
|
<label for="inputHermeneuticalApproach" class="form-row col-form-label" data-i18n="LABEL_HERMENEUTICAL_APPROACH">Hermeneutischer Zugang</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputHermeneuticalApproach" data-i18n-title="LABEL_HERMENEUTICAL_APPROACH_CHOOSE" multiple>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="inputResourceType" class="form-row col-form-label" data-i18n="LABEL_LEARNINGRESOURCETYPE">Materialart</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputResourceType" data-live-search="true" data-i18n-title="LABEL_LEARNINGRESOURCETYPE_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="creator-list" class="form-row col-form-label" data-i18n="LABEL_CREATOR">Autor</label>
|
|
<div class="form-row">
|
|
<ul class="list-group col" id="creator-list">
|
|
<li class="list-group-item">
|
|
<button type="button" onclick="addCreator()" class="btn btn-primary"><i class="fa fa-plus"></i> <span
|
|
data-i18n="LABEL_CREATOR_ADD">Autor hinzufügen</span></button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputSubjectOf" class="form-row col-form-label" data-i18n="LABEL_SUBJECT">Fach</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputSubjectOf" data-live-search="true" data-i18n-title="LABEL_SUBJECT_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputLanguage" class="form-row col-form-label" data-i18n="LABEL_LANGUAGE">Sprache</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputLanguage" data-i18n-title="LABEL_LANGUAGE_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputImage" class="form-row col-form-label" data-i18n="LABEL_IMAGE">Bild</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control" id="inputImage" placeholder="URL"
|
|
data-i18n-placeholder="LABEL_IMAGE_PLACEHOLDER" value="" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputUrl" class="form-row col-form-label" data-i18n="LABEL_URL">URL</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control" id="inputUrl" placeholder="URL"
|
|
data-i18n-placeholder="LABEL_URL" value="" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputStatus" class="form-row col-form-label" data-i18n="LABEL_STATUS">Status</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputStatus" data-i18n-title="LABEL_STATUS_CHOOSE" required>
|
|
<option value="Draft" data-i18n="LABEL_STATUS_DRAFT">Entwurf</option>
|
|
<option value="Published" data-i18n="LABEL_STATUS_PUBLISHED">Veröffentlicht</option>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" id="datepickerContainer" style="display: none;">
|
|
<label for="datepickerInput" class="form-row col-form-label" data-i18n="LABEL_DATEPUBLISHED">Veröffentlichungsdatum</label>
|
|
<div class="form-row">
|
|
<div class="input-group date" id="datepicker">
|
|
<input type="text" class="form-control" id="datepickerInput" required>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
|
|
</div>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputLicense" class="form-row col-form-label" data-i18n="LABEL_LICENSE">Lizenz</label>
|
|
<div class="form-row">
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
<label class="btn btn-outline-primary active">
|
|
<input type="radio" name="licenseType" id="radioLicenseCC" onclick="ccOrSoftwareLicense()" checked> <span data-i18n="LABEL_LICENSE_CC">CC</span>
|
|
</label>
|
|
<label class="btn btn-outline-primary">
|
|
<input type="radio" name="licenseType" id="radioLicenseSoftware" onclick="ccOrSoftwareLicense()"> <span data-i18n="LABEL_LICENSE_SOFTWARE">Software</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="form-row">
|
|
<div class="col-md-6">
|
|
<div id="choicesLicense">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inputLicenseBY" onclick="chooseCCLicense()" checked>
|
|
<label class="form-check-label" for="inputLicenseBY" data-i18n="LABEL_LICENSE_BY">
|
|
BY - Namensnennung erforderlich
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inputLicenseSA" onclick="chooseCCLicense()">
|
|
<label class="form-check-label" for="inputLicenseSA" data-i18n="LABEL_LICENSE_SA">
|
|
SA - Weitergabe unter gleichen Bedingungen
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inputLicenseNC" onclick="chooseCCLicense()">
|
|
<label class="form-check-label" for="inputLicenseNC" data-i18n="LABEL_LICENSE_NC">
|
|
NC - Nur nicht-kommerzielle Nutzung erlaubt
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inputLicenseND" onclick="chooseCCLicense()">
|
|
<label class="form-check-label" for="inputLicenseND" data-i18n="LABEL_LICENSE_ND">
|
|
ND - Keine Bearbeitung erlaubt
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputSoftwareLicense" data-i18n-title="LABEL_LICENSE_SOFTWARE_CHOOSE" disabled>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div id="choosenLicense">
|
|
<div class="form-group">
|
|
<label for="licenseUrl" class="form-row col-form-label" data-i18n="LABEL_LICENSE_URL">Lizenz URL</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control" id="licenseUrl" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="licenseImage" class="form-row col-form-label" data-i18n="LABEL_LICENSE_IMAGE">Lizenz Bild</label>
|
|
<div class="form-row">
|
|
<img id="licenseImage" src="" alt="License Image" style="max-width: 100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="form-row">
|
|
<div class="col-md-6">
|
|
<button type="button" onclick="resetForm()" class="btn btn-primary" data-i18n="LABEL_RESET">Zurücksetzen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- right side -->
|
|
<div style="flex: 1;" class="card">
|
|
<div class="form-group">
|
|
<label for="yaml_output" class="form-row col-form-label" data-i18n="LABEL_OUTPUT_YAML">YAML Ausgabe</label>
|
|
<div class="form-row">
|
|
<textarea class="form-control" id="yaml_output" rows="15" readonly></textarea>
|
|
</div>
|
|
<div class="form-row mt-2">
|
|
<button type="button" id="button_copy_generated_output_yaml" class="btn btn-primary" onclick="copy_generated_output('yaml_output')" disabled data-i18n="LABEL_COPY">Kopieren</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="json_output" class="form-row col-form-label" data-i18n="LABEL_OUTPUT_JSON">JSON Ausgabe</label>
|
|
<div class="form-row">
|
|
<textarea class="form-control" id="json_output" rows="15" readonly></textarea>
|
|
</div>
|
|
<div class="form-row mt-2">
|
|
<button type="button" id="button_copy_generated_output_json" class="btn btn-primary" onclick="copy_generated_output('json_output')" disabled data-i18n="LABEL_COPY">Kopieren</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="copied_to_clipboard_toast" style="position: absolute; top: 20px; right: 20px;" data-delay="2000">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto" data-i18n="LABEL_COPIED_TO_CLIPBOARD">In die Zwischenablage kopiert</strong>
|
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const ccLicenses = [
|
|
{
|
|
"name": "CC0 1.0 Universell (CC0 1.0) Public Domain Dedication",
|
|
"url": "https://creativecommons.org/publicdomain/zero/1.0/",
|
|
"image": "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/cc-zero.png",
|
|
"requires": {
|
|
"BY": false,
|
|
"SA": false,
|
|
"NC": false,
|
|
"ND": false
|
|
}
|
|
},
|
|
{
|
|
"name": "CC BY 4.0 International",
|
|
"url": "https://creativecommons.org/licenses/by/4.0/",
|
|
"image": "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by.png",
|
|
"requires": {
|
|
"BY": true,
|
|
"SA": false,
|
|
"NC": false,
|
|
"ND": false
|
|
}
|
|
},
|
|
{
|
|
"name": "CC BY-SA 4.0 International",
|
|
"url": "https://creativecommons.org/licenses/by-sa/4.0/",
|
|
"image": "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-sa.png",
|
|
"requires": {
|
|
"BY": true,
|
|
"SA": true,
|
|
"NC": false,
|
|
"ND": false
|
|
}
|
|
},
|
|
{
|
|
"name": "CC BY-NC 4.0 International",
|
|
"url": "https://creativecommons.org/licenses/by-nc/4.0/",
|
|
"image": "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc.png",
|
|
"requires": {
|
|
"BY": true,
|
|
"SA": false,
|
|
"NC": true,
|
|
"ND": false
|
|
}
|
|
},
|
|
{
|
|
"name": "CC BY-NC-SA 4.0 International",
|
|
"url": "https://creativecommons.org/licenses/by-nc-sa/4.0/",
|
|
"image": "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png",
|
|
"requires": {
|
|
"BY": true,
|
|
"SA": true,
|
|
"NC": true,
|
|
"ND": false
|
|
}
|
|
},
|
|
{
|
|
"name": "CC BY-ND 4.0 International",
|
|
"url": "https://creativecommons.org/licenses/by-nd/4.0/",
|
|
"image": "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nd.png",
|
|
"requires": {
|
|
"BY": true,
|
|
"SA": false,
|
|
"NC": false,
|
|
"ND": true
|
|
}
|
|
},
|
|
{
|
|
"name": "CC BY-NC-ND 4.0 International",
|
|
"url": "https://creativecommons.org/licenses/by-nc-nd/4.0/",
|
|
"image": "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-nd.png",
|
|
"requires": {
|
|
"BY": true,
|
|
"SA": false,
|
|
"NC": true,
|
|
"ND": true
|
|
}
|
|
}
|
|
];
|
|
|
|
const softwareLicenses = [
|
|
{
|
|
"name": "LABEL_LICENSE_SOFTWARE_MIT",
|
|
"url": "https://opensource.org/licenses/MIT"
|
|
},
|
|
{
|
|
"name": "LABEL_LICENSE_SOFTWARE_APACHE",
|
|
"url": "https://opensource.org/licenses/Apache-2.0"
|
|
},
|
|
{
|
|
"name": "LABEL_LICENSE_SOFTWARE_GPL3",
|
|
"url": "https://opensource.org/licenses/GPL-3.0"
|
|
},
|
|
{
|
|
"name": "LABEL_LICENSE_SOFTWARE_GPL2",
|
|
"url": "https://opensource.org/licenses/GPL-2.0"
|
|
},
|
|
{
|
|
"name": "LABEL_LICENSE_SOFTWARE_BSD",
|
|
"url": "https://opensource.org/licenses/BSD-3-Clause"
|
|
}
|
|
];
|
|
|
|
let vocabInstitutions = [];
|
|
let vocabSubjects = [];
|
|
let vocabLanguages = [];
|
|
let vocabEducationalLevels = [];
|
|
let vocabResourceTypes = [];
|
|
let vocabReligiousContexts = [];
|
|
let vocabReligiousTraditions = [];
|
|
let vocabEducationalContexts = [];
|
|
let vocabReligionsPedagogicalAreas = [];
|
|
let vocabCompetencyAreas = [];
|
|
let vocabMethodologicalApproaches = [];
|
|
let vocabTheologicalPerspectives = [];
|
|
let vocabHermeneuticalApproaches = [];
|
|
|
|
function loadVocabularies() {
|
|
$.getJSON("vocabs/organizations.json", function(data) {
|
|
vocabInstitutions = data;
|
|
});
|
|
$.getJSON("vocabs/subject.json", function(data) {
|
|
vocabSubjects = data;
|
|
fillSubjectSelect();
|
|
});
|
|
$.getJSON("vocabs/language.json", function(data) {
|
|
vocabLanguages = data;
|
|
fillLanguageSelect();
|
|
});
|
|
$.getJSON("vocabs/educationalLevel.json", function(data) {
|
|
vocabEducationalLevels = data;
|
|
fillEducationalLevelSelect();
|
|
});
|
|
$.getJSON("vocabs/hcrt.json", function(data) {
|
|
vocabResourceTypes = data;
|
|
fillResourceTypeSelect();
|
|
});
|
|
$.getJSON("vocabs/religiousContext.json", function(data) {
|
|
vocabReligiousContexts = data;
|
|
fillReligiousContextSelect();
|
|
});
|
|
$.getJSON("vocabs/religiousTradition.json", function(data) {
|
|
vocabReligiousTraditions = data;
|
|
fillReligiousTraditionSelect();
|
|
});
|
|
$.getJSON("vocabs/educationalContext.json", function(data) {
|
|
vocabEducationalContexts = data;
|
|
fillEducationalContextSelect();
|
|
});
|
|
$.getJSON("vocabs/religionsPedagogicalArea.json", function(data) {
|
|
vocabReligionsPedagogicalAreas = data;
|
|
fillReligionsPedagogicalAreaSelect();
|
|
});
|
|
$.getJSON("vocabs/competencyArea.json", function(data) {
|
|
vocabCompetencyAreas = data;
|
|
fillCompetencyAreaSelect();
|
|
});
|
|
$.getJSON("vocabs/methodologicalApproach.json", function(data) {
|
|
vocabMethodologicalApproaches = data;
|
|
fillMethodologicalApproachSelect();
|
|
});
|
|
$.getJSON("vocabs/theologicalPerspective.json", function(data) {
|
|
vocabTheologicalPerspectives = data;
|
|
fillTheologicalPerspectiveSelect();
|
|
});
|
|
$.getJSON("vocabs/hermeneuticalApproach.json", function(data) {
|
|
vocabHermeneuticalApproaches = data;
|
|
fillHermeneuticalApproachSelect();
|
|
});
|
|
}
|
|
|
|
function fillSubjectSelect() {
|
|
vocabSubjects.forEach((item) => {
|
|
$("#inputSubjectOf").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillLanguageSelect() {
|
|
vocabLanguages.forEach((item) => {
|
|
$("#inputLanguage").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillEducationalLevelSelect() {
|
|
vocabEducationalLevels.forEach((item) => {
|
|
$("#inputEducationalLevel").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillResourceTypeSelect() {
|
|
vocabResourceTypes.forEach((item) => {
|
|
$("#inputResourceType").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillReligiousContextSelect() {
|
|
vocabReligiousContexts.forEach((item) => {
|
|
$("#inputReligiousContext").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillReligiousTraditionSelect() {
|
|
vocabReligiousTraditions.forEach((item) => {
|
|
$("#inputReligiousTradition").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillEducationalContextSelect() {
|
|
vocabEducationalContexts.forEach((item) => {
|
|
$("#inputEducationalContext").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillReligionsPedagogicalAreaSelect() {
|
|
vocabReligionsPedagogicalAreas.forEach((item) => {
|
|
$("#inputReligionsPedagogicalArea").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillCompetencyAreaSelect() {
|
|
vocabCompetencyAreas.forEach((item) => {
|
|
$("#inputCompetencyArea").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillMethodologicalApproachSelect() {
|
|
vocabMethodologicalApproaches.forEach((item) => {
|
|
$("#inputMethodologicalApproach").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillTheologicalPerspectiveSelect() {
|
|
vocabTheologicalPerspectives.forEach((item) => {
|
|
$("#inputTheologicalPerspective").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function fillHermeneuticalApproachSelect() {
|
|
vocabHermeneuticalApproaches.forEach((item) => {
|
|
$("#inputHermeneuticalApproach").append('<option value="' + item + '" data-i18n="' + item + '">' + item + '</option>');
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function chooseCCLicense() {
|
|
const BY = document.getElementById("inputLicenseBY").checked;
|
|
const SA = document.getElementById("inputLicenseSA").checked;
|
|
const NC = document.getElementById("inputLicenseNC").checked;
|
|
const ND = document.getElementById("inputLicenseND").checked;
|
|
|
|
if (SA && ND) {
|
|
document.getElementById("inputLicenseND").checked = false;
|
|
}
|
|
|
|
const license = ccLicenses.find((license) => {
|
|
return license.requires.BY === BY &&
|
|
license.requires.SA === SA &&
|
|
license.requires.NC === NC &&
|
|
license.requires.ND === ND;
|
|
});
|
|
|
|
if (license) {
|
|
document.getElementById("licenseUrl").value = license.url;
|
|
document.getElementById("licenseImage").src = license.image;
|
|
document.getElementById("licenseImage").alt = license.name;
|
|
} else {
|
|
document.getElementById("licenseUrl").value = "";
|
|
document.getElementById("licenseImage").src = "";
|
|
document.getElementById("licenseImage").alt = "";
|
|
}
|
|
generate();
|
|
}
|
|
|
|
function addSoftwareLicenses() {
|
|
softwareLicenses.forEach((item) => {
|
|
$("#inputSoftwareLicense").append('<option value="' + item.url + '" data-i18n="' + item.name + '">'+item.name+'</option>');
|
|
});
|
|
}
|
|
|
|
function ccOrSoftwareLicense() {
|
|
if(document.getElementById("radioLicenseCC").checked) {
|
|
document.getElementById("inputLicenseBY").disabled = false;
|
|
document.getElementById("choicesLicense").style = "";
|
|
chooseCCLicense();
|
|
document.getElementById("inputSoftwareLicense").setAttribute("disabled", "true");
|
|
} else {
|
|
document.getElementById("inputLicenseBY").disabled = true;
|
|
document.getElementById("choicesLicense").style = "color: gray";
|
|
document.getElementById("choosenLicense").style = "color: gray";
|
|
document.getElementById("inputSoftwareLicense").removeAttribute("disabled");
|
|
}
|
|
$('.selectpicker').selectpicker('refresh');
|
|
generate();
|
|
}
|
|
|
|
function splitKeywords(keywordString) {
|
|
const keywords = keywordString.split(",");
|
|
return keywords.map((k) => k.trim());
|
|
}
|
|
|
|
function changeCreatorType(creatorListItem, type) {
|
|
if (type === "Person") {
|
|
creatorListItem.getElementsByClassName("person-label")[0].classList.add("active");
|
|
creatorListItem.getElementsByClassName("person-radio")[0].setAttribute("checked", "true");
|
|
creatorListItem.getElementsByClassName("organization-label")[0].classList.remove("active");
|
|
creatorListItem.getElementsByClassName("organization-radio")[0].removeAttribute("checked");
|
|
} else {
|
|
creatorListItem.getElementsByClassName("person-label")[0].classList.remove("active");
|
|
creatorListItem.getElementsByClassName("person-radio")[0].removeAttribute("checked");
|
|
creatorListItem.getElementsByClassName("organization-label")[0].classList.add("active");
|
|
creatorListItem.getElementsByClassName("organization-radio")[0].setAttribute("checked", "true");
|
|
}
|
|
|
|
const personElements = creatorListItem.getElementsByClassName("person-element");
|
|
for (let i = 0; i < personElements.length; i++) {
|
|
personElements[i].style.display = type === "Person" ? "flex" : "none";
|
|
}
|
|
const organizationElements = creatorListItem.getElementsByClassName("organization-element")
|
|
for (let i = 0; i < organizationElements.length; i++) {
|
|
organizationElements[i].style.display = type === "Organization" ? "flex" : "none"
|
|
}
|
|
|
|
generate();
|
|
}
|
|
|
|
function changeAffiliationType(creatorListItem, type) {
|
|
const affiliationElements = creatorListItem.getElementsByClassName("inputAffiliation")
|
|
for (const element of affiliationElements) {
|
|
if (element.classList.contains("customAffiliation")) {
|
|
element.disabled = type !== "custom";
|
|
} else {
|
|
element.disabled = type === "custom";
|
|
}
|
|
}
|
|
$('.selectpicker').selectpicker('refresh');
|
|
generate();
|
|
}
|
|
|
|
function changeOrganizationType(creatorListItem, type) {
|
|
const organizationElements = creatorListItem.getElementsByClassName("inputOrganization")
|
|
for (const element of organizationElements) {
|
|
if (element.classList.contains("customOrganization")) {
|
|
element.disabled = type !== "custom";
|
|
} else {
|
|
element.disabled = type === "custom";
|
|
}
|
|
}
|
|
$('.selectpicker').selectpicker('refresh');
|
|
generate();
|
|
}
|
|
|
|
function addCreator(firstName = "", lastName = "", authorId = "", institution = "", organizationName = "", type = "Person", affiliationName = "") {
|
|
const creatorList = document.getElementById("creator-list");
|
|
const item = document.createElement("li");
|
|
item.setAttribute("class", "list-group-item");
|
|
let institutionOptions = "";
|
|
let organizationOptions = "";
|
|
$.each(vocabInstitutions, function (i, item) {
|
|
institutionOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
|
|
organizationOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
|
|
});
|
|
if (institution?.length > 0 && !vocabInstitutions.find((e) => e["ror"] === institution)) {
|
|
if (affiliationName?.length > 0) {
|
|
institutionOptions += '<option value="' + institution + '"' + ' selected>' + affiliationName + '</option>';
|
|
}
|
|
if (organizationName?.length > 0) {
|
|
organizationOptions += '<option value="' + institution + '"' + ' selected>' + organizationName + '</option>';
|
|
}
|
|
}
|
|
let customInstitutionSelected = institution === "" && affiliationName !== "";
|
|
let customOrganizationSelected = institution === "" && organizationName !== "";
|
|
let radioGroupName = creatorList.childElementCount > 1 ? $(creatorList.lastElementChild.previousElementSibling).find('.inputType').find('input').attr('name') : ''
|
|
radioGroupName += 'x'
|
|
item.innerHTML = `
|
|
<div class="form-row">
|
|
<div class="col-md-6 inputType">
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
<label class="btn btn-outline-primary person-label ${type === "Person" ? "active" : ""}">
|
|
<input type="radio" name="${radioGroupName}" class="person-radio" ${type === "Person" ? "checked" : ""} onclick="changeCreatorType(this.closest('.list-group-item'), 'Person')"> <span data-i18n="LABEL_CREATOR_TYPE_PERSON">Person</span>
|
|
</label>
|
|
<label class="btn btn-outline-primary organization-label ${type === "Organization" ? "active" : ""}">
|
|
<input type="radio" name="${radioGroupName}" class="organization-radio" ${type === "Organization" ? "checked" : ""} onclick="changeCreatorType(this.closest('.list-group-item'), 'Organization')"> <span data-i18n="LABEL_CREATOR_TYPE_ORGANIZATION">Organisation</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<button type="button" onclick="removeCreator(this.closest('.list-group-item'))" class="btn btn-danger float-right"><i class="fa fa-trash"></i> <span data-i18n="LABEL_CREATOR_REMOVE">Entfernen</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="form-row person-element" style="display: ${type === "Person" ? "flex" : "none"}">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="inputFirstName" class="form-row col-form-label" data-i18n="LABEL_CREATOR_FIRSTNAME">Vorname</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control inputFirstName" placeholder="Vorname" data-i18n-placeholder="LABEL_CREATOR_FIRSTNAME" value="${firstName}" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="inputLastName" class="form-row col-form-label" data-i18n="LABEL_CREATOR_LASTNAME">Nachname</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control inputLastName" placeholder="Nachname" data-i18n-placeholder="LABEL_CREATOR_LASTNAME" value="${lastName}" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-row person-element" style="display: ${type === "Person" ? "flex" : "none"}">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="inputAuthorId" class="form-row col-form-label" data-i18n="LABEL_CREATOR_AUTHORID">ORCID</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control inputAuthorId" placeholder="ORCID" data-i18n-placeholder="LABEL_CREATOR_AUTHORID" value="${authorId}" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="inputAffiliation" class="form-row col-form-label" data-i18n="LABEL_CREATOR_AFFILIATION">Affiliation</label>
|
|
<div class="form-row">
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
<label class="btn btn-outline-primary ${!customInstitutionSelected ? "active" : ""}">
|
|
<input type="radio" name="affiliationType" ${!customInstitutionSelected ? "checked" : ""} onclick="changeAffiliationType(this.closest('.list-group-item'), 'select')"> <span data-i18n="LABEL_CREATOR_AFFILIATION_SELECT">Auswählen</span>
|
|
</label>
|
|
<label class="btn btn-outline-primary ${customInstitutionSelected ? "active" : ""}">
|
|
<input type="radio" name="affiliationType" ${customInstitutionSelected ? "checked" : ""} onclick="changeAffiliationType(this.closest('.list-group-item'), 'custom')"> <span data-i18n="LABEL_CREATOR_AFFILIATION_CUSTOM">Eigene</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker inputAffiliation" data-live-search="true" data-i18n-title="LABEL_CREATOR_AFFILIATION_CHOOSE" ${customInstitutionSelected ? "disabled" : ""} onchange="generate()">
|
|
<option value="" data-i18n="LABEL_CREATOR_AFFILIATION_NONE">Keine</option>
|
|
${institutionOptions}
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control inputAffiliation customAffiliation" placeholder="Affiliation" data-i18n-placeholder="LABEL_CREATOR_AFFILIATION" value="${customInstitutionSelected ? affiliationName : ""}" ${!customInstitutionSelected ? "disabled" : ""} oninput="generate()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-row organization-element" style="display: ${type === "Organization" ? "flex" : "none"}">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="inputOrganization" class="form-row col-form-label" data-i18n="LABEL_CREATOR_ORGANIZATION">Organisation</label>
|
|
<div class="form-row">
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
<label class="btn btn-outline-primary ${!customOrganizationSelected ? "active" : ""}">
|
|
<input type="radio" name="organizationType" ${!customOrganizationSelected ? "checked" : ""} onclick="changeOrganizationType(this.closest('.list-group-item'), 'select')"> <span data-i18n="LABEL_CREATOR_ORGANIZATION_SELECT">Auswählen</span>
|
|
</label>
|
|
<label class="btn btn-outline-primary ${customOrganizationSelected ? "active" : ""}">
|
|
<input type="radio" name="organizationType" ${customOrganizationSelected ? "checked" : ""} onclick="changeOrganizationType(this.closest('.list-group-item'), 'custom')"> <span data-i18n="LABEL_CREATOR_ORGANIZATION_CUSTOM">Eigene</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker inputOrganization" data-live-search="true" data-i18n-title="LABEL_CREATOR_ORGANIZATION_CHOOSE" ${customOrganizationSelected ? "disabled" : ""} onchange="generate()">
|
|
<option value="" data-i18n="LABEL_CREATOR_ORGANIZATION_NONE">Keine</option>
|
|
${organizationOptions}
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control inputOrganization customOrganization" placeholder="Organisation" data-i18n-placeholder="LABEL_CREATOR_ORGANIZATION" value="${customOrganizationSelected ? organizationName : ""}" ${!customOrganizationSelected ? "disabled" : ""} oninput="generate()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
creatorList.insertBefore(item, creatorList.lastElementChild);
|
|
$('.selectpicker').selectpicker('refresh');
|
|
i18next.init({
|
|
lng: 'de',
|
|
debug: true,
|
|
resources: {}
|
|
}, function(err, t) {
|
|
localize();
|
|
});
|
|
generate();
|
|
}
|
|
|
|
function removeCreator(creatorListItem) {
|
|
creatorListItem.remove();
|
|
generate();
|
|
}
|
|
|
|
function getCreators() {
|
|
const creators = [];
|
|
const creatorListItems = document.getElementById("creator-list").querySelectorAll(".list-group-item");
|
|
for (let i = 0; i < creatorListItems.length - 1; i++) {
|
|
const creatorListItem = creatorListItems[i];
|
|
const type = creatorListItem.getElementsByClassName("person-radio")[0].checked ? "Person" : "Organization";
|
|
if (type === "Person") {
|
|
const firstName = creatorListItem.getElementsByClassName("inputFirstName")[0].value;
|
|
const lastName = creatorListItem.getElementsByClassName("inputLastName")[0].value;
|
|
const authorId = creatorListItem.getElementsByClassName("inputAuthorId")[0].value;
|
|
const affiliationElements = creatorListItem.getElementsByClassName("inputAffiliation");
|
|
let affiliation = "";
|
|
let affiliationName = "";
|
|
for (const element of affiliationElements) {
|
|
if (element.classList.contains("customAffiliation")) {
|
|
if (!element.disabled) {
|
|
affiliationName = element.value;
|
|
}
|
|
} else {
|
|
if (!element.disabled) {
|
|
affiliation = element.value;
|
|
if (affiliation) {
|
|
affiliationName = element.selectedOptions[0].text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (firstName || lastName) {
|
|
const creator = {
|
|
type: "Person",
|
|
givenName: firstName,
|
|
familyName: lastName,
|
|
};
|
|
if (authorId) {
|
|
creator.id = authorId;
|
|
}
|
|
if (affiliation) {
|
|
creator.affiliation = {
|
|
type: "Organization",
|
|
name: affiliationName,
|
|
};
|
|
if (affiliation !== affiliationName) {
|
|
creator.affiliation.id = affiliation;
|
|
}
|
|
} else if (affiliationName) {
|
|
creator.affiliation = {
|
|
type: "Organization",
|
|
name: affiliationName,
|
|
};
|
|
}
|
|
creators.push(creator);
|
|
}
|
|
} else {
|
|
const organizationElements = creatorListItem.getElementsByClassName("inputOrganization");
|
|
let organization = "";
|
|
let organizationName = "";
|
|
for (const element of organizationElements) {
|
|
if (element.classList.contains("customOrganization")) {
|
|
if (!element.disabled) {
|
|
organizationName = element.value;
|
|
}
|
|
} else {
|
|
if (!element.disabled) {
|
|
organization = element.value;
|
|
if (organization) {
|
|
organizationName = element.selectedOptions[0].text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (organizationName) {
|
|
const creator = {
|
|
type: "Organization",
|
|
name: organizationName,
|
|
};
|
|
if (organization && organization !== organizationName) {
|
|
creator.id = organization;
|
|
}
|
|
creators.push(creator);
|
|
}
|
|
}
|
|
}
|
|
return creators;
|
|
}
|
|
|
|
function copy_generated_output(text_element_id) {
|
|
if (!navigator.clipboard) {
|
|
return;
|
|
}
|
|
navigator.clipboard.writeText(document.getElementById(text_element_id).value).then(function() {
|
|
$("#copied_to_clipboard_toast").toast("show");
|
|
}, function(err) {
|
|
console.error('Async: Could not copy text: ', err);
|
|
});
|
|
}
|
|
|
|
function resetForm() {
|
|
if (window.confirm(i18next.t("LABEL_CONFIRM_RESET"))) {
|
|
document.getElementById("metadata-form").reset();
|
|
$('.selectpicker').on('change', function (e) {
|
|
generate();
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
setCreators();
|
|
chooseCCLicense();
|
|
ccOrSoftwareLicense();
|
|
createOrUpdateDatePicker(reset=true);
|
|
generate();
|
|
}
|
|
}
|
|
|
|
function generate() {
|
|
const creators = getCreators()
|
|
const selectedLanguages = $('#inputLanguage').val();
|
|
const selectedSubjects = $('#inputSubjectOf').val();
|
|
const selectedResourceTypes = $('#inputResourceType').val();
|
|
const selectedEducationalLevel = $('#inputEducationalLevel').val();
|
|
const selectedReligiousContexts = $('#inputReligiousContext').val();
|
|
const selectedReligiousTraditions = $('#inputReligiousTradition').val();
|
|
const selectedEducationalContexts = $('#inputEducationalContext').val();
|
|
const selectedReligionsPedagogicalAreas = $('#inputReligionsPedagogicalArea').val();
|
|
const selectedCompetencyAreas = $('#inputCompetencyArea').val();
|
|
const selectedMethodologicalApproaches = $('#inputMethodologicalApproach').val();
|
|
const selectedTheologicalPerspectives = $('#inputTheologicalPerspective').val();
|
|
const selectedHermeneuticalApproaches = $('#inputHermeneuticalApproach').val();
|
|
const identifier = document.getElementById("inputUrl").value;
|
|
const datePublished = $("#datepickerInput").datepicker("getDate");
|
|
let meta = {
|
|
"@context": "https://schema.org/",
|
|
creativeWorkStatus: document.getElementById("inputStatus").value,
|
|
type: "LearningResource",
|
|
name: document.getElementById("inputTitle").value,
|
|
description: document.getElementById("inputDescription").value,
|
|
}
|
|
if(document.getElementById("radioLicenseCC").checked) {
|
|
meta.license = document.getElementById("licenseUrl").value
|
|
} else {
|
|
meta.license = document.getElementById("inputSoftwareLicense").value
|
|
}
|
|
if (identifier) {
|
|
meta.id = identifier;
|
|
}
|
|
if (creators.length > 0) {
|
|
meta.creator = creators
|
|
}
|
|
if (document.getElementById("inputTags").value) {
|
|
meta.keywords = splitKeywords(document.getElementById("inputTags").value)
|
|
}
|
|
if (selectedLanguages.length > 0) {
|
|
meta.inLanguage = selectedLanguages;
|
|
}
|
|
if (selectedSubjects.length > 0) {
|
|
meta.about = selectedSubjects
|
|
}
|
|
if (document.getElementById("inputImage").value) {
|
|
meta.image = document.getElementById("inputImage").value
|
|
}
|
|
if (selectedResourceTypes.length > 0) {
|
|
meta.learningResourceType = selectedResourceTypes
|
|
}
|
|
if (selectedEducationalLevel.length > 0) {
|
|
meta.educationalLevel = selectedEducationalLevel
|
|
}
|
|
if (selectedReligiousContexts.length > 0) {
|
|
meta.religiousContext = selectedReligiousContexts
|
|
}
|
|
if (selectedReligiousTraditions.length > 0) {
|
|
meta.religiousTradition = selectedReligiousTraditions
|
|
}
|
|
if (selectedEducationalContexts.length > 0) {
|
|
meta.educationalContext = selectedEducationalContexts
|
|
}
|
|
if (selectedReligionsPedagogicalAreas.length > 0) {
|
|
meta.religionsPedagogicalArea = selectedReligionsPedagogicalAreas
|
|
}
|
|
if (selectedCompetencyAreas.length > 0) {
|
|
meta.competencyArea = selectedCompetencyAreas
|
|
}
|
|
if (selectedMethodologicalApproaches.length > 0) {
|
|
meta.methodologicalApproach = selectedMethodologicalApproaches
|
|
}
|
|
if (selectedTheologicalPerspectives.length > 0) {
|
|
meta.theologicalPerspective = selectedTheologicalPerspectives
|
|
}
|
|
if (selectedHermeneuticalApproaches.length > 0) {
|
|
meta.hermeneuticalApproach = selectedHermeneuticalApproaches
|
|
}
|
|
if (meta.creativeWorkStatus == "Published" && datePublished) {
|
|
let dateString = datePublished.getFullYear() + "-"
|
|
+ ('0' + (datePublished.getMonth()+1)).slice(-2) + "-"
|
|
+ ('0' + datePublished.getDate()).slice(-2);
|
|
meta.datePublished = dateString;
|
|
}
|
|
document.getElementById("yaml_output").value = jsyaml.dump(meta);
|
|
document.getElementById("json_output").value = JSON.stringify(meta, null, 2);
|
|
if (navigator.clipboard) {
|
|
document.getElementById("button_copy_generated_output_yaml").disabled = false
|
|
document.getElementById("button_copy_generated_output_json").disabled = false
|
|
}
|
|
}
|
|
|
|
function setCreators(creators) {
|
|
const creatorsElement = document.getElementById("creator-list").querySelectorAll(".list-group-item");
|
|
for (let i = 0; i < creatorsElement.length - 1; i++) {
|
|
removeCreator(creatorsElement[i]);
|
|
}
|
|
if (creators) {
|
|
for (let i = 0; i < creators.length; i++) {
|
|
if (creators[i].type === "Organization") {
|
|
const name = creators[i].name ? creators[i].name : "";
|
|
const ror = creators[i].id ? creators[i].id : "";
|
|
addCreator("", "", "", ror, name, "Organization");
|
|
} else {
|
|
const firstName = creators[i].givenName ? creators[i].givenName : creators[i].name.split(" ")[0];
|
|
const lastName = creators[i].familyName ? creators[i].familyName : creators[i].name.split(" ").slice(1).join(" ");
|
|
const authorId = creators[i].id ? creators[i].id : "";
|
|
let affiliation = "";
|
|
let affiliationName = "";
|
|
if (creators[i].affiliation) {
|
|
affiliation = creators[i].affiliation.id ? creators[i].affiliation.id : "";
|
|
affiliationName = creators[i].affiliation.name ? creators[i].affiliation.name : "";
|
|
}
|
|
addCreator(firstName, lastName, authorId, affiliation, "", "Person", affiliationName);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function createOrUpdateDatePicker(reset=false) {
|
|
if (document.getElementById("inputStatus").value === "Published") {
|
|
document.getElementById("datepickerContainer").style.display = "block";
|
|
if (reset) {
|
|
$("#datepickerInput").datepicker("setDate", new Date());
|
|
}
|
|
} else {
|
|
document.getElementById("datepickerContainer").style.display = "none";
|
|
}
|
|
generate();
|
|
}
|
|
|
|
function importData() {
|
|
const importData = document.getElementById("importData").value;
|
|
let data;
|
|
try {
|
|
data = JSON.parse(importData);
|
|
} catch (e) {
|
|
try {
|
|
data = jsyaml.load(importData);
|
|
} catch (e) {
|
|
alert(i18next.t("LABEL_IMPORT_ERROR"));
|
|
return;
|
|
}
|
|
}
|
|
if (data.name) {
|
|
document.getElementById("inputTitle").value = data.name;
|
|
}
|
|
if (data.description) {
|
|
document.getElementById("inputDescription").value = data.description;
|
|
}
|
|
if (data.keywords) {
|
|
document.getElementById("inputTags").value = data.keywords.join(", ");
|
|
}
|
|
if (data.image) {
|
|
document.getElementById("inputImage").value = data.image;
|
|
}
|
|
if (data.id) {
|
|
document.getElementById("inputUrl").value = data.id;
|
|
}
|
|
if (data.creativeWorkStatus) {
|
|
document.getElementById("inputStatus").value = data.creativeWorkStatus;
|
|
createOrUpdateDatePicker();
|
|
}
|
|
if (data.datePublished) {
|
|
$("#datepickerInput").datepicker("setDate", new Date(data.datePublished));
|
|
}
|
|
if (data.license) {
|
|
const ccLicense = ccLicenses.find((license) => license.url === data.license);
|
|
if (ccLicense) {
|
|
document.getElementById("radioLicenseCC").checked = true;
|
|
document.getElementById("inputLicenseBY").checked = ccLicense.requires.BY;
|
|
document.getElementById("inputLicenseSA").checked = ccLicense.requires.SA;
|
|
document.getElementById("inputLicenseNC").checked = ccLicense.requires.NC;
|
|
document.getElementById("inputLicenseND").checked = ccLicense.requires.ND;
|
|
ccOrSoftwareLicense();
|
|
} else {
|
|
document.getElementById("radioLicenseSoftware").checked = true;
|
|
document.getElementById("inputSoftwareLicense").value = data.license;
|
|
ccOrSoftwareLicense();
|
|
}
|
|
}
|
|
if (data.inLanguage) {
|
|
$('#inputLanguage').selectpicker('val', data.inLanguage);
|
|
}
|
|
if (data.about) {
|
|
$('#inputSubjectOf').selectpicker('val', data.about);
|
|
}
|
|
if (data.learningResourceType) {
|
|
$('#inputResourceType').selectpicker('val', data.learningResourceType);
|
|
}
|
|
if (data.educationalLevel) {
|
|
$('#inputEducationalLevel').selectpicker('val', data.educationalLevel);
|
|
}
|
|
if (data.religiousContext) {
|
|
$('#inputReligiousContext').selectpicker('val', data.religiousContext);
|
|
}
|
|
if (data.religiousTradition) {
|
|
$('#inputReligiousTradition').selectpicker('val', data.religiousTradition);
|
|
}
|
|
if (data.educationalContext) {
|
|
$('#inputEducationalContext').selectpicker('val', data.educationalContext);
|
|
}
|
|
if (data.religionsPedagogicalArea) {
|
|
$('#inputReligionsPedagogicalArea').selectpicker('val', data.religionsPedagogicalArea);
|
|
}
|
|
if (data.competencyArea) {
|
|
$('#inputCompetencyArea').selectpicker('val', data.competencyArea);
|
|
}
|
|
if (data.methodologicalApproach) {
|
|
$('#inputMethodologicalApproach').selectpicker('val', data.methodologicalApproach);
|
|
}
|
|
if (data.theologicalPerspective) {
|
|
$('#inputTheologicalPerspective').selectpicker('val', data.theologicalPerspective);
|
|
}
|
|
if (data.hermeneuticalApproach) {
|
|
$('#inputHermeneuticalApproach').selectpicker('val', data.hermeneuticalApproach);
|
|
}
|
|
if (data.creator) {
|
|
setCreators(data.creator);
|
|
}
|
|
$('.selectpicker').selectpicker('refresh');
|
|
generate();
|
|
$('#importModal').modal('hide');
|
|
}
|
|
|
|
function changeLanguage(language) {
|
|
i18next.changeLanguage(language, (err, t) => {
|
|
if (err) return console.log('something went wrong loading', err);
|
|
document.getElementById("selectedLanguageLabel").innerText = language.toUpperCase();
|
|
localize();
|
|
});
|
|
}
|
|
|
|
function localize() {
|
|
document.querySelectorAll('[data-i18n]').forEach(function(element) {
|
|
element.innerHTML = i18next.t(element.getAttribute('data-i18n'));
|
|
});
|
|
document.querySelectorAll('[data-i18n-placeholder]').forEach(function(element) {
|
|
element.placeholder = i18next.t(element.getAttribute('data-i18n-placeholder'));
|
|
});
|
|
document.querySelectorAll('[data-i18n-title]').forEach(function(element) {
|
|
element.title = i18next.t(element.getAttribute('data-i18n-title'));
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
|
|
function setupContextSelector() {
|
|
// Set up context selector buttons
|
|
$('.context-selector .btn').click(function() {
|
|
$('.context-selector .btn').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
// Show/hide fields based on context
|
|
const contextId = $(this).attr('id');
|
|
|
|
// Basic fields are always shown
|
|
|
|
// Show/hide specific fields based on context
|
|
if (contextId === 'context-university') {
|
|
// Show university-specific fields
|
|
$('#inputEducationalLevel').closest('.form-group').show();
|
|
$('#inputTheologicalPerspective').closest('.form-group').show();
|
|
$('#inputHermeneuticalApproach').closest('.form-group').show();
|
|
} else if (contextId === 'context-school') {
|
|
// Show school-specific fields
|
|
$('#inputEducationalLevel').closest('.form-group').show();
|
|
$('#inputTheologicalPerspective').closest('.form-group').hide();
|
|
$('#inputHermeneuticalApproach').closest('.form-group').hide();
|
|
} else if (contextId === 'context-parish') {
|
|
// Show parish-specific fields
|
|
$('#inputEducationalLevel').closest('.form-group').hide();
|
|
$('#inputTheologicalPerspective').closest('.form-group').show();
|
|
$('#inputHermeneuticalApproach').closest('.form-group').hide();
|
|
} else if (contextId === 'context-catechesis') {
|
|
// Show catechesis-specific fields
|
|
$('#inputEducationalLevel').closest('.form-group').hide();
|
|
$('#inputTheologicalPerspective').closest('.form-group').show();
|
|
$('#inputHermeneuticalApproach').closest('.form-group').hide();
|
|
}
|
|
|
|
// Update form validation
|
|
$('.selectpicker').selectpicker('refresh');
|
|
generate();
|
|
});
|
|
|
|
// Initialize with university context
|
|
$('#context-university').click();
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
i18next.init({
|
|
lng: 'de',
|
|
debug: true,
|
|
resources: {
|
|
de: {
|
|
translation: {}
|
|
},
|
|
en: {
|
|
translation: {}
|
|
}
|
|
}
|
|
}, function(err, t) {
|
|
$.getJSON("i18n/de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/religious-de.json", function(religiousData) {
|
|
i18next.addResourceBundle('de', 'translation', religiousData, true);
|
|
$.getJSON("i18n/en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/religious-en.json", function(religiousData) {
|
|
i18next.addResourceBundle('en', 'translation', religiousData, true);
|
|
$.getJSON("i18n/subject-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/subject-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/educationalLevel-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/educationalLevel-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/language-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/language-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/hcrt-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/hcrt-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
|
|
// Load religious education specific translations
|
|
$.getJSON("i18n/religiousContext-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/religiousContext-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/religiousTradition-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/religiousTradition-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/educationalContext-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/educationalContext-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/religionsPedagogicalArea-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/religionsPedagogicalArea-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/competencyArea-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/competencyArea-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/methodologicalApproach-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/methodologicalApproach-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/theologicalPerspective-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/theologicalPerspective-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
$.getJSON("i18n/hermeneuticalApproach-de.json", function(data) {
|
|
i18next.addResourceBundle('de', 'translation', data);
|
|
$.getJSON("i18n/hermeneuticalApproach-en.json", function(data) {
|
|
i18next.addResourceBundle('en', 'translation', data);
|
|
|
|
localize();
|
|
loadVocabularies();
|
|
addSoftwareLicenses();
|
|
chooseCCLicense();
|
|
|
|
// Initialize context selector
|
|
setupContextSelector();
|
|
|
|
// Initialize datepicker
|
|
$('#datepicker').datepicker({
|
|
format: 'yyyy-mm-dd',
|
|
language: 'de',
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
});
|
|
|
|
// Set up status change handler
|
|
$('#inputStatus').on('change', function() {
|
|
createOrUpdateDatePicker();
|
|
});
|
|
|
|
// Initialize with current date
|
|
$("#datepickerInput").datepicker("setDate", new Date());
|
|
|
|
// Generate initial output
|
|
generate();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|