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

Merge branch 'feature-24647/Konfigurierbare_Dashboards' into feature-25999/C4

Browse Source
This commit is contained in:
cgfhtw
2023-02-09 16:12:36 +01:00
parent 9f72206796 4120f5a566
commit 3d1908982a
10 changed files with 231 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/controllers/Test.php
+63
View File
@@ -0,0 +1,63 @@
<?php
if (! defined('BASEPATH')) exit('No direct script access allowed');
/**
*/
class Test extends Auth_Controller
{
private $_uid; // uid of the logged user
/**
* Constructor
*/
public function __construct()
{
// Set required permissions
parent::__construct(
array(
'index' => 'dashboard/benutzer:r',
'db' => 'dashboard/benutzer:r',
'admin' => 'dashboard/admin:r',
)
);
$this->load->library('AuthLib');
$this->_setAuthUID(); // sets property uid
$this->setControllerId(); // sets the controller id
}
// -----------------------------------------------------------------------------------------------------------------
// Public methods
public function index()
{
$this->load->view('test/Test.php', ['dashboard' => 'CIS']);
}
// Public methods
public function db($dashboard)
{
$this->load->view('test/Test.php', ['dashboard' => $dashboard]);
}
public function admin()
{
$this->load->view('test/Admin.php', []);
}
// -----------------------------------------------------------------------------------------------------------------
// Private methods
/**
* Retrieve the UID of the logged user and checks if it is valid
*/
private function _setAuthUID()
{
$this->_uid = getAuthUID();
if (!$this->_uid) show_error('User authentification failed');
}
}
application/controllers/dashboard/Config.php
+7 -1
View File
@@ -207,7 +207,13 @@ class Config extends Auth_Controller
foreach ($funktionen as $funktion) {
$conf = $this->DashboardLib->getPreset($db, $funktion);
if ($conf)
$result[$funktion] = json_decode($conf->preset, true)['widgets'][$funktion];
{
$preset = json_decode($conf->preset, true);
if (!isset($preset['widgets']) || !isset($preset['widgets'][$funktion]))
$result[$funktion] = [];
else
$result[$funktion] = $preset['widgets'][$funktion];
}
else
$result[$funktion] = [];
}
application/controllers/dashboard/Widget.php
+2 -2
View File
@@ -11,9 +11,9 @@ class Widget extends Auth_Controller
{
parent::__construct(
array(
'index' => 'dashboard/benutzer:r',
'index' => ['dashboard/benutzer:r', 'dashboard/admin:r'],
'getAll' => 'dashboard/admin:r',
'getWidgetsForDashboard' => 'dashboard/benutzer:rw',
'getWidgetsForDashboard' => ['dashboard/benutzer:rw', 'dashboard/admin:r'],
'setAllowed' => 'dashboard/admin:rw'
)
);
application/models/dashboard/Widget_model.php
+2 -2
View File
@@ -15,8 +15,8 @@ class Widget_model extends DB_Model
public function getWithAllowedForDashboard($dashboard_id)
{
$this->addSelect($this->dbTable . '.*');
$this->addSelect('CASE WHEN dashboard_id = ? THEN 1 ELSE 0 END AS allowed', false);
$this->addJoin('dashboard.tbl_dashboard_widget', 'widget_id', 'LEFT');
$this->addSelect('CASE WHEN dashboard_id IS NULL THEN 0 ELSE 1 END AS allowed', false);
$this->db->join('dashboard.tbl_dashboard_widget dw', $this->dbTable . '.widget_id=dw.widget_id AND dashboard_id = ?', 'LEFT', false);
return $this->execQuery($this->db->get_compiled_select($this->dbTable), [$dashboard_id]);
}
application/views/test/Admin.php
+32
View File
@@ -0,0 +1,32 @@
<?php
$this->load->view('templates/FHC-Header',
array(
'title' => 'FH-Complete',
'bootstrap5' => true,
'fontawesome6' => true,
'axios027' => true,
'restclient' => true,
'vue3' => true,
'customJSModules' => ['public/js/apps/Test.js'],
'customCSSs' => [
'public/css/components/dashboard.css'
],
'navigationcomponent' => true
)
);
?>
<div id="main">
<core-navigation-cmpt :add-side-menu-entries="appSideMenuEntries"></core-navigation-cmpt>
<div id="content">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<dashboard-admin/>
</div>
</div>
<?php $this->load->view('templates/FHC-Footer'); ?>
application/views/test/Test.php
+32
View File
@@ -0,0 +1,32 @@
<?php
$this->load->view('templates/FHC-Header',
array(
'title' => 'FH-Complete',
'bootstrap5' => true,
'fontawesome6' => true,
'axios027' => true,
'restclient' => true,
'vue3' => true,
'customJSModules' => ['public/js/apps/Test.js'],
'customCSSs' => [
'public/css/components/dashboard.css'
],
'navigationcomponent' => true
)
);
?>
<div id="main">
<core-navigation-cmpt :add-side-menu-entries="appSideMenuEntries"></core-navigation-cmpt>
<div id="content">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<core-dashboard dashboard="<?= $dashboard; ?>"/>
</div>
</div>
<?php $this->load->view('templates/FHC-Footer'); ?>
public/js/apps/Test.js
+19
View File
@@ -0,0 +1,19 @@
import {CoreNavigationCmpt} from '../components/navigation/Navigation.js';
import CoreDashboard from '../components/Dashboard/Dashboard.js';
import DashboardAdmin from '../components/Dashboard/Admin.js';
Vue.createApp({
data: () => ({
appSideMenuEntries: {}
}),
components: {
CoreNavigationCmpt,
DashboardAdmin,
CoreDashboard/*,
"CoreFilterCmpt": CoreFilterCmpt,
"verticalsplit": verticalsplit,
"searchbar": searchbar*/
},
mounted() {
}
}).mount('#main');
public/js/components/Dashboard/Admin/Presets.js
+12 -1
View File
@@ -14,6 +14,7 @@ export default {
data: () => ({
funktionen: {},
sections: [],
tmpLoading: ''
}),
computed: {
apiurl() {
@@ -117,10 +118,14 @@ export default {
loadSections(evt) {
let funktionen = Array.from(evt.target.querySelectorAll("option:checked"),e=>e.value);
this.sections = [];
this.tmpLoading = funktionen.join('###');
axios.get(this.apiurl + '/Config/PresetBatch', {params: {
db: this.dashboard,
funktionen
}}).then(res => {
if (this.tmpLoading !== funktionen.join('###'))
return; // NOTE(chris): prevent race condition
for (var section in res.data.retval) {
let widgets = [];
for (var wid in res.data.retval[section]) {
@@ -145,10 +150,16 @@ export default {
});
}).catch(err => console.error('ERROR:', err));
},
watch: {
dashboard() {
// TODO(chris): this should be done without a watcher
this.loadSections({target:this.$refs.funktionenList});
}
},
template: `<div class="dashboard-admin-presets">
<div class="row">
<div class="col-3">
<select class="form-control" multiple @input="loadSections">
<select ref="funktionenList" style="height:30em" class="form-control" multiple @input="loadSections">
<option v-for="name,id in funktionen" :key="id" :value="id">{{ name }}</option>
</select>
</div>
public/js/components/Dashboard/Section.js
+54 -17
View File
@@ -24,13 +24,16 @@ export default {
data() {
return {
gridWidth: 0,
containerRect: {top:0,left:0},
changeHeight: 1,
movedObjects: [],
editMode: this.adminMode ? 1 : 0,
gridXLast: 0,
gridYLast: 0,
dataTransfer: {}
gridXLast: -1, // NOTE(chris): 0 based
gridYLast: -1,
dragging: 0,
dataTransfer: {},
gridAddFound: false,
gridXAdd: -1, // NOTE(chris): 0 based
gridYAdd: -1
}
},
computed: {
@@ -38,7 +41,7 @@ export default {
this.widgets.forEach((item,i) => item.index = i);
return this.widgets;
},
itemCoords() {
itemCoords() { // NOTE(chris): 1 based
if (!this.gridWidth)
return [];
let itemCoords = this.items.map(item => item.place[this.gridWidth] || this.createItemPlacement(item));
@@ -103,11 +106,13 @@ export default {
if (!this.gridWidth || !this.changeHeight)
return 0;
let minH = 0;
this.itemCoords.forEach((item,i) => minH = Math.max(minH, (!this.editMode && this.items[i].hidden) ? 0 : item.y + item.h - 1));
this.itemCoords.forEach((item,i) => minH = Math.max(minH, (!this.editMode && this.items[i].hidden) ? 0 : item.y - 1 + item.h));
// TODO(chris): the extraline should only be present if all slots are occupied
return minH + this.editMode;
if (minH == 0 && this.editMode)
return 1;
return minH + this.editMode*this.dragging;
},
gridOccupiers() {
gridOccupiers() { // NOTE(chris): 0 based
let occupiers = [];
let gridWidth = this.gridWidth;
this.items.forEach(item => {
@@ -123,20 +128,26 @@ export default {
}
});
return occupiers;
},
cssBg() {
if (!this.editMode || this.dragging || !this.gridAddFound)
return 'transparent';
let x = this.gridXAdd, y = this.gridYAdd, h = this.gridHeight-1 || 1, w = this.gridWidth-1 || 1;
return `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-500 -500 1448 1512"><path fill="lightgray" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>')` + (100 * x/w) + '% ' + (100 * y/h) + '%/' + (100/this.gridWidth) + '% ' + (100/this.gridHeight) + '% no-repeat;cursor:pointer';
}
},
methods: {
addWidget(evt) {
if (evt.target != this.$refs.container || !this.editMode)
return;
const rect = this.containerRect;
const rect = this.$refs.container.getBoundingClientRect();
const gridX = Math.floor(this.gridWidth * (evt.clientX - rect.left) / this.$refs.container.clientWidth);
const gridY = Math.floor(this.gridHeight * (evt.clientY - rect.top) / this.$refs.container.clientHeight);
if (this.gridOccupiers[gridY * this.gridWidth + gridX] === undefined) {
let widget = { widget: 1, config: {}, place: {}, custom: 1 };
widget.place[this.gridWidth] = {
x: gridX,
y: gridY,
x: gridX+1,
y: gridY+1,
w: 1,
h: 1
};
@@ -162,7 +173,29 @@ export default {
});*/
return item.place[this.gridWidth];
},
onMouseMove(evt) {
if (!this.editMode || this.dragging) {
this.gridXAdd = this.gridYAdd = -1;
return;
}
const rect = this.$refs.container.getBoundingClientRect();
const gridX = Math.floor(this.gridWidth * (evt.clientX - rect.left) / this.$refs.container.clientWidth);
const gridY = Math.floor(this.gridHeight * (evt.clientY - rect.top) / this.$refs.container.clientHeight);
if (this.gridXAdd == gridX && this.gridYAdd == gridY)
return;
// TODO(chris): only mark it when its not occupied
this.gridXAdd = gridX;
this.gridYAdd = gridY;
this.gridAddFound = (this.gridOccupiers[gridX + gridY * this.gridWidth] === undefined);
},
onMouseLeave() {
this.gridXAdd = this.gridYAdd = -1;
this.gridAddFound = false;
},
startDrag(evt, item) {
this.dragging = 1;
this.gridXLast = -1;
this.gridYLast = -1;
item._x = this.itemCoords[item.index].x;
@@ -178,6 +211,7 @@ export default {
}
},
startResize(evt, item) {
this.dragging = 1;
this.gridXLast = -1;
this.gridYLast = -1;
item._w = this.itemCoords[item.index].w;
@@ -239,7 +273,7 @@ export default {
onDragOver(evt) {
let id, x, y, w, h;
const action = this.dataTransfer.action;
const rect = this.containerRect;
const rect = this.$refs.container.getBoundingClientRect();
const gridX = Math.floor(this.gridWidth * (evt.clientX - rect.left) / this.$refs.container.clientWidth);
const gridY = Math.floor(this.gridHeight * (evt.clientY - rect.top) / this.$refs.container.clientHeight);
@@ -304,6 +338,9 @@ export default {
}
},
onDrop() {
this.dragging = 0;
this.gridXLast = -1;
this.gridYLast = -1;
let id = 0;
let update = {};
while ((id = this.movedObjects.pop())) {
@@ -376,14 +413,12 @@ export default {
let self = this;
let cont = self.$refs.container;
self.gridWidth = window.getComputedStyle(cont).getPropertyValue('grid-template-columns').split(" ").length;
self.containerRect = cont.getBoundingClientRect();
window.addEventListener('resize', () => {
for (const child of cont.children) {
child.style.display = 'none';
}
self.gridWidth = window.getComputedStyle(cont).getPropertyValue('grid-template-columns').split(" ").length;
self.containerRect = cont.getBoundingClientRect();
for (const child of cont.children) {
child.style.display = '';
}
@@ -394,14 +429,16 @@ export default {
<span class="col">{{name}}</span>
<button class="col-auto btn" @click.prevent="editMode = editMode ? 0 : 1"><i class="fa-solid fa-gear"></i></button>
</h3>
<div class="position-relative" :style="'height:0;padding-bottom:' + (gridHeight * 100/gridWidth) + '%'">
<div :h="gridHeight" :w="gridWidth" class="position-relative" :style="'height:0;padding-bottom:' + (gridHeight * 100/gridWidth) + '%'">
<div ref="container"
class="position-absolute top-0 left-0 w-100 h-100 draganddropcontainer"
:style="'display:grid;grid-template-rows:repeat('+gridHeight+',1fr)'"
:style="'display:grid;grid-template-rows:repeat('+gridHeight+',1fr);background:'+cssBg"
@click="addWidget($event)"
@drop="onDrop($event, 1)"
@dragover.prevent="onDragOver"
@dragenter.prevent>
@dragenter.prevent
@mousemove="onMouseMove"
@mouseleave="onMouseLeave">
<dashboard-item
v-for="item in items"
public/js/components/DashboardWidget/News.js
+8 -5
View File
@@ -22,7 +22,10 @@ export default {
}
return this.allNewsList.slice(0, quantity);
}
},
placeHolderImgURL: function() {
return FHC_JS_DATA_STORAGE_OBJECT.app_root + 'skin/images/fh_technikum_wien_illustration_klein.png';
}
},
created(){
axios
@@ -69,7 +72,7 @@ export default {
<div v-else class="h-100" :class="'row row-cols-' + width">
<div v-for="news in newsList" :key="news.id">
<div class="card h-100">
<img src="../../skin/images/fh_technikum_wien_illustration_klein.png" class="card-img-top">
<img :src="placeHolderImgURL" class="card-img-top">
<div class="card-footer"><span class="card-subtitle small text-muted">{{ formatDateTime(news.insertamum) }}</span></div>
<div class="card-body">
<a href="#newsModal" class="card-title h5 stretched-link" @click="setSingleNews(news)">{{ news.betreff }}</a><br>
@@ -85,7 +88,7 @@ export default {
<BsModal ref="newsModal" id="newsModal" dialog-class="modal-lg">
<template #title>
<div class="row">
<div class="col-5"><img src="../../skin/images/fh_technikum_wien_illustration_klein.png" class="img-fluid rounded-start"></div>
<div class="col-5"><img :src="placeHolderImgURL" class="img-fluid rounded-start"></div>
<div class="col-7 d-flex align-items-end">
<p>{{ singleNews.betreff }}<br><small class="text-muted">{{ formatDateTime(singleNews.insertamum) }}</small></p>
</div>
@@ -101,7 +104,7 @@ export default {
<div class="row row-cols-5 g-4 h-100 px-5">
<div v-for="news in allNewsList" :key="news.id">
<div class="card h-100">
<img src="../../skin/images/fh_technikum_wien_illustration_klein.png" class="card-img-top">
<img :src="placeHolderImgURL" class="card-img-top">
<div class="card-footer"><span class="card-subtitle small">{{ formatDateTime(news.insertamum) }}</span></div>
<div class="card-body">
<a href="" class="card-title h5 stretched-link" @click="setSingleNews1(news)">{{ news.betreff }}</a><br>
@@ -112,4 +115,4 @@ export default {
</div>
</template>
</BsModal>`
}
}