layout template

This commit is contained in:
Simon Gschnell
2023-12-07 15:59:01 +01:00
parent 02e7ef12de
commit a48cbaabb9
8 changed files with 774 additions and 294 deletions
+1 -1
View File
@@ -3,7 +3,7 @@ $includesArray = array(
'title' => 'Stundenplan',
'customJSModules' => ['public/js/apps/Cis/Profil.js'],
'tabulator5' => true,
'customCSSs' => ['public/css/components/calendar.css', 'public/css/components/FilterComponent.css'],
'customCSSs' => ['public/css/components/calendar.css', 'public/css/components/FilterComponent.css','public/css/components/Profil.css'],
);
+42
View File
@@ -0,0 +1,42 @@
@media (max-width: 991px) {
.md-invisible{
display:none;
}
}
@media (min-width: 992px) {
.lg-invisible{
display:none;
}
}
/* dl {
width: 100%;
overflow: hidden;
padding: 0;
margin: 0
}
dt {
float: left;
width: 35%;
padding: 0;
margin: 0
}
dd {
float: left;
width: 50%;
padding: 0;
margin: 0
}
*/
+6 -3
View File
@@ -3,6 +3,7 @@ import StudentProfil from "../../components/Cis/Profil/StudentProfil.js";
import MitarbeiterProfil from "../../components/Cis/Profil/MitarbeiterProfil.js";
import ViewStudentProfil from "../../components/Cis/Profil/StudentViewProfil.js";
import ViewMitarbeiterProfil from "../../components/Cis/Profil/MitarbeiterViewProfil.js";
import Base from "../../components/Cis/Profil/Base.js";
import fhcapifactory from "../api/fhcapifactory.js";
Vue.$fhcapi = fhcapifactory;
@@ -11,7 +12,7 @@ Vue.$fhcapi = fhcapifactory;
const app = Vue.createApp({
components: {
Base,
StudentProfil,
MitarbeiterProfil,
ViewStudentProfil,
@@ -41,15 +42,17 @@ const app = Vue.createApp({
}
this.view = res.data?.view;
this.data = res.data?.data;
//* only for testing purposes and needs to be deleted after
this.data.base = "Base";
});
},
template:`
<div>
<div v-if="notFoundUID">
<h3>Es wurden keine oder mehrere Profile für {{this.notFoundUID}} gefunden</h3>
</div>
<component v-else :is="view" :data="data" ></component>
<component v-else :is="data?.base" :data="data" ></component>
</div>`
+295
View File
@@ -0,0 +1,295 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
export default {
components: {
CoreFilterCmpt,
},
data() {
return {
funktionen_table_options: {
height: 300,
layout: "fitColumns",
data: [
{
Bezeichnung: "",
Organisationseinheit: "",
Gültig_von: "",
Gültig_bis: "",
Wochenstunden: "",
},
],
columns: [
{ title: "Bezeichnung", field: "Bezeichnung", headerFilter: true },
{
title: "Organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,
},
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true },
{
title: "Wochenstunden",
field: "Wochenstunden",
headerFilter: true,
},
],
},
betriebsmittel_table_options: {
height: 300,
layout: "fitColumns",
data: [{ betriebsmittel: "<a href='#'>test</a>", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
title: "Betriebsmittel",
field: "betriebsmittel",
headerFilter: true,
},
{ title: "Nummer", field: "Nummer", headerFilter: true },
{
title: "Ausgegeben_am",
field: "Ausgegeben_am",
headerFilter: true,
},
],
},
};
},
//? this is the prop passed to the dynamic component with the custom data of the view
props: ["data"],
methods: {
sperre_foto_function(value) {
if (!this.data) {
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then((res) => {
this.data.foto_sperre = res.data.foto_sperre;
});
},
},
computed: {
refreshMailTo() {
return `mailto:info.mio@technikum-wien.at?subject=Datenkorrektur&body=Die%20Profildaten%20für%20User%20'${this.data.username}'%20sind%20nicht%20korrekt.%0DHier, die richtigen Daten:%0A%0ANachname:%20${this.data.nachname}%0AVorname:%20${this.data.vorname}%0AGeburtsdatum:${this.data.gebdatum}%0AGeburtsort:%20${this.data.gebort}%0ATitelPre:${this.data.titel}%20%0ATitelPost:${this.data.postnomen}%20%0A%0A***%0DPlatz für weitere (nicht angeführte Daten)%0D***%0A%0A[Bitte%20übermitteln%20Sie%20uns%20etwaige%20Dokumente%20zum%20Beleg%20der%20Änderung]`
},
get_image_base64_src() {
if (!this.data) {
return "";
}
return "data:image/jpeg;base64," + this.data.foto;
},
//? this computed function returns all the informations for the first column in the profil
personData() {
if (!this.data) {
return {};
}
return {
Allgemein: {
Username: this.data.username,
Anrede: this.data.anrede,
Titel: this.data.titel,
Vorname: this.data.vorname,
Nachname: this.data.nachname,
Postnomen: this.data.postnomen,
Geburtsdatum: this.data.gebdatum,
Geburtsort: this.data.gebort,
Kurzzeichen: this.data.kurzbz,
Telefon: this.data.telefonklappe,
Büro:this.data.ort_kurzbz,
FhAusweisStatus: this.data.zutrittsdatum,
},
};
},
//? this computed function returns the data for the second column in the profil
kontaktInfo() {
if (!this.data) {
return {};
}
return {
emails: this.data.emails,
Kontakte: this.data.kontakte,
Adressen: this.data.adressen,
};
},
},
mounted() {
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
})
this.$refs.funktionenTable.tabulator.on('tableBuilt', () => {
this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
})
},
template: `
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="d-md-none col-12 ">
<!-- DROP DOWN LINKS -->
<div style="background-color:#EEEEEE;" class="row py-4">
<div class="col">
<div class="dropdown">
<button style="width:100%" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Quick links
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12" style="background-color:lightgreen;">
<img class=" img-thumbnail " :src="get_image_base64_src"></img>
</div>
<div class="col-md-6 col-sm-12" style="background-color:lightcoral;">
<div class="row">
<!-- HERE COMES THE INFORMATION -->
<div style="background-color:red" class="col-md-12 col-lg-6">
<div v-for="(wert,bezeichnung) in personData">
<dl class=" mb-0" v-else v-for="(wert,bez) in wert">
<div class="row justify-content-center">
<dt class="col-6" >{{bez}}</dt>
<dd class=" col-6">{{wert?wert:"-"}}</dd>
</div>
</dl>
<div class="row justify-content-center" v-if="bez=='FhAusweisStatus'">
<dt class="col-6" >FH-Ausweis Status</dt>
<dd class=" col-6 m-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
</div>
</div>
<div style="background-color:orange" class="col-lg-6 col-md-12">
<div v-for="(wert,bezeichnung) in personData">
<dl class=" mb-0" v-else v-for="(wert,bez) in wert">
<div class="row justify-content-center">
<dt class="col-6" >{{bez}}</dt>
<dd class=" col-6">{{wert?wert:"-"}}</dd>
</div>
</dl>
<div class="row justify-content-center" v-if="bez=='FhAusweisStatus'">
<dt class="col-6" >FH-Ausweis Status</dt>
<dd class=" col-6 m-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div style="background-color:#EEEEEE;height:200px" class="row d-none d-md-block">
<div class="col">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
</div>
</div>
<div style="background-color: darkgray" class=" row">
<div class="col">
<!-- HIER SIND DIE MAILVERTEILER -->
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- HIER SIND DIE TABELLEN -->
<div class="col-12" style="background-color:purple">
<core-filter-cmpt title="Funktionen" ref="funktionenTable" :tabulator-options="funktionen_table_options" :tableOnly />
</div>
<div class="col-12" style="background-color:orange">
<core-filter-cmpt title="Entlehnte Betriebsmittel" ref="betriebsmittelTable" :tabulator-options="betriebsmittel_table_options" :tableOnly />
</div>
</div>
</div>
<!-- HIER IST DIE RECHTE SEITE MIT DEN LINKS UND DEN MAILVERTEILERN -->
</div>
</div>
`,
};
@@ -1,6 +1,7 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
export default {
components: {
CoreFilterCmpt,
@@ -73,6 +74,10 @@ export default {
},
},
computed: {
refreshMailTo() {
return `mailto:info.mio@technikum-wien.at?subject=Datenkorrektur&body=Die%20Profildaten%20für%20User%20'${this.data.username}'%20sind%20nicht%20korrekt.%0DHier, die richtigen Daten:%0A%0ANachname:%20${this.data.nachname}%0AVorname:%20${this.data.vorname}%0AGeburtsdatum:${this.data.gebdatum}%0AGeburtsort:%20${this.data.gebort}%0ATitelPre:${this.data.titel}%20%0ATitelPost:${this.data.postnomen}%20%0A%0A***%0DPlatz für weitere (nicht angeführte Daten)%0D***%0A%0A[Bitte%20übermitteln%20Sie%20uns%20etwaige%20Dokumente%20zum%20Beleg%20der%20Änderung]`
},
get_image_base64_src() {
if (!this.data) {
return "";
@@ -95,13 +100,17 @@ export default {
Postnomen: this.data.postnomen,
Geburtsdatum: this.data.gebdatum,
Geburtsort: this.data.gebort,
Kurzzeichen: this.data.kurzbz,
Telefon: this.data.telefonklappe,
Büro:this.data.ort_kurzbz,
FhAusweisStatus: this.data.zutrittsdatum,
},
Adressen: this.data.adressen,
SpecialInformation: {
Kurzzeichen: this.data.kurzbz,
Telefon: this.data.telefonklappe,
Büro:this.data.ort_kurzbz,
},
};
},
//? this computed function returns the data for the second column in the profil
@@ -111,9 +120,11 @@ export default {
}
return {
FhAusweisStatus: this.data.zutrittsdatum,
emails: this.data.emails,
Kontakte: this.data.kontakte,
Adressen: this.data.adressen,
};
},
},
@@ -137,20 +148,32 @@ export default {
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<div class="row ">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
<div class="col-md-12 col-lg-9">
<div class="row align-items-center">
<div class="col-2">
<div style="background-color:lightgreen" class="col-md-12 col-lg-2">
<div class="row">
<div class="col">
<div class="align-middle ">
<h3 >Mitarbeiter</h3>
<img class="img-thumbnail" :src="get_image_base64_src"></img>
<img class=" img-thumbnail " :height="" :src="get_image_base64_src"></img>
</div>
<div style="background-color:#EEEEEE" class=" lg-invisible col row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
</div>
<div class="row">
<div class="col">
<div v-if="data.foto_sperre ">
@@ -160,31 +183,36 @@ export default {
<a href="#" @click.prevent="sperre_foto_function(true)" class="text-decoration-none" v-else>Profilfoto sperren</a>
</div>
</div>
</div>
<div class="col m-4">
<div style="background-color:lightblue" class="col-lg-10 col-md-12 ">
<div class="row">
<div :class="{'col-lg-12':true, 'col-xl-6':true, 'order-1':bezeichnung=='Allgemein', 'order-3':bezeichnung=='SpecialInformation', 'order-4':bezeichnung=='Adressen'}" v-for="(wert,bezeichnung) in personData">
<div style="background-color:lightsalmon" :class="{ 'col-lg-12':true, 'col-xl-6':true, 'order-1':bezeichnung=='Allgemein', 'order-4':bezeichnung=='Adressen'}" v-for="(wert,bezeichnung) in personData">
<dl class="m-0" v-if="bezeichnung=='Adressen'">
<dt>Adressen</dt>
<dd class="text-end m-0" v-for="element in wert">
{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}
</dd>
</dl>
<dl class="m-0" v-else v-for="(wert,bez) in wert">
<dt >{{bez}}</dt>
<dd class="text-end m-0">{{wert?wert:"-"}}</dd>
<dl class=" mb-3" v-else v-for="(wert,bez) in wert">
<div class="row justify-content-center" v-if="bez=='FhAusweisStatus'">
<dt class="col-md-6 col-xxl-4 m-0" >FH-Ausweis Status</dt>
<dd class=" col-md-6 col-xxl-4 m-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
<div v-else class="row justify-content-center">
<dt class="col-md-6 col-xxl-4 m-0" >{{bez}}</dt>
<dd class=" col-md-6 col-xxl-4 m-0">{{wert?wert:"-"}}</dd>
</div>
</dl>
</div>
@@ -192,46 +220,69 @@ export default {
<div class="col-lg-12 col-xl-6 order-2">
<dl v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<dt class="mb-0">FH-Ausweis Status</dt>
<dd class="mb-0 text-end">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
<div style="background-color: lightcoral" class="col-lg-12 col-xl-6 order-2 ">
<dl v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<!-- WAS MOVED TO THE FIRST INFO BOX -->
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<dt class="mb-0">eMail</dt>
<dd v-for="email in wert" class="mb-0 text-end">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></dd>
</div>
<div class="justify-content-center row mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<dt class="col-md-6 col-xxl-4 mb-0">FH-Ausweis Status</dt>
<div class="col-md-6 col-xxl-4">
<dd class="mb-0 ">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<dt class="mb-0">Private Kontakte</dt>
<dd class="row text-end" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</dd>
</div>
</dl>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<dt class="col-md-6 col-xxl-4 mb-0">eMail</dt>
<div class="col-md-6 col-xxl-4">
<dd v-for="email in wert" class="mb-0 ">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></dd>
</div>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<dt class="col-md-6 col-xxl-4 mb-0">Private Kontakte</dt>
<div class="col-md-6 col-xxl-4">
<dd class="row justify-end" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</dd>
</div>
</div>
<!-- HIER SIND DIE ADRESSEN -->
<div class=" justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung=='Adressen'">
<dt class="col-md-6 col-xxl-4">Adressen</dt>
<div class="col-md-6 col-xxl-4">
<dd class=" m-0" v-for="element in wert">
{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}
</dd>
</div>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<p>Sollten Ihre Daten nicht mehr aktuell sein, klicken Sie bitte <a :href="refreshMailTo">hier</a></p>
</div>
</div>
<div class="row my-5">
@@ -248,8 +299,8 @@ export default {
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<div class="col-md-12 col-lg-3 ">
<div style="background-color:#EEEEEE" class="row md-invisible py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
@@ -264,6 +315,7 @@ export default {
</div>
</div>
</div>
</div>
`,
@@ -114,103 +114,122 @@ export default {
template: `
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
<div class="col-2">
<div class="row">
<div class="col">
<h3 >Mitarbeiter</h3>
<img class="img-thumbnail" :src="get_image_base64_src"></img>
</div>
<div class="col">
<h3 >Mitarbeiter</h3>
<div v-for="(wert,bezeichnung) in personData">
<div class="mb-3" v-if="typeof wert == 'object' && bezeichnung=='Adressen'"><span style="display:block" v-for="element in wert">{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}</span></div>
<div v-else class="mb-3" ><span style="display:block;" v-for="(val,bez) in wert">{{bez}}: {{val}}</span></div>
</div>
</div>
<div class="col">
<div style="list-style:none">
<p v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<p class="mb-0"><b>FH-Ausweis Status</b></p>
<p class="mb-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</p>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<p class="mb-0"><b>eMail</b></p>
<p v-for="email in wert" class="mb-0">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></p>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<p class="mb-0"><b>Private Kontakte</b></p>
<div class="row" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</div>
</div>
</p>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-12">
<core-filter-cmpt title="Funktionen" ref="funktionenTable" :tabulator-options="funktionen_table_options" :tableOnly />
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
<div class="col m-4">
<div class="row">
<div :class="{'col-lg-12':true, 'col-xl-6':true, 'order-1':bezeichnung=='Allgemein', 'order-3':bezeichnung=='SpecialInformation'}" v-for="(wert,bezeichnung) in personData">
<dl class="m-0" v-else v-for="(wert,bez) in wert">
<dt >{{bez}}</dt>
<dd class="text-end m-0">{{wert?wert:"-"}}</dd>
</dl>
</div>
<div class="col-lg-12 col-xl-6 order-2">
<dl v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<dt class="mb-0">FH-Ausweis Status</dt>
<dd class="mb-0 text-end">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<dt class="mb-0">eMail</dt>
<dd v-for="email in wert" class="mb-0 text-end">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></dd>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<dt class="mb-0">Private Kontakte</dt>
<dd class="row text-end" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-12">
<core-filter-cmpt title="Funktionen" ref="funktionenTable" :tabulator-options="funktionen_table_options" :tableOnly />
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
`,
};
+123 -95
View File
@@ -51,6 +51,9 @@ export default {
},
},
computed: {
refreshMailTo() {
return `mailto:info.mio@technikum-wien.at?subject=Datenkorrektur&body=Die%20Profildaten%20für%20User%20'${this.data.username}'%20sind%20nicht%20korrekt.%0DHier, die richtigen Daten:%0A%0ANachname:%20${this.data.nachname}%0AVorname:%20${this.data.vorname}%0AGeburtsdatum:${this.data.gebdatum}%0AGeburtsort:%20${this.data.gebort}%0ATitelPre:${this.data.titel}%20%0ATitelPost:${this.data.postnomen}%20%0A%0A***%0DPlatz für weitere (nicht angeführte Daten)%0D***%0A%0A[Bitte%20übermitteln%20Sie%20uns%20etwaige%20Dokumente%20zum%20Beleg%20der%20Änderung]`
},
get_image_base64_src() {
if (!this.data) {
return "";
@@ -72,11 +75,10 @@ export default {
Vorname: this.data.vorname,
Nachname: this.data.nachname,
Postnomen: this.data.postnomen,
},
GeburtsDaten: {
Geburtsdatum: this.data.gebdatum,
Geburtsort: this.data.gebort,
},
Adressen: this.data.adressen,
SpecialInformation: {
Studiengang: this.data.studiengang,
@@ -118,85 +120,108 @@ export default {
template: `
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<img class="img-thumbnail" :src="get_image_base64_src"></img>
</div>
</div>
<div class="row">
<div class="col">
<div v-if="data.foto_sperre ">
<p class="m-0">Profilfoto gesperrt</p>
<a href="#" @click.prevent="sperre_foto_function(false)" class="text-decoration-none">Sperre des Profilfotos aufheben</a>
</div>
<a href="#" @click.prevent="sperre_foto_function(true)" class="text-decoration-none" v-else>Profilfoto sperren</a>
</div>
</div>
</div>
<div class="col">
<h3 >Student</h3>
<div v-for="(wert,bezeichnung) in personData">
<div class="mb-3" v-if="typeof wert == 'object' && bezeichnung=='Adressen'"><p style="display:block" v-for="element in wert">{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}</p></div>
<div v-else class="mb-3" ><span style="display:block;" v-for="(val,bez) in wert">{{bez}}: {{val}}</span></div>
</div>
</div>
<div class="col">
<div >
<p v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<p class="mb-0"><b>FH-Ausweis Status</b></p>
<p class="mb-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</p>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<p class="mb-0"><b>eMail</b></p>
<p v-for="email in wert" class="mb-0">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></p>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<p class="mb-0"><b>Private Kontakte</b></p>
<div class="row" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</div>
</div>
</p>
</div>
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
</div>
<div class="col-2">
<div class="row">
<div class="col">
<h3 >Student</h3>
<img class="img-thumbnail" :src="get_image_base64_src"></img>
</div>
</div>
<div class="row">
<div class="col">
<div v-if="data.foto_sperre ">
<p class="m-0">Profilfoto gesperrt</p>
<a href="#" @click.prevent="sperre_foto_function(false)" class="text-decoration-none">Sperre des Profilfotos aufheben</a>
</div>
<a href="#" @click.prevent="sperre_foto_function(true)" class="text-decoration-none" v-else>Profilfoto sperren</a>
</div>
</div>
</div>
<div class="col m-4">
<div class="row">
<div :class="{'col-lg-12':true, 'col-xl-6':true, 'order-1':bezeichnung=='Allgemein', 'order-3':bezeichnung=='SpecialInformation', 'order-4':bezeichnung=='Adressen'}" v-for="(wert,bezeichnung) in personData">
<dl class="m-0" v-if="bezeichnung=='Adressen'">
<dt>Adressen</dt>
<dd class="text-end m-0" v-for="element in wert">
{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}
</dd>
</dl>
<dl class="m-0" v-else v-for="(wert,bez) in wert">
<dt >{{bez}}</dt>
<dd class="text-end m-0">{{wert?wert:"-"}}</dd>
</dl>
</div>
<div class="col-lg-12 col-xl-6 order-2">
<dl v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<dt class="mb-0">FH-Ausweis Status</dt>
<dd class="mb-0 text-end">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="row my-5">
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<dt class="mb-0">eMail</dt>
<dd v-for="email in wert" class="mb-0 text-end">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></dd>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<dt class="mb-0">Private Kontakte</dt>
<dd class="row text-end" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<p>Sollten Ihre Daten nicht mehr aktuell sein, klicken Sie bitte <a :href="refreshMailTo">hier</a></p>
</div>
</div>
<div class="row my-5">
<div class="col-12">
@@ -208,26 +233,29 @@ export default {
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
`,
};
@@ -80,73 +80,114 @@ export default {
template: `
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
<div class="col-2">
<div class="row">
<div class="col">
<h3 >Student</h3>
<img class="img-thumbnail" :src="get_image_base64_src"></img>
</div>
<div class="col">
<h3 >Student</h3>
<div v-for="(wert,bezeichnung) in personData">
<div class="mb-3" v-if="typeof wert == 'object' && bezeichnung=='Adressen'"><span style="display:block" v-for="element in wert">{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}</span></div>
<div v-else class="mb-3" ><span style="display:block;" v-for="(val,bez) in wert">{{bez}}: {{val}}</span></div>
</div>
</div>
<div class="col">
<div style="list-style:none">
<p v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<p class="mb-0"><b>eMail</b></p>
<p v-for="email in wert" class="mb-0">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></p>
</div>
</p>
</div>
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
<div class="col m-4">
<div class="row">
<div :class="{'col-lg-12':true, 'col-xl-6':true, 'order-1':bezeichnung=='Allgemein', 'order-3':bezeichnung=='SpecialInformation'}" v-for="(wert,bezeichnung) in personData">
<dl class="m-0" v-else v-for="(wert,bez) in wert">
<dt >{{bez}}</dt>
<dd class="text-end m-0">{{wert?wert:"-"}}</dd>
</dl>
</div>
<div class="col-lg-12 col-xl-6 order-2">
<dl v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<dt class="mb-0">FH-Ausweis Status</dt>
<dd class="mb-0 text-end">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<dt class="mb-0">eMail</dt>
<dd v-for="email in wert" class="mb-0 text-end">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></dd>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<dt class="mb-0">Private Kontakte</dt>
<dd class="row text-end" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
`,
};