Merge branch 'feature-40842/DashboardAmpeln' into feature-25999/C4

This commit is contained in:
Harald Bamberger
2024-09-09 12:56:55 +02:00
12 changed files with 826 additions and 370 deletions
@@ -0,0 +1,145 @@
<?php
/**
* Copyright (C) 2024 fhcomplete.org
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
if (!defined('BASEPATH')) exit('No direct script access allowed');
class Ampeln extends FHCAPI_Controller
{
/**
* Object initialization
*/
public function __construct()
{
parent::__construct([
'open' => self::PERM_LOGGED,
'all' => self::PERM_LOGGED,
'confirm' => self::PERM_LOGGED,
'alleAmpeln' => self::PERM_LOGGED,
]);
$this->load->model('content/Ampel_model', 'AmpelModel');
$this->load->model('system/Sprache_model', 'SpracheModel');
$this->uid = getAuthUID();
$this->pid = getAuthPersonID();
}
//------------------------------------------------------------------------------------------------------------------
// Public methods
/**
* confirms ampel and inserts ampel_id in public.tbl_ampel_benutzer_bestaetigt
* @access public
*
*/
public function confirm($ampel_id)
{
$this->load->library('form_validation');
$this->form_validation->set_data(['ampel_id'=> $ampel_id]);
$this->form_validation->set_rules('ampel_id', 'Ampel ID', 'required|integer');
if (!$this->form_validation->run())
$this->terminateWithValidationErrors($this->form_validation->error_array());
// load Ampel_benutzer_bestaetigt_model to confirm the ampel
$this->load->model('content/Ampel_Benutzer_Bestaetigt_model', 'AmpelBenutzerBestaetigtModel');
$insert_into_result = $this->AmpelBenutzerBestaetigtModel->insert(["ampel_id"=> $ampel_id, "uid"=> $this->uid]);
$insert_into_result = $this->getDataOrTerminateWithError($insert_into_result);
$this->terminateWithSuccess($insert_into_result);
}
/**
* queries active and not confirmed ampeln by the user
* @access public
*
*/
public function open()
{
$userAmpeln = array();
// fetch active ampeln
$activeAmpeln = $this->AmpelModel->openActive($this->uid, false);
$activeAmpeln = $this->getDataOrTerminateWithError($activeAmpeln);
foreach ($activeAmpeln as $ampel) {
// only include non confirmed active ampeln in the result
if (!$ampel->bestaetigt) {
// check if the user was assigned to the ampel
$zugeteilt = $this->AmpelModel->isZugeteilt($this->uid, $ampel->benutzer_select);
$zugeteilt = $this->getDataOrTerminateWithError($zugeteilt);
if($zugeteilt) $userAmpeln[] = $ampel;
}
}
$this->terminateWithSuccess($userAmpeln);
}
/**
* queries all ampeln of the user
* @access public
*
*/
public function all()
{
$userAmpeln = array();
$ampel_result = $this->AmpelModel->active(false, $this->uid);
$ampel_result = $this->getDataOrTerminateWithError($ampel_result);
foreach ($ampel_result as $ampel) {
// check if the ampel was assigned to the user
$zugeteilt = $this->AmpelModel->isZugeteilt($this->uid, $ampel->benutzer_select);
$zugeteilt = $this->getDataOrTerminateWithError($zugeteilt);
if ($zugeteilt) $userAmpeln[] = $ampel;
}
$this->terminateWithSuccess($userAmpeln);
}
/**
* queries all ampeln that were assigned to the user until start of first work day
* @access public
*
*/
public function alleAmpeln()
{
//fetch all ampeln
$alle_ampeln = $this->AmpelModel->alleAmpeln($this->uid);
$alle_ampeln = $this->getDataOrTerminateWithError($alle_ampeln);
$alle_ampeln = array_map(function ($ampel) {
// check if ampel is confirmed by user
$confirmedByUser = $this->AmpelModel->isConfirmed($ampel->ampel_id, $this->uid);
$ampel->bestaetigt = $confirmedByUser;
return $ampel;
}, $alle_ampeln);
$this->terminateWithSuccess($alle_ampeln);
}
}
@@ -18,11 +18,6 @@
if (! defined('BASEPATH')) exit('No direct script access allowed');
/**
* This controller operates between (interface) the JS (GUI) and the SearchBarLib (back-end)
* Provides data to the ajax get calls about the searchbar component
* This controller works with JSON calls on the HTTP GET and the output is always JSON
*/
class Profil extends FHCAPI_Controller
{
@@ -18,11 +18,6 @@
if (! defined('BASEPATH')) exit('No direct script access allowed');
/**
* This controller operates between (interface) the JS (GUI) and the SearchBarLib (back-end)
* Provides data to the ajax get calls about the searchbar component
* This controller works with JSON calls on the HTTP GET and the output is always JSON
*/
class ProfilUpdate extends FHCAPI_Controller
{
@@ -25,6 +25,7 @@ if (! defined('BASEPATH')) exit('No direct script access allowed');
/**
* Used to create a return object, should not be used directly
* @return stdClass
*/
function _createReturnObject($code, $error, $retval)
{
@@ -39,7 +40,7 @@ function _createReturnObject($code, $error, $retval)
/**
* Success
*
* @return array
* @return stdClass
*/
function success($retval = null, $code = null)
{
@@ -49,7 +50,7 @@ function success($retval = null, $code = null)
/**
* Error
*
* @return array
* @return stdClass
*/
function error($retval = null, $code = null)
{
@@ -0,0 +1,14 @@
<?php
class Ampel_Benutzer_Bestaetigt_model extends DB_Model
{
/**
* Constructor
*/
public function __construct()
{
parent::__construct();
$this->dbTable = 'public.tbl_ampel_benutzer_bestaetigt';
$this->pk = 'ampel_benutzer_bestaetigt_id';
}
}
+175 -20
View File
@@ -16,37 +16,95 @@ class Ampel_model extends DB_Model
* 1. not after the deadline date
* 2. not before the vorlaufszeit
* @param bool $email If true, then only ampeln are retrieved that are marked to be sent by mail.
* @return array Returns array of objects.
* @return stdClass Returns array of objects.
*/
public function active($email = false)
public function active($email = false, $uid = null)
{
$parametersArray = null;
$query = '
SELECT *
FROM public.tbl_ampel
WHERE';
if ($email === true)
{
$parametersArray['email'] = $email;
$query .= ' email = ? AND';
$userLanguage = getUserLanguage();
$selectStatement='*,beschreibung[('.$this->getLanguageIndex($this->escape($userLanguage)).')] as beschreibung_trans, buttontext[('.$this->getLanguageIndex($this->escape($userLanguage)).')] as buttontext_trans';
if($uid != null ){
$selectStatement .= ',
COALESCE((
SELECT true
FROM public.tbl_ampel_benutzer_bestaetigt a
WHERE a.ampel_id = ' . $this->dbTable . '.ampel_id
AND uid = ' . $this->escape($uid) . ' LIMIT 1), false) as bestaetigt';
}
$query .= '(
(NOW()<(deadline+(COALESCE(verfallszeit,0) || \' days\')::interval)::date)
OR (verfallszeit IS NULL)
AND (NOW()>(deadline-(COALESCE(vorlaufzeit,0) || \' days\')::interval)::date)
OR (vorlaufzeit IS NULL AND NOW() < deadline))';
$this->addSelect($selectStatement);
$whereStatement='';
$query .= ' ORDER BY deadline DESC';
if ($email === true) {
$whereStatement .= ' email = '.$this->escape($email).' AND';
}
$whereStatement .=
'(
(
(NOW()<(deadline+(COALESCE(verfallszeit,0) || \' days\')::interval)::date)
OR (verfallszeit IS NULL)
)
AND
(
(NOW()>(deadline-(COALESCE(vorlaufzeit,0) || \' days\')::interval)::date)
OR (vorlaufzeit IS NULL AND NOW() < deadline)
)
)';
$this->addOrder('deadline', 'DESC');
return $this->loadWhere($whereStatement);
}
public function openActive($uid, $email = false)
{
$userLanguage = getUserLanguage();
$selectStatement = '*,beschreibung[(' . $this->getLanguageIndex($this->escape($userLanguage)) . ')] as beschreibung_trans, buttontext[(' . $this->getLanguageIndex($this->escape($userLanguage)) . ')] as buttontext_trans';
$selectStatement .= ',
COALESCE((
SELECT true
FROM public.tbl_ampel_benutzer_bestaetigt a
WHERE a.ampel_id = ' . $this->dbTable . '.ampel_id
AND uid = ' . $this->escape($uid) . ' LIMIT 1), false) as bestaetigt';
$this->addSelect($selectStatement);
$whereStatement = '';
if ($email === true) {
$whereStatement .= ' email = ' . $this->escape($email) . ' AND';
}
$whereStatement .=
'
(COALESCE((
SELECT true
FROM public.tbl_ampel_benutzer_bestaetigt a
WHERE a.ampel_id = ' . $this->dbTable . '.ampel_id
AND uid = ' . $this->escape($uid) . ' LIMIT 1), false) = FALSE) AND
(
(
(NOW()<(deadline+(COALESCE(verfallszeit,0) || \' days\')::interval)::date)
OR (verfallszeit IS NULL)
)
AND
(
(NOW()>(deadline-(COALESCE(vorlaufzeit,0) || \' days\')::interval)::date)
OR (vorlaufzeit IS NULL AND NOW() < deadline)
)
)';
$this->addOrder('deadline', 'DESC');
return $this->loadWhere($whereStatement);
return $this->execQuery($query, $parametersArray);
}
/**
* Returns all Ampel-receiver of a specific Ampel.
* @param string $benutzer_select SQL Statement which defines the Ampel-receiver.
* @return array Returns array of objects with property 'uid'.
* @return stdClass Returns array of objects with property 'uid'.
*/
public function execBenutzerSelect($benutzer_select)
{
@@ -90,4 +148,101 @@ class Ampel_model extends DB_Model
else
return $result; //will contain the error-msg from execQuery
}
/**
* checks if a user is assigned to an ampel
* @param string $uid userID
* @param string $benutzer_select the select query which gets all the user that are assigned to an ampel
* @return stdClass
*/
public function isZugeteilt($uid, $benutzer_select){
$zugeteilt = $this->execReadOnlyQuery("
SELECT
CASE WHEN ? IN (".$benutzer_select.")
THEN true
ELSE false
END as zugeteilt
", [$uid]);
if(isError($zugeteilt)){
return $zugeteilt;
}
$zugeteilt = getData($zugeteilt);
return success(current($zugeteilt)->zugeteilt);
}
// THIS FUNCTION IS NOT IN USE
// fetches all ampeln that were assigned to the user after the working start_date
function alleAmpeln($uid){
$userLanguage = getUserLanguage();
$zugeteile_ampeln = [];
$datum = new datum();
$now = $datum->mktime_fromdate(date('Y-m-d'));
// start date of user
$benutzerStartDate = $this->execReadOnlyQuery("
SELECT insertamum FROM public.tbl_benutzer WHERE uid = ?", [$uid]);
$benutzerStartDate = $datum->mktime_fromdate(date(current(getData($benutzerStartDate))->insertamum));
$allAmpeln = $this->execReadOnlyQuery("
SELECT *, beschreibung[(".$this->getLanguageIndex($this->escape($userLanguage)).")] as beschreibung_trans, buttontext[(".$this->getLanguageIndex($this->escape($userLanguage)).")] as buttontext_trans FROM
public.tbl_ampel");
if(isError($allAmpeln)) return error(getError($allAmpeln));
$allAmpeln = getData($allAmpeln);
foreach($allAmpeln as $ampel){
// check if the ampel is assigned to the user
$zugeteilt = $this->execReadOnlyQuery("
SELECT
CASE WHEN ? IN (".$ampel->benutzer_select.")
THEN true
ELSE false
END as zugeteilt
", [$uid]);
if(isError($zugeteilt)) return error(getError($zugeteilt));
$zugeteilt = current(getData($zugeteilt))->zugeteilt;
// abgelaufen check
// $now > strtotime('+' . $ampel->verfallszeit . ' day', $ampel->deadline)
if(
// aktuelles datum liegt vor der Vorlaufzeit der Ampel
(isset($ampel->vorlaufzeit) && $now < strtotime('-' . $ampel->vorlaufzeit . ' day', $datum->mktime_fromdate($ampel->deadline)))
||
// ampel ist vor Arbeitsstart abgelaufen
(isset($ampel->verfallszeit) && $benutzerStartDate > strtotime('+' . $ampel->verfallszeit . ' day', $datum->mktime_fromdate($ampel->deadline)))
||
// ampel ist vor Arbeitsstart abgelaufen (verfallszeit nicht vorhanden)
($benutzerStartDate > strtotime('+' . $ampel->verfallszeit . ' day', $datum->mktime_fromdate($ampel->deadline)))
){
// continue iteration if ampel is expired before work start or shouldn't be visible yet
continue;
}
$ampel->zugeteilt = $zugeteilt;
if($zugeteilt) $zugeteile_ampeln[] = $ampel;
}
return success($zugeteile_ampeln);
}
private function getLanguageIndex($userLanguage)
{
return "
SELECT index
FROM public.tbl_sprache
WHERE sprache = " . $userLanguage;
}
}
+18
View File
@@ -0,0 +1,18 @@
export default {
open: function () {
return this.$fhcApi.get(
`/api/frontend/v1/Ampeln/open`,{});
},
all: function () {
return this.$fhcApi.get(
`/api/frontend/v1/Ampeln/all`,{});
},
confirm: function (ampel_id) {
return this.$fhcApi.get(
`/api/frontend/v1/Ampeln/confirm/${ampel_id}`,{});
},
}
+2
View File
@@ -26,6 +26,7 @@ import bookmark from "./bookmark.js";
import stv from "./stv.js";
import notiz from "./notiz.js";
import betriebsmittel from "./betriebsmittel.js";
import ampeln from "./ampeln.js";
export default {
search,
@@ -39,4 +40,5 @@ export default {
stv,
notiz,
betriebsmittel
ampeln,
};
+2
View File
@@ -1,5 +1,6 @@
import {CoreNavigationCmpt} from '../../components/navigation/Navigation.js';
import DashboardAdmin from '../../components/Dashboard/Admin.js';
import Phrasen from "../../plugin/Phrasen.js";
const app = Vue.createApp({
data: () => ({
@@ -11,4 +12,5 @@ const app = Vue.createApp({
}
});
app.config.unwrapInjectedRef = true;
app.use(Phrasen);
app.mount('#main');
@@ -29,12 +29,12 @@ export default {
methods: {
formatDateTime: function(dateTime) {
const dt = new Date(dateTime);
return dt.getDate() + '.' + dt.getMonth() + '.' + dt.getFullYear() + ' | '
return dt.getDate() + '.' + (dt.getMonth()+1) + '.' + dt.getFullYear() + ' | '
+ dt.getHours() + ':' + dt.getMinutes();
},
getDate: function(dateTime){
const dt = new Date(dateTime);
return dt.getDate() + '.' + dt.getMonth() + '.' + dt.getFullYear();
return dt.getDate() + '.' + (dt.getMonth()+1) + '.' + dt.getFullYear();
}
}
}
+264 -336
View File
@@ -1,345 +1,273 @@
import AbstractWidget from './Abstract';
import BaseOffcanvas from '../Base/Offcanvas';
let _idcounter = 0;
export default {
name: 'WidgetsAmpel',
components: { BaseOffcanvas },
data: () => ({
filter: '',
source: '',
ampeln: []
}),
mixins: [
AbstractWidget
],
computed: {
widgetAmpeln () {
return this.ampeln.slice(0, 4); // show only newest 4 ampeln
},
offcanvasAmpeln ()
{
switch(this.filter)
{
case 'verpflichtend': return this.ampeln.filter(item => item.verpflichtend);
case 'ueberfaellig': return this.ampeln.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt);
default: return this.ampeln;
}
},
count () {
return {
verpflichtend: this.ampeln.filter(item => item.verpflichtend).length,
ueberfaellig: this.ampeln.filter(item => (new Date() > new Date(item.deadline)) && !item.bestaetigt).length,
alle: this.ampeln.length
}
}
},
methods: {
closeOffcanvasAmpeln()
{
for (let i = 0; i < this.offcanvasAmpeln.length; i++)
{
let ampelId = this.offcanvasAmpeln[i].ampel_id;
this.$refs['ampelCollapse_' + ampelId][0].classList.remove('show');
}
},
openOffcanvasAmpel(ampelId){
// Close earlier opened Ampeln
this.closeOffcanvasAmpeln();
name: 'WidgetsAmpel',
components: { BaseOffcanvas },
data() {
return {
WIDGET_AMPEL_MAX: 4,
filter: '',
source: 'offen',
allAmpeln:null,
activeAmpeln:null,
idcounter: this.configMode ? 0 : ++_idcounter
};
},
mixins: [
AbstractWidget
],
computed: {
ampelnComputed() {
switch(this.source) {
case 'offen': return this.applyFilter(this.activeAmpeln);
case 'alle': return this.applyFilter(this.allAmpeln);
default: return this.applyFilter(this.activeAmpeln);
}
},
ampelnOverview () {
return this.activeAmpeln?.slice(0, this.WIDGET_AMPEL_MAX); // show only newest 4 active ampeln
},
count () {
const now = new Date();
let datasource = this.activeAmpeln;
if (this.source == 'offen') datasource = this.activeAmpeln;
if (this.source == 'alle') datasource = this.allAmpeln;
// Show given Ampel
this.$refs['ampelCollapse_' + ampelId][0].classList.add('show');
},
closeOffcanvas(){
this.filter = '';
},
confirm(ampelId){
let indexToRemove = this.ampeln.findIndex((obj => obj.ampel_id === ampelId));
this.ampeln.splice(indexToRemove, 1);
},
changeDisplay(){
this.filter = '';
if (this.source == 'offen')
{
this.ampeln = TEST_OFFENE_AMPELN;
}
return {
verpflichtend: datasource?.filter(item => item.verpflichtend).length,
ueberfaellig: datasource?.filter(item => (now > new Date(item.deadline)) && !item.bestaetigt).length,
alle: datasource?.length
}
}
},
methods: {
applyFilter(data) {
switch(this.filter) {
case 'verpflichtend': return data?.filter(item => item.verpflichtend);
case 'ueberfaellig': const now = new Date(); return data?.filter(item => (now > new Date(item.deadline)) && !item.bestaetigt);
default: return data;
}
},
toggleFilter(value) {
this.filter === value ? this.filter = '' : this.filter = value;
},
closeOffcanvasAmpeln() {
for (let i = 0; i < this.ampelnComputed.length; i++)
{
let ampelId = this.ampelnComputed[i].ampel_id;
if(this.$refs['ampelCollapse_' + ampelId]){
this.$refs['ampelCollapse_' + ampelId][0].classList.remove('show');
}
}
},
openOffcanvasAmpel(ampelId) {
// Close earlier opened Ampeln
this.closeOffcanvasAmpeln();
if (this.source == 'alle')
{
this.ampeln = TEST_ALLE_AMPELN;
// axios
// .get(this.apiurl + '/dashboard/Api/getAmpeln')
// .then(res => { this.ampeln = res.data })
// .catch(err => { console.error('ERROR: ', err.response.data) });
}
},
validateBtnTxt(buttontext){
return buttontext == null ? 'Bestätigen' : buttontext;
}
},
created() {
this.$emit('setConfig', false);
this.ampeln = TEST_OFFENE_AMPELN;
},
template: `
<div class="widgets-ampel w-100 h-100">
<div class="d-flex flex-column justify-content-between">
<div class="d-flex">
<header class="me-auto"><b>Neueste Ampeln</b></header>
<div class="mb-2 text-danger"><a href="#allAmpelOffcanvas" data-bs-toggle="offcanvas">Alle Ampeln</a></div>
</div>
<div class="d-flex justify-content-end">
<a v-if="count.ueberfaellig > 0" href="#allAmpelOffcanvas" data-bs-toggle="offcanvas" @click="filter = 'ueberfaellig'" class="text-decoration-none"><span class="badge bg-danger me-1"><i class="fa fa-solid fa-bolt"></i> Überfällig: <b>{{ count.ueberfaellig }}</b></span></a>
</div>
<div v-for="ampel in widgetAmpeln" :key="ampel.ampel_id" class="mt-2">
<div class="card">
<div class="card-body">
<div class="position-relative">
<div class="d-flex">
<div class="text-muted small me-auto"><small>Deadline: {{ getDate(ampel.deadline) }}</small></div>
<div v-if="(new Date() > new Date(ampel.deadline)) && !ampel.bestaetigt "><span class="badge bg-danger"><i class="fa fa-solid fa-bolt"></i></span></div>
<div v-if="ampel.verpflichtend"><span class="badge bg-warning ms-1"><i class="fa fa-solid fa-triangle-exclamation"></i></span></div>
<div v-if="ampel.bestaetigt"><span class="badge bg-success ms-1"><i class="fa fa-solid fa-circle-check"></i></span></div>
</div>
</div>
<a href="#allAmpelOffcanvas" data-bs-toggle="offcanvas" class="stretched-link" @click="openOffcanvasAmpel(ampel.ampel_id)">{{ ampel.kurzbz }}</a><br>
</div>
</div>
</div>
<div v-if="ampeln.length == 0" class="card card-body mt-4 p-4 text-center">
<span class="text-success h2"><i class="fa fa-solid fa-circle-check"></i></span>
<span class="text-success h5">Super!</span><br>
<span class="small">Keine offenen Ampeln.</span>
</div>
</div>
</div>
// Show given Ampel
this.$refs['ampelCollapse_' + ampelId][0].classList.add('show');
},
closeOffcanvas() {
this.closeOffcanvasAmpeln();
this.filter = '';
// maybe we also want to reset the source (open/alle) of the displayed ampeln
},
fetchNonConfirmedActiveAmpeln() {
this.$fhcApi.factory
.ampeln.open()
.then(res => {
this.activeAmpeln = res.data;
})
.catch(error => {
if (error.code === 'ECONNABORTED')
this.fetchNonConfirmedActiveAmpeln();
else
this.$fhcAlert.handleSystemError(error);
});
},
fetchAllActiveAmpeln() {
this.$fhcApi.factory
.ampeln.all()
.then(res => {
this.allAmpeln = res.data;
})
.catch(error => {
if (error.code === 'ECONNABORTED')
this.fetchAllActiveAmpeln();
else
this.$fhcAlert.handleSystemError(error);
});
<!-- All Ampeln Offcanvas -->
<BaseOffcanvas id="allAmpelOffcanvas" :closeFunc="closeOffcanvas">
<template #title><header><b>Alle meine Ampeln</b></header></template>
<template #body>
<div class="d-flex justify-content-evenly">
<div class="form-check form-check-inline form-control-sm">
<input class="form-check-input" type="radio" v-model="source" id="offen" value="offen" @change="changeDisplay" checked>
<label class="form-check-label" for="offen">Offene Ampeln</label>
</div>
<div class="form-check form-check-inline form-control-sm">
<input class="form-check-input" type="radio" v-model="source" id="alle" value="alle" @change="changeDisplay">
<label class="form-check-label" for="alle">Alle Ampeln</label>
</div>
</div>
<div class="col"><button class="btn btn-light w-100" @click="filter = ''"><small>Alle: <b>{{ count.alle }}</b></small></button></div>
<div class="row row-cols-2 g-2 mt-1">
<div class="col"><button class="btn btn-danger w-100" @click="filter = 'ueberfaellig'"><i class="fa fa-solid fa-bolt me-2"></i><small>Überfällig: <b>{{ count.ueberfaellig }}</b></small></button></div>
<div class="col"><button class="btn btn-warning w-100" @click="filter = 'verpflichtend'"><i class="fa fa-solid fa-triangle-exclamation me-2"></i><small>Pflicht: <b>{{ count.verpflichtend }}</b></small></button></div>
</div>
<div v-for="ampel in offcanvasAmpeln" :key="ampel.ampel_id" class="mt-2">
<ul class="list-group">
<li class="list-group-item small">
<div class="position-relative"><!-- prevents streched-link from stretching outside this parent element -->
<div class="d-flex">
<span class="small text-muted me-auto"><small>Deadline: {{ getDate(ampel.deadline) }}</small></span>
<div v-if="(new Date() > new Date(ampel.deadline)) && !ampel.bestaetigt"><span class="badge bg-danger"><i class="fa fa-solid fa-bolt"></span></div>
<div v-if="ampel.verpflichtend"><span class="badge bg-warning ms-1"><i class="fa fa-solid fa-triangle-exclamation"></span></div>
<div v-if="ampel.bestaetigt"><span class="badge bg-success ms-1"><i class="fa fa-solid fa-circle-check"></i></span></div>
</div>
<a :href="'#ampelCollapse_' + ampel.ampel_id" data-bs-toggle="collapse" class="stretched-link">{{ ampel.kurzbz }}</a><br>
</div>
<div class="collapse my-3" :id="'ampelCollapse_' + ampel.ampel_id" :ref="'ampelCollapse_' + ampel.ampel_id">
{{ ampel.beschreibung[0] }}
<div class="d-flex justify-content-end mt-3">
<button class="btn btn-sm btn-primary" :class="{disabled: ampel.bestaetigt}" @click="confirm(ampel.ampel_id)">{{ validateBtnTxt(ampel.buttontext[0]) }}</button>
</div>
</div>
</li>
</ul>
</div>
</template>
</BaseOffcanvas>`
},
async confirm(ampelId) {
this.$fhcApi.factory
.ampeln.confirm(ampelId)
.then(() => {
this.$fhcAlert.alertSuccess(this.$p.t('ampeln', 'ampelBestaetigt'));
// update the ampeln by refetching them
this.fetchNonConfirmedActiveAmpeln();
this.fetchAllActiveAmpeln();
})
.catch(this.$fhcAlert.handleSystemError);
},
validateBtnTxt(buttontext) {
if (buttontext instanceof Array && !buttontext.length) return this.$p.t('ui', 'bestaetigen');
if (!buttontext) return this.$p.t('ui', 'bestaetigen');
return buttontext;
}
},
created() {
this.$emit('setConfig', false);
},
async mounted() {
if (!this.configMode) {
this.fetchNonConfirmedActiveAmpeln();
this.fetchAllActiveAmpeln();
}
},
template: /*html*/`
<div class="widgets-ampel w-100 h-100">
<div v-if="!configMode">
<div v-if="activeAmpeln" class="d-flex flex-column justify-content-between">
<div class="d-flex">
<header class="me-auto"><b>{{$p.t('ampeln', 'newestAmpeln')}}</b></header>
<div class="mb-2 text-danger">
<a :href="'#allAmpelOffcanvas' + idcounter" data-bs-toggle="offcanvas">
{{$p.t('ampeln', 'allAmpeln')}}
</a>
</div>
</div>
<div class="d-flex justify-content-end">
<a v-if="count.ueberfaellig > 0" :href="'#allAmpelOffcanvas' + idcounter" data-bs-toggle="offcanvas" @click="filter = 'ueberfaellig'" class="text-decoration-none">
<span class="badge bg-danger me-1">
<i class="fa fa-solid fa-bolt"></i> {{$p.t('ampeln','overdue',{count:count.ueberfaellig})}}
</span>
</a>
</div>
<div v-for="ampel in ampelnOverview" :key="ampel.ampel_id" class="mt-2">
<div class="card">
<div class="card-body">
<div class="position-relative">
<div class="d-flex">
<div class="text-muted small me-auto"><small>{{$p.t('ampeln','ampelnDeadline',{value:getDate(ampel.deadline)})}}</small></div>
<div v-if="(new Date() > new Date(ampel.deadline)) && !ampel.bestaetigt "><span class="badge bg-danger"><i class="fa fa-solid fa-bolt"></i></span></div>
<div v-if="ampel.verpflichtend"><span class="badge bg-warning ms-1"><i class="fa fa-solid fa-triangle-exclamation"></i></span></div>
<div v-if="ampel.bestaetigt"><span class="badge bg-success ms-1"><i class="fa fa-solid fa-circle-check"></i></span></div>
</div>
</div>
<a :href="'#allAmpelOffcanvas' + idcounter" data-bs-toggle="offcanvas" class="stretched-link" @click="openOffcanvasAmpel(ampel.ampel_id)">{{ ampel.kurzbz }}</a><br>
</div>
</div>
</div>
<div v-if="activeAmpeln.length == 0" class="card card-body mt-4 p-4 text-center">
<span class="text-success h2"><i class="fa fa-solid fa-circle-check"></i></span>
<span class="text-success h5">{{$p.t('ampeln','super')}}</span><br>
<span class="small">{{$p.t('ampeln','noOpenAmpeln')}}</span>
</div>
</div>
<div v-else>
<header class="me-auto"><b>{{$p.t('ampeln', 'newestAmpeln')}} </b></header>
<template v-for="n in WIDGET_AMPEL_MAX">
<div class="mt-2 card" aria-hidden="true">
<div class="card-body">
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-12"></span>
</p>
</div>
</div>
</template>
</div>
</div>
<!-- All Ampeln Offcanvas -->
<BaseOffcanvas v-if="!configMode" :id="'allAmpelOffcanvas' + idcounter" :closeFunc="closeOffcanvas">
<template #title><header><b>{{$p.t('ampeln','allMyAmpeln')}}</b></header></template>
<template #body>
<div class="d-flex justify-content-evenly">
<div class="form-check form-check-inline form-control-sm">
<input class="form-check-input" type="radio" v-model="source" :id="'offen' + idcounter" value="offen">
<label class="form-check-label" :for="'offen' + idcounter">{{$p.t('ampeln','openAmpeln')}}</label>
</div>
<div class="form-check form-check-inline form-control-sm">
<input class="form-check-input" type="radio" v-model="source" :id="'alle' + idcounter" value="alle" >
<label class="form-check-label" :for="'alle' + idcounter">{{$p.t('ampeln','allAmpeln')}}</label>
</div>
</div>
<div class="col">
<button class="btn btn-light w-100" @click="filter = ''">
<small :class="{'fw-bold':filter===''}">{{$p.t('ui','alle')}}: <b>{{ count.alle }}</b></small>
</button>
</div>
<div class="row row-cols-2 g-2 mt-1">
<div class="col">
<button class="btn btn-danger w-100" @click="toggleFilter('ueberfaellig')">
<i class="fa fa-solid fa-bolt me-2"></i>
<small :class="{'fw-bold':filter==='ueberfaellig'}">
{{$p.t('ampeln','overdue',{count:count.ueberfaellig})}}
</small>
</button>
</div>
<div class="col">
<button class="btn btn-warning w-100" @click="toggleFilter('verpflichtend')">
<i class="fa fa-solid fa-triangle-exclamation me-2"></i>
<small :class="{'fw-bold':filter==='verpflichtend'}" >
{{$p.t('ampeln','mandatory')}}: <b>{{ count.verpflichtend }}</b>
</small>
</button>
</div>
</div>
<div v-for="ampel in ampelnComputed" :key="ampel.ampel_id" class="mt-2">
<ul class="list-group">
<li class="list-group-item small">
<div class="position-relative">
<!-- prevents streched-link from stretching outside this parent element -->
<div class="d-flex">
<span class="small text-muted me-auto">
<small>
{{$p.t('ampeln','ampelnDeadline',{value:getDate(ampel.deadline)})}}
</small>
</span>
<div v-if="(new Date() > new Date(ampel.deadline)) && !ampel.bestaetigt">
<span class="badge bg-danger">
<i class="fa fa-solid fa-bolt"></i>
</span>
</div>
<div v-if="ampel.verpflichtend">
<span class="badge bg-warning ms-1">
<i class="fa fa-solid fa-triangle-exclamation"></i>
</span>
</div>
<div v-if="ampel.bestaetigt">
<span class="badge bg-success ms-1">
<i class="fa fa-solid fa-circle-check"></i>
</span>
</div>
</div>
<a :href="'#ampelCollapse' + idcounter + '_' + ampel.ampel_id" data-bs-toggle="collapse" class="stretched-link">
{{ ampel.kurzbz }}
</a>
<br>
</div>
<div class="collapse my-3" :id="'ampelCollapse' + idcounter + '_' + ampel.ampel_id" :ref="'ampelCollapse_' + ampel.ampel_id">
<div v-html="ampel.beschreibung_trans"></div>
<div v-if="!ampel.bestaetigt " class="d-flex justify-content-end mt-3">
<button class="btn btn-sm btn-primary" :class="{disabled: ampel.bestaetigt}" @click="confirm(ampel.ampel_id)">
{{ validateBtnTxt(ampel.buttontext_trans) }}
</button>
</div>
</div>
</li>
</ul>
</div>
</template>
</BaseOffcanvas>
</div>`
}
const TEST_ALLE_AMPELN = [
{
ampel_id: 0,
kurzbz: 'Ampeltitel 1',
deadline: '2022-12-31',
verfallszeit: 10,
verpflichtend: false,
bestaetigt: false,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'1-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'1-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 1,
kurzbz: 'Ampeltitel 2 kann auch etwas länger sein',
deadline: '2023-10-03',
verfallszeit: 20,
verpflichtend: true,
bestaetigt: false,
buttontext: ['Gelesen', 'Read'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'2-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'2-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 2,
kurzbz: 'Ampeltitel 3',
deadline: '2022-10-31',
verfallszeit: null, // Dauerampel, Bis zur Bestätigung
verpflichtend: false,
bestaetigt: true,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'3-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'3-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 3,
kurzbz: 'Ampeltitel 4',
deadline: '2022-10-31',
verfallszeit: 40,
verpflichtend: false,
bestaetigt: true,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 4,
kurzbz: 'Ampeltitel 5',
deadline: '2022-10-31',
verfallszeit: 10,
verpflichtend: false,
bestaetigt: true,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 5,
kurzbz: 'Ampeltitel 6',
deadline: '2022-10-31',
verfallszeit: 40,
verpflichtend: false,
bestaetigt: true,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 6,
kurzbz: 'Ampeltitel 7',
deadline: '2020-12-31',
verfallszeit: 10,
verpflichtend: false,
bestaetigt: true,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},{
ampel_id: 7,
kurzbz: 'Ampeltitel 8',
deadline: '2022-09-25',
verfallszeit: 40,
verpflichtend: false,
bestaetigt: false,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 8,
kurzbz: 'Ampeltitel 9',
deadline: '2022-10-01',
verfallszeit: 10,
verpflichtend: false,
bestaetigt: false,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
}
]
const TEST_OFFENE_AMPELN = [
{
ampel_id: 0,
kurzbz: 'Ampeltitel 1',
deadline: '2022-12-31',
verfallszeit: 10,
verpflichtend: false,
bestaetigt: false,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'1-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'1-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 1,
kurzbz: 'Ampeltitel 2 kann auch etwas länger sein',
deadline: '2023-10-03',
verfallszeit: 20,
verpflichtend: true,
bestaetigt: false,
buttontext: ['Gelesen', 'Read'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'2-Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'2-Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 7,
kurzbz: 'Ampeltitel 8',
deadline: '2022-09-25',
verfallszeit: 40,
verpflichtend: false,
bestaetigt: false,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
},
{
ampel_id: 8,
kurzbz: 'Ampeltitel 9',
deadline: '2022-10-01',
verfallszeit: 10,
verpflichtend: false,
bestaetigt: false,
buttontext: ['Bestätigen', 'Confirm'],
insertamum: '2022-09-21 15:25:00',
beschreibung: [
'Deutscher Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.',
'Englischer Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'
]
}
];
+201
View File
@@ -33112,6 +33112,207 @@ array(
)
)
),
// AMPELN PHRASEN -----------------------------------------------------------------------------
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'newestAmpeln',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Neueste Ampeln',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'Newest Ampeln',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'allAmpeln',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Alle Ampeln',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'All Ampeln',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'overdue',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Überfällig: {count}',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'Overdue: {count}',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'ampelnDeadline',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Stichtag: {value}',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'Deadline: {value}',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'noOpenAmpeln',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Keine offenen Ampeln.',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'No open Ampeln.',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'openAmpeln',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Offene Ampeln',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'Open Ampeln',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'allMyAmpeln',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Alle meine Ampeln',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'All my Ampeln',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'mandatory',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Pflicht',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'Mandatory',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'ampelBestaetigt',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Ampel bestätigt',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'Ampel confirmed',
'description' => '',
'insertvon' => 'system'
)
)
),
array(
'app' => 'core',
'category' => 'ampeln',
'phrase' => 'super',
'insertvon' => 'system',
'phrases' => array(
array(
'sprache' => 'German',
'text' => 'Super!',
'description' => '',
'insertvon' => 'system'
),
array(
'sprache' => 'English',
'text' => 'Super!',
'description' => '',
'insertvon' => 'system'
)
)
),
);