blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-16 14:32:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

changes the tel and mailto links of all profil views

Browse Source
This commit is contained in:
Simon Gschnell
2023-12-19 15:34:28 +01:00
parent 030be5b83f
commit c08171536c
5 changed files with 978 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/controllers/Cis/Profil.php
+3 -3
View File
@@ -129,13 +129,13 @@ class Profil extends Auth_Controller
}
//? querying the telefon number of the office
if(isSuccess($this->MitarbeiterModel->addSelect(["mitarbeiter_uid"])) &&
if(isSuccess($this->MitarbeiterModel->addSelect(["kontakt"])) &&
isSuccess($this->MitarbeiterModel->addJoin("tbl_kontakt", "tbl_mitarbeiter.standort_id = tbl_kontakt.standort_id"))
){
$this->MitarbeiterModel->addLimit(1);
$telefon_res = $this->MitarbeiterModel->loadWhere(["mitarbeiter_uid"=>$this->uid, "kontakttyp"=>"telefon"]);
$telefon_res = $this->MitarbeiterModel->loadWhere(["mitarbeiter_uid"=>$uid, "kontakttyp"=>"telefon"]);
if(isError($telefon_res)){
// error handling
}else{
@@ -179,7 +179,7 @@ class Profil extends Auth_Controller
//? Mailverteiler Info
$res->mailverteiler = $mailverteiler_res;
$res->standort_telefon = $telefon_res;
$res->standort_telefon = $telefon_res->kontakt;
return $res;
public/js/components/Cis/Profil/MitarbeiterProfil.js
+27 -9
View File
@@ -163,6 +163,7 @@ export default {
},
computed: {
//? legacy mailto link to create an email with information that should be changed
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]`;
},
@@ -190,7 +191,7 @@ export default {
return {
Username: this.data.username,
Anrede: this.data.anrede,
Titel: this.data.titel,
Titel: this.data.titelpre,
Postnomen: this.data.postnomen,
};
},
@@ -437,8 +438,11 @@ export default {
<div class=" form-floating mb-2">
<!-- print Telefon link -->
<a v-if="bez=='Telefon'" :href="get_mitarbeiter_standort_telefon" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" >{{wert?wert:''}}</a>
<a v-if="bez=='Telefon'" :href="get_mitarbeiter_standort_telefon" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez">
<input :role="get_mitarbeiter_standort_telefon?'button':''" readonly :value="wert?wert:'-'" class="w-100" style="border:none; outline:none;" />
</a>
<!-- otherwise print input field -->
<input v-else readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
@@ -503,8 +507,10 @@ export default {
</div>
<div class="col">
<div class=" form-floating mb-2">
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type" >{{email.email}}</a>
<label :for="'floating'+email.type">{{email.type }}</label>
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
<input role="button" readonly :value="email.email" class="w-100" style="border:none; outline:none;" />
</a>
<label :for="'floating'+email.type">{{email.type }}</label>
</div>
</div>
</div>
@@ -544,13 +550,25 @@ export default {
<!-- rendering KONTAKT emails -->
<div v-if="element.kontakt.includes('@')" class=" form-floating mb-2">
<a :href="'mailto:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" id="floatingKontakt" >{{element.kontakt}}</a>
<label for="floatingKontakt">{{element.kontakttyp}}</label>
<a :href="'mailto:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
<input role="button" readonly :value="element.kontakt" class="w-100" style="border:none; outline:none;" />
</a>
<label :for="'floating'+element.kontakttyp">{{element.kontakttyp}}</label>
</div>
<!-- rendering KONTAKT phones -->
<div v-else class=" form-floating mb-2">
<a :href="'tel:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" id="floatingKontakt" >{{element.kontakt}}</a>
<label for="floatingKontakt">{{element.kontakttyp}}</label>
<a :href="'tel:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
<input role="button" readonly :value="element.kontakt" class="w-100" style="border:none; outline:none;" />
</a>
<label :for="'floating'+element.kontakttyp">{{element.kontakttyp}}</label>
</div>
</div>
public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+134 -115
View File
@@ -1,24 +1,21 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
export default {
components: {
CoreFilterCmpt,
},
data() {
return {
collapseIconFunktionen:true,
collapseIconFunktionen: true,
funktionen_table_options: {
height: 400,
layout:"fitColumns",
responsiveLayout:"collapse",
responsiveLayoutCollapseUseFormatters:false,
responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
height: 300,
layout: "fitColumns",
responsiveLayout: "collapse",
responsiveLayoutCollapseUseFormatters: false,
responsiveLayoutCollapseFormatter: Vue.$collapseFormatter,
data: [
{
Bezeichnung: "",
Organisationseinheit: "",
@@ -28,87 +25,116 @@ export default {
},
],
columns: [
{
title: "<i id='collapseIconFunktionen' role='button' class='fa-solid fa-angle-down '></i>",
field: "collapse",
headerSort: false,
headerFilter:false,
formatter:"responsiveCollapse",
maxWidth:40,
headerClick:this.collapseFunction,
},
{ title: "Bezeichnung", field: "Bezeichnung", headerFilter: true,minWidth:200, },
//? option when wanting to hide the collapsed list
{
title:
"<i id='collapseIconFunktionen' role='button' class='fa-solid fa-angle-down '></i>",
field: "collapse",
headerSort: false,
headerFilter: false,
formatter: "responsiveCollapse",
maxWidth: 40,
headerClick: this.collapseFunction,
},
{
title: "Bezeichnung",
field: "Bezeichnung",
headerFilter: true,
minWidth: 200,
},
{
title: "Organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,minWidth:200,
headerFilter: true,
minWidth: 200,
},
{
title: "Gültig_von",
field: "Gültig_von",
headerFilter: true,
resizable: true,
minWidth: 200,
},
{
title: "Gültig_bis",
field: "Gültig_bis",
headerFilter: true,
resizable: true,
minWidth: 200,
},
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true, resizable:true,minWidth:200, },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true, resizable:true,minWidth:200, },
{
title: "Wochenstunden",
field: "Wochenstunden",
headerFilter: true,
minWidth:200,
minWidth: 200,
},
],
},
};
},
//? 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;
});
},
collapseFunction (e, column){
collapseFunction(e, column) {
//* the if of the column has to match with the name of the responsive data in the vue component
this[e.target.id] = !this[e.target.id];
//* gets all event icons of the different rows to use the onClick event later
let allClickableIcons = column._column.cells.map(row => {
let allClickableIcons = column._column.cells.map((row) => {
return row.element.children[0];
});
//* changes the icon that shows or hides all the collapsed columns
//* if the replace function does not find the class to replace, it just simply returns false
if(this[e.target.id]){
e.target.classList.replace("fa-angle-up","fa-angle-down");
}else{
e.target.classList.replace("fa-angle-down","fa-angle-up");
if (this[e.target.id]) {
e.target.classList.replace("fa-angle-up", "fa-angle-down");
} else {
e.target.classList.replace("fa-angle-down", "fa-angle-up");
}
//* changes the icon for every collapsed column to open or closed
if(this[e.target.id]){
allClickableIcons.filter(column => {
if (this[e.target.id]) {
allClickableIcons
.filter((column) => {
return !column.classList.contains("open");
}).forEach(col => {col.click();})
}else{
allClickableIcons.filter(column => {
})
.forEach((col) => {
col.click();
});
} else {
allClickableIcons
.filter((column) => {
return column.classList.contains("open");
}).forEach(col => {col.click();})
}
},
})
.forEach((col) => {
col.click();
});
}
},
},
computed: {
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
get_mitarbeiter_standort_telefon(){
if(this.data.standort_telefon){
return "tel:"+ this.data.telefonklappe + this.data.standort_telefon;
}else{
return null;
}
},
//? this computed function returns all the informations for the first column in the profil
personData() {
if (!this.data) {
return {};
@@ -117,7 +143,7 @@ export default {
return {
Username: this.data.username,
Anrede: this.data.anrede,
Titel: this.data.titel,
Titel: this.data.titelpre,
Postnomen: this.data.postnomen,
};
},
@@ -139,29 +165,27 @@ export default {
}
return {
Kurzzeichen: this.data.kurzbz,
Telefon: this.data.telefonklappe,
Telefon: this.data.telefonklappe + (this.data.standort_telefon?this.data.standort_telefon:""),
Büro: this.data.ort_kurzbz,
};
},
},
mounted() {
this.$refs.funktionenTable.tabulator.on("tableBuilt", () => {
this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
});
this.$refs.funktionenTable.tabulator.on('tableBuilt', () => {
this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
})
},
template: `
template: `
<div class="container-fluid text-break" >
<!-- ROW -->
@@ -198,11 +222,11 @@ export default {
<!-- END OF HIDDEN QUCK LINKS -->
<!-- MAIN PANNEL -->
<div class="col-sm-12 col-md-9">
<div class="col-sm-12 col-md-8 col-xxl-9 ">
<!-- ROW WITH PROFIL IMAGE AND INFORMATION -->
@@ -254,14 +278,7 @@ export default {
<div class="row justify-content-center">
<div class="col-auto " style="position:relative">
<img class=" img-thumbnail " style=" max-height:150px; " :src="get_image_base64_src"></img>
<!-- LOCKING IMAGE FUNCTIONALITY -->
<div role="button" @click.prevent="sperre_foto_function" style="height:22px; width:21px; background-color:white; position:absolute; top:0; right:12px; display:flex; align-items:center; justify-content:center;" >
<i :class="{'fa':true, ...(data.foto_sperre?{'fa-lock':true}:{'fa-lock-open':true})} " ></i>
</div>
</div>
</div>
<!-- END OF THE ROW WITH THE IMAGE -->
@@ -276,15 +293,15 @@ export default {
<div class="col-12">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingInputValue" :value="data.vorname">
<label for="floatingInputValue">Vorname</label>
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingVorname" :value="data.vorname">
<label for="floatingVorname">Vorname</label>
</div>
</div>
<div class="col-12">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingInputValue" :value="data.nachname">
<label for="floatingInputValue">Nachname</label>
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingNachname" :value="data.nachname">
<label for="floatingNachname">Nachname</label>
</div>
</div>
</div>
@@ -302,8 +319,8 @@ export default {
<div v-for="(wert,bez) in personData" class="col-md-6 col-sm-12 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingInputValue" placeholder="name@example.com" :value="wert?wert:'-'">
<label for="floatingInputValue">{{bez}}</label>
<input readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
</div>
</div>
@@ -329,9 +346,16 @@ export default {
<div class="card-body">
<div class="row">
<div v-for="(wert,bez) in specialData" class="col-md-6 col-sm-12 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingInputValue" placeholder="name@example.com" :value="wert?wert:'-'">
<label for="floatingInputValue">{{bez}}</label>
<div class=" form-floating mb-2">
<!-- print Telefon link -->
<a v-if="bez=='Telefon'" :href="get_mitarbeiter_standort_telefon" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez">
<input :role="get_mitarbeiter_standort_telefon?'button':''" readonly :value="wert?wert:'-'" class="w-100" style="border:none; outline:none;" />
</a>
<!-- otherwise print input field -->
<input v-else readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
</div>
</div>
</div>
@@ -382,13 +406,24 @@ export default {
<!-- HIER SIND DIE EMAILS -->
<div v-for="email in wert" v-if="typeof wert === 'object' && bezeichnung == 'emails'" class="row justify-content-center">
<div v-for="email in wert" v-if="typeof wert === 'object' && bezeichnung == 'emails'" class="row justify-content-center ">
<div class="col-12 ">
<div class="row align-items-center">
<div class="col-1 text-center">
<i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i>
</div>
<div class="col">
<div class=" form-floating mb-2">
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" id="floatingFhAusweis" >{{email.email}}</a>
<label for="floatingFhAusweis">{{email.type }}</label>
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
<input role="button" readonly :value="email.email" class="w-100" style="border:none; outline:none;" />
</a>
<label :for="'floating'+email.type">{{email.type }}</label>
</div>
</div>
</div>
</div>
</div>
@@ -408,14 +443,6 @@ export default {
</div>
</div></div>
<!-- HIER SIND DIE PRIVATEN ADRESSEN-->
<div class="row mb-4">
<div class="col">
</div>
</div>
<!-- -->
@@ -431,13 +458,7 @@ export default {
<!-- LITTLE EXTRA ROW WITH INFORMATION REFRESHING LINK -->
<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>
<!-- END OF REFRESHING LINK ROW -->
@@ -450,10 +471,7 @@ export default {
<core-filter-cmpt title="Funktionen" ref="funktionenTable" :tabulator-options="funktionen_table_options" tableOnly :sideMenu="false" />
</div>
<!-- SECOND TABLE -->
<div class="col-12 mb-4" >
<core-filter-cmpt title="Entlehnte Betriebsmittel" ref="betriebsmittelTable" :tabulator-options="betriebsmittel_table_options" tableOnly :sideMenu="false" />
</div>
<!-- END OF THE ROW WITH THE TABLES UNDER THE PROFIL INFORMATION -->
</div>
@@ -471,7 +489,7 @@ export default {
<!-- START OF SIDE PANEL -->
<div class="col-md-3 col-sm-12 text-break" >
<div class="col-md-4 col-xxl-3 col-sm-12 text-break" >
<!-- SRART OF QUICK LINKS IN THE SIDE PANEL -->
@@ -502,6 +520,8 @@ export default {
</div>
</div>
<!-- START OF THE SECOND ROW IN THE SIDE PANEL -->
<div class="row">
@@ -521,18 +541,18 @@ export default {
<div class="card-text row text-break mb-2" v-for="verteiler in data?.mailverteiler">
<div class="col-12 ">
<div class="row">
<div class="col-1">
<div class="col-1 ">
<i class="fa-solid fa-envelope" style="color: #00649C;"></i>
</div>
<div class="col-11">
<div class="col">
<a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
</div>
</div>
</div>
<div class="col-12 ">{{verteiler.beschreibung}}</div>
<div class="col-11 offset-1 ">{{verteiler.beschreibung}}</div>
</div>
</div>
@@ -562,6 +582,5 @@ export default {
<!-- END OF CONTAINER -->
</div>
`,
};
public/js/components/Cis/Profil/StudentProfil.js
+509 -248
View File
@@ -1,182 +1,221 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
export default {
components: {
CoreFilterCmpt,
},
data() {
return {
collapseIconBetriebsmittel:true,
collapseIconBetriebsmittel: true,
zutrittsgruppen_table_options: {
height: 200,
layout: "fitColumns",
data: [{ bezeichnung: "" }],
columns: [{ title: "Zutritt", field: "bezeichnung" }],
},
betriebsmittel_table_options: {
height: 300,
layout: "fitColumns",
responsiveLayout:"collapse",
responsiveLayoutCollapseUseFormatters:false,
responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
responsiveLayout: "collapse",
responsiveLayoutCollapseUseFormatters: false,
responsiveLayoutCollapseFormatter: Vue.$collapseFormatter,
data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
title: "<i id='collapseIconBetriebsmittel' role='button' class='fa-solid fa-angle-down '></i>",
title:
"<i id='collapseIconBetriebsmittel' role='button' class='fa-solid fa-angle-down '></i>",
field: "collapse",
headerSort: false,
headerFilter:false,
formatter:"responsiveCollapse",
maxWidth:40,
headerClick:this.collapseFunction,
},
headerFilter: false,
formatter: "responsiveCollapse",
maxWidth: 40,
headerClick: this.collapseFunction,
},
{
title: "Betriebsmittel",
field: "betriebsmittel",
headerFilter: true, minWidth:200,
headerFilter: true,
minWidth: 200,
},
{
title: "Nummer",
field: "Nummer",
headerFilter: true,
resizable: true,
minWidth: 200,
},
{ title: "Nummer", field: "Nummer", headerFilter: true, resizable:true, minWidth:200, },
{
title: "Ausgegeben_am",
field: "Ausgegeben_am",
headerFilter: true,
minWidth:200,
minWidth: 200,
},
],
},
zutrittsgruppen_table_options: {
height: 200,
layout: "fitColumns",
data: [{ bezeichnung: "test1" }],
columns: [{ title: "Zutritt", field: "bezeichnung" }],
},
};
},
//? this is the prop passed to the dynamic component with the custom data of the view
props: ["data"],
methods: {
sperre_foto_function(value) {
sperre_foto_function() {
if (!this.data) {
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then((res) => {
fhcapifactory.UserData.sperre_foto_function(!this.data.foto_sperre).then((res) => {
this.data.foto_sperre = res.data.foto_sperre;
});
},
collapseFunction (e, column){
collapseFunction(e, column) {
//* the if of the column has to match with the name of the responsive data in the vue component
this[e.target.id] = !this[e.target.id];
//* gets all event icons of the different rows to use the onClick event later
let allClickableIcons = column._column.cells.map(row => {
let allClickableIcons = column._column.cells.map((row) => {
return row.element.children[0];
});
//* changes the icon that shows or hides all the collapsed columns
//* if the replace function does not find the class to replace, it just simply returns false
if(this[e.target.id]){
e.target.classList.replace("fa-angle-up","fa-angle-down");
}else{
e.target.classList.replace("fa-angle-down","fa-angle-up");
if (this[e.target.id]) {
e.target.classList.replace("fa-angle-up", "fa-angle-down");
} else {
e.target.classList.replace("fa-angle-down", "fa-angle-up");
}
//* changes the icon for every collapsed column to open or closed
if(this[e.target.id]){
allClickableIcons.filter(column => {
if (this[e.target.id]) {
allClickableIcons
.filter((column) => {
return !column.classList.contains("open");
}).forEach(col => {col.click();})
}else{
allClickableIcons.filter(column => {
})
.forEach((col) => {
col.click();
});
} else {
allClickableIcons
.filter((column) => {
return column.classList.contains("open");
}).forEach(col => {col.click();})
}
},
},
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]`
})
.forEach((col) => {
col.click();
});
}
},
},
computed: {
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
//? this computed function returns all the informations for the first column in the profil
personData() {
if (!this.data) {
return {};
}
return {
Allgemein: {
View:"StudentIn",
Username: this.data.username,
Matrikelnummer: this.data.matrikelnummer,
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,
Studiengang: this.data.studiengang,
Semester: this.data.semester,
Verband: this.data.verband,
Gruppe: this.data.gruppe,
Personenkennzeichen: this.data.personenkennzeichen,
},
Username: this.data.username,
Anrede: this.data.anrede,
Matrikelnummer: this.data.matrikelnummer,
Titel: this.data.titelpre,
Postnomen: this.data.postnomen,
};
},
//? this computed function returns the data for the second column in the profil
kontaktInfo() {
personKontakt() {
if (!this.data) {
return {};
}
return {
FhAusweisStatus: this.data.zutrittsdatum,
emails: this.data.emails,
Kontakte: this.data.kontakte,
Adressen: this.data.adressen,
};
},
specialData() {
if (!this.data) {
return {};
}
return {
Geburtsdatum: this.data.gebdatum,
Geburtsort: this.data.gebort,
Personenkennzeichen: this.data.personenkennzeichen,
Studiengang: this.data.studiengang,
Semester: this.data.semester,
Verband: this.data.verband,
Gruppe: this.data.gruppe,
};
},
privateKontakte() {
if (!this.data) {
return {};
}
return this.data.kontakte;
},
privateAdressen() {
if (!this.data) {
return {};
}
return this.data.adressen;
},
},
mounted() {
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
})
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
})
this.$refs.zutrittsgruppenTable.tabulator.on('tableBuilt', () => {
this.$refs.zutrittsgruppenTable.tabulator.setData(this.data.zuttritsgruppen);
})
this.$refs.zutrittsgruppenTable.tabulator.on('tableBuilt', () => {
this.$refs.zutrittsgruppenTable.tabulator.setData(this.data.zuttritsgruppen);
})
},
template: `
template: `
<!-- CONTAINER -->
<div class="container-fluid text-break" >
<div class="container-fluid text-break" >
<!-- ROW -->
<div class="row">
<!-- HIDDEN QUICK LINKS -->
<div class="d-md-none col-12 ">
<div style="border:4px solid;border-color:#EEEEEE;" class="row py-2">
<div class="row py-2">
<div class="col">
<p class="m-0">
<a class="border w-100 btn " data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<u> Quick links</u>
</a>
<div class="card">
<a class=" w-100 btn " data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<u> Quick links</u>
</a>
</div>
</p>
<div class="mt-1 collapse" id="collapseExample">
@@ -190,165 +229,170 @@ export default {
</div>
</div>
</div>
</div>
<!-- END OF HIDDEN QUCK LINKS -->
<!-- MAIN PANNEL -->
<div class="col-sm-12 col-md-9">
<div class="col-sm-12 col-md-8 col-xxl-9 ">
<!-- ROW WITH PROFIL IMAGE AND INFORMATION -->
<div class="row">
<!-- COLUMN WITH PROFIL IMAGE -->
<div class="col-md-2 col-sm-12" style="border:4px solid;border-color:lightgreen;">
<!-- START OF THE FIRST ROW WITH THE PROFIL IMAGE -->
<div class="row justify-content-center">
<div class="col-auto ">
<img class=" img-thumbnail " style=" max-height:150px" :src="get_image_base64_src"></img>
</div>
</div>
<!-- END OF THE ROW WITH THE IMAGE -->
<!-- START OF THE SECOND ROW WITH THE IMAGE LINK -->
<div class="row justify-content-center">
<div class="col-auto text-center ">
<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>
<!-- DIESEN LINK KOENNTE MAN MIT EINEM ICON AUSTAUSCHEN WENN DIE VIEWPORT KLEIN IST -->
<a href="#" @click.prevent="sperre_foto_function(true)" class="text-decoration-none" v-else>Profilfoto sperren</a>
</div>
</div>
<!-- END OF THE ROW WITH THE IMAGE LINK -->
<!-- END OF THE COLUMN WITH PROFIL IMAGE AND LINK -->
</div>
<!-- COLUMN WITH THE PROFIL INFORMATION -->
<div class="col-md-10 col-sm-12 text-break" style=" border:4px solid;border-color:lightcoral;">
<!-- INFORMATION CONTENT START -->
<!-- ROW WITH THE PROFIL INFORMATION -->
<div class="row">
<div class="row mb-4">
<!-- FIRST COLUMN WITH PROFIL INFORMATION -->
<div style="border:4px solid;border-color:red" class="col-lg-12 col-xl-6">
<dl class=" mb-0" >
<!-- FIRST KAESTCHEN -->
<div class="col-lg-12 col-xl-6 ">
<div class="row mb-4">
<div class="col">
<div class="card h-100">
<div class="card-header">
StudentIn
</div>
<div class="card-body">
<div v-for="(wert,bez) in personData.Allgemein" class="justify-content-center row">
<dt class="col-xl-10 col-12 " v-if="bez=='View'" ><b>{{wert}}</b></dt>
<template v-else>
<dt class="col-xl-4 col-lg-6 col-md-6 col-6 " >{{bez}}</dt>
<dd class=" col-lg-8 col-xl-6 col-6 ">{{wert?wert:"-"}}</dd>
</template>
<div class="row align-items-center">
<!-- SQUEEZING THE IMAGE INSIDE THE FIRST INFORMATION COLUMN -->
<!-- START OF THE FIRST ROW WITH THE PROFIL IMAGE -->
<div class="col-12 col-sm-6 mb-2">
<div class="row justify-content-center">
<div class="col-auto " style="position:relative">
<img class=" img-thumbnail " style=" max-height:150px; " :src="get_image_base64_src"></img>
<!-- LOCKING IMAGE FUNCTIONALITY -->
<div role="button" @click.prevent="sperre_foto_function" style="height:22px; width:21px; background-color:white; position:absolute; top:0; right:12px; display:flex; align-items:center; justify-content:center;" >
<i :class="{'fa':true, ...(data.foto_sperre?{'fa-lock':true}:{'fa-lock-open':true})} " ></i>
</div>
</div>
</div>
<!-- END OF THE ROW WITH THE IMAGE -->
</div>
<!-- END OF SQUEEZE -->
<!-- COLUMNS WITH MULTIPLE ROWS NEXT TO PROFIL PICTURE -->
<div class="col-12 col-sm-6">
<div class="row">
<div class="col-12">
<div class=" form-floating mb-2">
</dl>
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingVorname" :value="data.vorname">
<label for="floatingVorname">Vorname</label>
</div>
</div>
<div class="col-12">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingNachname" :value="data.nachname">
<label for="floatingNachname">Nachname</label>
</div>
</div>
</div>
</div>
<!-- END OF THE FIRST INFORMATION COLUMN -->
<div v-for="(wert,bez) in personData" class="col-md-6 col-sm-12 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
</div>
</div>
</div>
<!-- START OF THE SECOND PROFIL INFORMATION COLUMN -->
<div style="border:4px solid;border-color:orange" class="col-xl-6 col-lg-12">
<dl v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DER FH AUSWEIS -->
<div class="row justify-content-center" v-if="bezeichnung=='FhAusweisStatus'">
<dt class="col-lg-4 col-6" >FH-Ausweis Status</dt>
<dd class=" col-lg-8 col-6 m-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</dd>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<dt class="col-lg-4 col-6 mb-0">eMail</dt>
<div class="col-lg-8 col-6 ">
<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-lg-4 col-6 mb-0">Private Kontakte</dt>
<div class="col-lg-8 col-6">
<dd class="row justify-end" v-for="element in wert" >
<div :class="{...(element?.anmerkung? {'col-7':true} : {'col-10':true} )}">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div :class="{...(element?.anmerkung? {'col-3':true} : {'d-none':true} )}"> {{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-lg-4 col-6">Adressen</dt>
<div class="col-lg-8 col-6">
<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>
<!-- END OF THE SECOND INFORMATION COLUMN -->
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class=" col-lg-12">
<div class="card">
<div class="card-header">
Studenten Information
</div>
<div class="card-body">
<div class="row">
<div v-for="(wert,bez) in specialData" class="col-md-6 col-sm-12 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF THE FIRST KAESTCHEN -->
</div>
<!-- START OF SECOND PROFIL INFORMATION COLUMN -->
@@ -356,21 +400,183 @@ export default {
<!-- INFORMATION CONTENT END -->
</div>
<div class="col-xl-6 col-lg-12 ">
<div class="row mb-4">
<div class="col">
<!-- COLUMN WITH ALL PROFIL INFORMATION END -->
</div>
<div class="card ">
<div class="card-header">
Mails
</div>
<div class="card-body">
<div v-for="(wert,bezeichnung) in personKontakt">
<!-- HIER SIND DIE EMAILS -->
<div v-for="email in wert" v-if="typeof wert === 'object' && bezeichnung == 'emails'" class="row justify-content-center ">
<div class="col-12 ">
<div class="row align-items-center">
<div class="col-1 text-center">
<i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i>
</div>
<div class="col">
<div class=" form-floating mb-2">
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
<input role="button" readonly :value="email.email" class="w-100" style="border:none; outline:none;" />
</a>
<label :for="'floating'+email.type">{{email.type }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE-->
<div class="row mb-4 ">
<div class="col">
<div class="card">
<div class="card-header">
Private Kontakte
</div>
<div class="card-body ">
<div v-for="element in privateKontakte" class="align-items-center row justify-content-center">
<div class="col-1 text-center" >
<i class="fa-solid " :class="{...(element.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" style="color:rgb(0, 100, 156)"></i>
</div>
<div :class="{...(element.anmerkung? {'col-11':true, 'col-md-5':true, 'col-xl-11':true, 'col-xxl-5':true} : {'col-9':true, 'col-xl-9':true})}">
<!-- rendering KONTAKT emails -->
<div v-if="element.kontakt.includes('@')" class=" form-floating mb-2">
<a :href="'mailto:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
<input role="button" readonly :value="element.kontakt" class="w-100" style="border:none; outline:none;" />
</a>
<label :for="'floating'+element.kontakttyp">{{element.kontakttyp}}</label>
</div>
<!-- rendering KONTAKT phones -->
<div v-else class=" form-floating mb-2">
<a :href="'tel:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
<input role="button" readonly :value="element.kontakt" class="w-100" style="border:none; outline:none;" />
</a>
<label :for="'floating'+element.kontakttyp">{{element.kontakttyp}}</label>
</div>
</div>
<div v-if="element?.anmerkung" class="offset-1 offset-md-0 col-9 col-md-4 offset-xl-1 offset-xxl-0 col-xl-9 col-xxl-4 order-2 order-md-1 order-xl-1 order-sm-1 order-xxl-1 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingAnmerkung" :value="element.anmerkung">
<label for="floatingAnmerkung">Anmerkung</label>
</div>
</div>
<div class="col-2 order-2 order-sm-2 order-md-2 order-lg-1 col-xl-2 col-xxl-2 allign-middle">
<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>
</div>
</div>
</div>
<!-- -->
<!-- HIER SIND DIE PRIVATEN ADRESSEN-->
<div class="row mb-4">
<div class="col">
<div class="card">
<div class="card-header">Private Adressen</div>
<div class="card-body">
<div v-for="element in privateAdressen" class="row justify-content-center align-items-center">
<!-- column 1 in the address row -->
<div class="col-1 text-center">
<i class="fa fa-location-dot fa-lg" style="color:#00649C "></i>
</div>
<div class="col ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingStrasse" :value="element.strasse">
<label for="floatingStrasse">Strasse</label>
</div>
</div>
<div class="w-100 "></div>
<!-- column 2 in the address row -->
<div class="col-11 offset-1 offset-md-0 offset-xl-1 col-xl-6 order-xl-1 col-md-3 col-sm-6 col-xs-6 order-sm-1">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingTyp" :value="element.adr_typ">
<label for="floatingTyp">Typ</label>
</div>
</div>
<div class="col-11 offset-1 col-xl-11 col-md-5 col-sm-11 col-xs-11 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingOrt" :value="element.ort">
<label for="floatingOrt">Ort</label>
</div>
</div>
<div class="col-11 offset-1 offset-sm-0 offset-md-0 col-xl-5 order-xl-2 col-md-3 col-sm-5 col-xs-5 order-sm-2">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingPLZ" :value="element.plz">
<label for="floatingPLZ">PLZ</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<!-- END OF THE SECOND INFORMATION COLUMN -->
</div>
<!-- START OF THE SECOND PROFIL INFORMATION ROW -->
<!-- ROW WITH PROFIL IMAGE AND INFORMATION END -->
</div >
<!-- LITTLE EXTRA ROW WITH INFORMATION REFRESHING LINK -->
<div class="row ">
<div style="border:4px solid;border-color:lightpink" class="col pt-4">
<p>Sollten Ihre Daten nicht mehr aktuell sein, klicken Sie bitte <a :href="refreshMailTo">hier</a></p>
</div>
</div>
<!-- END OF REFRESHING LINK ROW -->
@@ -378,14 +584,17 @@ export default {
<!-- SECOND ROW UNDER THE PROFIL IMAGE AND INFORMATION WITH THE TABLES -->
<div class="row">
<!-- FIRST TABLE -->
<div class="col-12" style="border: 4px solid; border-color:lightskyblue">
<core-filter-cmpt title="Entlehnte Betriebsmittel" ref="betriebsmittelTable" :tabulator-options="betriebsmittel_table_options" tableOnly :sideMenu="false" />
</div>
<!-- SECOND TABLE -->
<div class="col-12" style="border:4px solid;border-color:orange">
<core-filter-cmpt title="Zutrittsgruppen" ref="zutrittsgruppenTable" :tabulator-options="zutrittsgruppen_table_options" tableOnly :sideMenu="false" :noColumnFilter />
<!-- FIRST TABLE -->
<div class="col-12 mb-4" >
<core-filter-cmpt title="Entlehnte Betriebsmittel" ref="betriebsmittelTable" :tabulator-options="betriebsmittel_table_options" tableOnly :sideMenu="false" />
</div>
<!-- SECOND TABLE -->
<div class="col-12 mb-4" >
<core-filter-cmpt title="Zutrittsgruppen" ref="zutrittsgruppenTable" :tabulator-options="zutrittsgruppen_table_options" tableOnly :sideMenu="false" noColumnFilter />
</div>
<!-- END OF THE ROW WITH THE TABLES UNDER THE PROFIL INFORMATION -->
@@ -404,7 +613,7 @@ export default {
<!-- START OF SIDE PANEL -->
<div class="col-md-3 col-sm-12 text-break" >
<div class="col-md-4 col-xxl-3 col-sm-12 text-break" >
<!-- SRART OF QUICK LINKS IN THE SIDE PANEL -->
@@ -412,34 +621,88 @@ export default {
<!-- START OF THE FIRDT ROW IN THE SIDE PANEL -->
<!-- THESE QUCK LINKS ARE ONLY VISIBLE UNTIL VIEWPORT MD -->
<div style="border:4px solid;border-color:#EEEEEE;" class="row d-none d-md-block">
<div class="row d-none d-md-block mb-3">
<div class="col">
<div 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 class="card">
<div class="card-header">
Quick Links
</div>
<div class="card-body">
<a style="text-decoration:none" class="my-1 d-block" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1 d-block" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1 d-block" href="#">Zeitsperren von Gschnell</a>
</div>
</div>
</div>
</div>
<div class="row mb-3" >
<div class="col-12">
<div class="card">
<div class="card-body">
<span>Der FH Ausweis ist am <b>{{data.zutrittsdatum}}</b> ausgegeben worden.</span>
</div>
</div>
</div>
</div>
<!-- START OF THE SECOND ROW IN THE SIDE PANEL -->
<div style="border:4px solid;border-color: darkgray" class="row">
<div class="row">
<div class="col">
<!-- HIER SIND DIE MAILVERTEILER -->
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p >Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-lg-12 col-xl-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-lg-12 col-xl-6">{{verteiler.beschreibung}}</div>
<div class="card">
<div class="card-header">
Mailverteilers
</div>
<div class="card-body">
<h6 class="card-title">Sie sind Mitgglied in folgenden Verteilern:</h6>
<div class="card-text row text-break mb-2" v-for="verteiler in data?.mailverteiler">
<div class="col-12 ">
<div class="row">
<div class="col-1 ">
<i class="fa-solid fa-envelope" style="color: #00649C;"></i>
</div>
<div class="col">
<a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
</div>
</div>
</div>
<div class="col-11 offset-1 ">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
<!-- END OF THE SECOND ROW IN THE SIDE PANEL -->
@@ -459,8 +722,6 @@ export default {
<!-- END OF CONTAINER -->
</div>
`,
};
public/js/components/Cis/Profil/StudentViewProfil.js
+305 -141
View File
@@ -1,99 +1,100 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
export default {
data() {
return {
};
},
//? this is the prop passed to the dynamic component with the custom data of the view
//? 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: {
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
//? this computed function returns all the informations for the first column in the profil
personData() {
if (!this.data) {
return {};
}
return {
Allgemein: {
View:"StudentIn",
Username: this.data.username,
Matrikelnummer: this.data.matrikelnummer,
Anrede: this.data.anrede,
Titel: this.data.titel,
Vorname: this.data.vorname,
Nachname: this.data.nachname,
Postnomen: this.data.postnomen,
},
SpecialInformation: {
Studiengang: this.data.studiengang,
Semester: this.data.semester,
Verband: this.data.verband,
Gruppe: this.data.gruppe,
Personenkennzeichen: this.data.personenkennzeichen,
},
Username: this.data.username,
Anrede: this.data.anrede,
Matrikelnummer: this.data.matrikelnummer,
Titel: this.data.titelpre,
Postnomen: this.data.postnomen,
};
},
//? this computed function returns the data for the second column in the profil
kontaktInfo() {
personKontakt() {
if (!this.data) {
return {};
}
return {
emails: this.data.emails,
};
},
specialData() {
if (!this.data) {
return {};
}
return {
Personenkennzeichen: this.data.personenkennzeichen,
Studiengang: this.data.studiengang,
Semester: this.data.semester,
Verband: this.data.verband,
Gruppe: this.data.gruppe,
};
},
},
mounted() {
},
template: `
template: `
<!-- CONTAINER -->
<div class="container-fluid text-break" >
<div class="container-fluid text-break" >
<!-- ROW -->
<div class="row">
<!-- HIDDEN QUICK LINKS -->
<div class="d-md-none col-12 ">
<div style="border:4px solid;border-color:#EEEEEE;" class="row py-2">
<div class="row py-2">
<div class="col">
<p class="m-0">
<a class="border w-100 btn " data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<u> Quick links</u>
</a>
<div class="card">
<a class=" w-100 btn " data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<u> Quick links</u>
</a>
</div>
</p>
<div class="mt-1 collapse" id="collapseExample">
@@ -107,111 +108,163 @@ export default {
</div>
</div>
</div>
</div>
<!-- END OF HIDDEN QUCK LINKS -->
<!-- MAIN PANNEL -->
<div class="col-sm-12 col-md-9">
<div class="col-sm-12 col-md-8 col-xxl-9 ">
<!-- ROW WITH PROFIL IMAGE AND INFORMATION -->
<div class="row">
<!-- COLUMN WITH PROFIL IMAGE -->
<div class="col-md-2 col-sm-12" style="border:4px solid;border-color:lightgreen;">
<!-- START OF THE FIRST ROW WITH THE PROFIL IMAGE -->
<div class="row justify-content-center">
<div class="col-auto ">
<img class=" img-thumbnail " style=" max-height:150px" :src="get_image_base64_src"></img>
</div>
</div>
<!-- END OF THE ROW WITH THE IMAGE -->
<!-- END OF THE COLUMN WITH PROFIL IMAGE AND LINK -->
</div>
<!-- COLUMN WITH THE PROFIL INFORMATION -->
<div class="col-md-10 col-sm-12 text-break" style="border:4px solid;border-color:lightcoral;">
<!-- INFORMATION CONTENT START -->
<!-- ROW WITH THE PROFIL INFORMATION -->
<div class="row">
<div class="row mb-4">
<!-- FIRST COLUMN WITH PROFIL INFORMATION -->
<div style="border:4px solid;border-color:red" class="col-lg-12 col-xl-6">
<dl class=" mb-0" >
<!-- FIRST KAESTCHEN -->
<div class="col-lg-12 col-xl-6 ">
<div class="row mb-4">
<div class="col">
<div class="card h-100">
<div class="card-header">
StudentIn
</div>
<div class="card-body">
<div v-for="(wert,bez) in personData.Allgemein" class="row justify-content-center">
<!-- STUDENTEN TITEL -->
<dt class="col-xl-10 col-12 " v-if="bez=='View'" ><b>{{wert}}</b></dt>
<template v-else>
<dt class="col-xl-4 col-lg-6 col-md-6 col-6 " >{{bez}}</dt>
<dd class=" col-lg-8 col-xl-6 col-6 ">{{wert?wert:"-"}}</dd>
</template>
</div>
</dl>
<div class="row align-items-center">
<!-- END OF THE FIRST INFORMATION COLUMN -->
<!-- SQUEEZING THE IMAGE INSIDE THE FIRST INFORMATION COLUMN -->
<!-- START OF THE FIRST ROW WITH THE PROFIL IMAGE -->
<div class="col-12 col-sm-6 mb-2">
<div class="row justify-content-center">
<div class="col-auto " style="position:relative">
<img class=" img-thumbnail " style=" max-height:150px; " :src="get_image_base64_src"></img>
</div>
</div>
<!-- END OF THE ROW WITH THE IMAGE -->
</div>
<!-- END OF SQUEEZE -->
<!-- COLUMNS WITH MULTIPLE ROWS NEXT TO PROFIL PICTURE -->
<div class="col-12 col-sm-6">
<div class="row">
<div class="col-12">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingVorname" :value="data.vorname">
<label for="floatingVorname">Vorname</label>
</div>
</div>
<div class="col-12">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingNachname" :value="data.nachname">
<label for="floatingNachname">Nachname</label>
</div>
</div>
</div>
</div>
<div v-for="(wert,bez) in personData" class="col-md-6 col-sm-12 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
</div>
</div>
</div>
<!-- START OF THE SECOND PROFIL INFORMATION COLUMN -->
<div style="border:4px solid;border-color:orange" class="col-xl-6 col-lg-12">
<dl v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER SIND DIE EMAILS -->
<div class="justify-content-center row mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<dt class="col-lg-4 col-6 mb-0">eMail</dt>
<div class="col-lg-8 col-6 ">
<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>
</dl>
<!-- END OF THE SECOND INFORMATION COLUMN -->
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class=" col-lg-12">
<div class="card">
<div class="card-header">
Studenten Information
</div>
<div class="card-body">
<div class="row">
<div v-for="(wert,bez) in specialData" class="col-md-6 col-sm-12 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF THE FIRST KAESTCHEN -->
</div>
<!-- START OF SECOND PROFIL INFORMATION COLUMN -->
@@ -219,15 +272,92 @@ export default {
<!-- INFORMATION CONTENT END -->
</div>
<div class="col-xl-6 col-lg-12 ">
<div class="row mb-4">
<div class="col">
<!-- COLUMN WITH ALL PROFIL INFORMATION END -->
</div>
<div class="card ">
<div class="card-header">
Mails
</div>
<div class="card-body">
<div v-for="(wert,bezeichnung) in personKontakt">
<!-- HIER SIND DIE EMAILS -->
<div v-for="email in wert" v-if="typeof wert === 'object' && bezeichnung == 'emails'" class="row justify-content-center ">
<div class="col-12 ">
<div class="row align-items-center">
<div class="col-1 text-center">
<i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i>
</div>
<div class="col">
<div class=" form-floating mb-2">
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
<input role="button" readonly :value="email.email" class="w-100" style="border:none; outline:none;" />
</a>
<label :for="'floating'+email.type">{{email.type }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
<!-- END OF THE SECOND INFORMATION COLUMN -->
</div>
<!-- START OF THE SECOND PROFIL INFORMATION ROW -->
<!-- ROW WITH PROFIL IMAGE AND INFORMATION END -->
</div >
@@ -238,7 +368,7 @@ export default {
<!-- START OF SIDE PANEL -->
<div class="col-md-3 col-sm-12 text-break" >
<div class="col-md-4 col-xxl-3 col-sm-12 text-break" >
<!-- SRART OF QUICK LINKS IN THE SIDE PANEL -->
@@ -246,34 +376,70 @@ export default {
<!-- START OF THE FIRDT ROW IN THE SIDE PANEL -->
<!-- THESE QUCK LINKS ARE ONLY VISIBLE UNTIL VIEWPORT MD -->
<div style="border:4px solid;border-color:#EEEEEE;" class="row d-none d-md-block">
<div class="row d-none d-md-block mb-3">
<div class="col">
<div 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 class="card">
<div class="card-header">
Quick Links
</div>
<div class="card-body">
<a style="text-decoration:none" class="my-1 d-block" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1 d-block" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1 d-block" href="#">Zeitsperren von Gschnell</a>
</div>
</div>
</div>
</div>
<!-- START OF THE SECOND ROW IN THE SIDE PANEL -->
<div style="border:4px solid;border-color: darkgray" class="row">
<div class="row">
<div class="col">
<!-- HIER SIND DIE MAILVERTEILER -->
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p >Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-lg-12 col-xl-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-lg-12 col-xl-6">{{verteiler.beschreibung}}</div>
<div class="card">
<div class="card-header">
Mailverteilers
</div>
<div class="card-body">
<h6 class="card-title">Sie sind Mitgglied in folgenden Verteilern:</h6>
<div class="card-text row text-break mb-2" v-for="verteiler in data?.mailverteiler">
<div class="col-12 ">
<div class="row">
<div class="col-1 ">
<i class="fa-solid fa-envelope" style="color: #00649C;"></i>
</div>
<div class="col">
<a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
</div>
</div>
</div>
<div class="col-11 offset-1 ">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
<!-- END OF THE SECOND ROW IN THE SIDE PANEL -->
@@ -293,8 +459,6 @@ export default {
<!-- END OF CONTAINER -->
</div>
`,
};