blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

add comments to the layout to logically seperate the different columns and rows

Browse Source
This commit is contained in:
Simon Gschnell
2023-12-11 09:43:32 +01:00
parent 8f152cdf50
commit e8a89cf277
1 changed files with 178 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Cis/Profil/Base.js
+178 -133
View File
@@ -1,15 +1,12 @@
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",
@@ -41,7 +38,13 @@ export default {
betriebsmittel_table_options: {
height: 300,
layout: "fitColumns",
data: [{ betriebsmittel: "<a href='#'>test</a>", Nummer: "", Ausgegeben_am: "" }],
data: [
{
betriebsmittel: "<a href='#'>test</a>",
Nummer: "",
Ausgegeben_am: "",
},
],
columns: [
{
title: "Betriebsmittel",
@@ -56,14 +59,12 @@ export default {
},
],
},
};
},
//? 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;
@@ -75,7 +76,7 @@ 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]`
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() {
@@ -84,7 +85,7 @@ export default {
}
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 {};
@@ -102,26 +103,18 @@ export default {
Geburtsort: this.data.gebort,
Kurzzeichen: this.data.kurzbz,
Telefon: this.data.telefonklappe,
Büro:this.data.ort_kurzbz,
Büro: this.data.ort_kurzbz,
FhAusweisStatus: this.data.zutrittsdatum,
},
};
},
//? this computed function returns the data for the second column in the profil
//? 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,
@@ -130,170 +123,222 @@ export default {
},
mounted() {
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
})
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);
})
this.$refs.funktionenTable.tabulator.on("tableBuilt", () => {
this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
});
},
template: `
<!-- CONTAINER -->
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- ROW -->
<div class="row">
<!-- HIDDEN QUICK LINKS -->
<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 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">Zeitwuensche</button></li>
<li><button class="dropdown-item" type="button">Lehrveranstaltungen</button></li>
<li><button class="dropdown-item" type="button">Zeitsperren von Gschnell</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF HIDDEN QUCK LINKS -->
<!-- MAIN PANNEL -->
<div class="col-sm-12 col-md-9">
<div class="row">
<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-9 col-sm-12" style="background-color:lightcoral;">
<!-- ROW WITH PROFIL IMAGE AND INFORMATION -->
<div class="row">
<!-- COLUMN WITH PROFIL IMAGE -->
<div class="col-md-3 col-sm-12" style="background-color:lightgreen;">
<img class=" img-thumbnail " style=" min-width:150px" :src="get_image_base64_src"></img>
</div>
<!-- COLUMN WITH THE PROFIL INFORMATION -->
<div class="col-md-9 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">
<!-- INFORMATION CONTENT START -->
<!-- ROW WITH THE PROFIL INFORMATION -->
<div class="row">
<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>
<!-- FIRST COLUMN WITH PROFIL 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>
<!-- END OF THE FIRST INFORMATION COLUMN -->
</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>
<!-- START OF THE SECOND PROFIL INFORMATION COLUMN -->
<div style="background-color:orange" class="col-lg-6 col-md-12">
<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 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>
<!-- END OF THE SECOND INFORMATION COLUMN -->
</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>
<!-- END OF PROFIL INFORMATION ROW -->
<!-- INFORMATION CONTENT END -->
</div>
<!-- COLUMN WITH ALL PROFIL INFORMATION END -->
</div>
</div>
<!-- ROW WITH PROFIL IMAGE AND INFORMATION END -->
</div >
<!-- SECOND ROW UNDER THE PROFIL IMAGE AND INFORMATION WITH THE TABLES -->
<div class="row">
<!-- FIRST TABLE -->
<div class="col-12" style="background-color:lightskyblue">
<core-filter-cmpt title="Funktionen" ref="funktionenTable" :tabulator-options="funktionen_table_options" :tableOnly />
</div>
<!-- SECOND TABLE -->
<div class="col-12" style="background-color:orange">
<core-filter-cmpt title="Entlehnte Betriebsmittel" ref="betriebsmittelTable" :tabulator-options="betriebsmittel_table_options" :tableOnly />
</div>
<!-- END OF THE ROW WITH THE TABLES UNDER THE PROFIL INFORMATION -->
</div>
<!-- END OF MAIN CONTENT COL -->
</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>
<!-- START OF SIDE PANEL -->
<div class="col-md-3 col-sm-12">
<!-- SRART OF QUICK LINKS IN THE SIDE PANEL -->
<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>
<!-- START OF THE FIRDT ROW IN THE SIDE PANEL -->
<!-- THESE QUCK LINKS ARE ONLY VISIBLE UNTIL VIEWPORT MD -->
<div style="background-color:#EEEEEE;" 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>
<!-- START OF THE SECOND ROW IN THE SIDE PANEL -->
<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>
<!-- END OF THE SECOND ROW IN THE SIDE PANEL -->
</div>
<!-- END OF SIDE PANEL -->
</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>
<!-- HIER IST DIE RECHTE SEITE MIT DEN LINKS UND DEN MAILVERTEILERN -->
<!-- END OF CONTAINER ROW-->
</div>
<!-- END OF CONTAINER -->
</div>
`,