Skip to content
Snippets Groups Projects
Verified Commit 3c507195 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat(log): auto update timestamp #270

parent 06964a3e
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
development/issues/open/270.html → development/issues/closed/270.html
+ 3
− 3
View file @ 3c507195
......@@ -4,10 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>update and optimize data-bind #270</title>
<script src="./270.mjs" type="module"></script>
<script src="270.mjs" type="module"></script>
</head>
<body>
<h1>update and optimize data-bind #270</h1>
<h1>update and optimize log #270</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/270">Issue #270</a></li>
......@@ -18,7 +18,7 @@
<monster-log id="Bai3A">
</monster-log>
<p>This is an example of a log element.</p>
</main>
</body>
</html>
development/issues/open/270.mjs → development/issues/closed/270.mjs
+ 11
− 0
View file @ 3c507195
......@@ -44,3 +44,14 @@ for1Year2MonthsAnd3DaysDate.setMonth(for1Year2MonthsAnd3DaysDate.getMonth() - 2)
for1Year2MonthsAnd3DaysDate.setDate(for1Year2MonthsAnd3DaysDate.getDate() - 3);
element.addEntry(new Entry({title: "Test", message: "Test", user: "Administrator", date: for1Year2MonthsAnd3DaysDate}))
setTimeout(() => {
element.addEntry(new Entry({title: "Test", message: "Test", user: "Administrator", date: new Date()}))
setTimeout(() => {
element.addEntry(new Entry({title: "Test", message: "Test", user: "Administrator", date: new Date()}))
}, 3000);
}, 3000);
\ No newline at end of file
source/components/state/log.mjs
+ 211
− 186
View file @ 3c507195
......@@ -23,6 +23,7 @@ import { LogStyleSheet } from "./stylesheet/log.mjs";
import {Entry} from "./log/entry.mjs";
import {validateInstance, validateString} from "../../types/validate.mjs";
import "./state.mjs";
import {getWindow} from "../../dom/util.mjs";
export {Log};
......@@ -45,6 +46,8 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
*
* @example /examples/components/state/log-simple
*
* @issue https://localhost.alvine.dev:8444/development/issues/closed/270.html
*
* @since 3.74.0
* @copyright schukai GmbH
* @summary The log entry is a single entry in the log.
......@@ -78,6 +81,7 @@ class Log extends CustomElement {
* @property {string} templates.main Main template
* @property {Object} labels Labels
* @property {string} labels.nothingToReport Label for empty state
* @property {number} updateFrequency Update frequency in milliseconds for the timestamp
*/
get defaults() {
return Object.assign({}, super.defaults, {
......@@ -89,7 +93,15 @@ class Log extends CustomElement {
nothingToReport: "There is nothing to report yet.",
},
classes: {
direction: "vertical",
},
updateFrequency: 10000,
entries: [],
timestamp: 0,
});
}
......@@ -124,6 +136,10 @@ class Log extends CustomElement {
addEntry(entry) {
validateInstance(entry, Entry);
if (entry.date === undefined || entry.date === null) {
entry.date = new Date();
}
const entries = this.getOption("entries");
entries.push(entry);
......@@ -210,6 +226,13 @@ function initEventHandler() {
}
});
setInterval(() => {
getWindow().requestAnimationFrame(() => {
const timestamp = (new Date()).toTimeString();
this.setOption("timestamp", timestamp);
});
}, this.getOption("updateFrequency"));
return this;
}
......@@ -219,7 +242,8 @@ function initEventHandler() {
*/
function getTemplate() {
// language=HTML
return `<template id="entry">
return `
<template id="entry">
<li data-monster-role="entry">
<span data-monster-replace="path:entry.user"
data-monster-attributes="class path:entry.user | ?:user:hidden"></span>
......@@ -227,7 +251,8 @@ function getTemplate() {
data-monster-attributes="class path:entry.title | ?:title:hidden"></span>
<span data-monster-replace="path:entry.message"
data-monster-attributes="class path:entry.message | ?:message:hidden"></span>
<span data-monster-replace="path:entry.date | time-ago" data-monster-attributes="title path:entry.date | datetime"></span>
<span data-monster-replace="path:entry.date | time-ago"
data-monster-attributes="title path:entry.date | datetime"></span>
</li>
</template>
......
source/components/state/style/log.pcss
+ 23
− 22
View file @ 3c507195
......@@ -8,55 +8,56 @@
@import "../../style/mixin/hover.pcss";
[data-monster-role=entries] {
display: flex;
flex-direction: column;
align-items: flex-start;
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
position: relative;
& ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 1.8rem;
position: relative;
top: 0
padding: 0 0 0 1.8rem; /* Abstand links behalten */
width: 100%; /* Flex-Container-Anpassung */
}
& ul:before {
content: "";
display: block;
width: 0;
width: 2px;
height: 100%;
border: 1px dashed var(--monster-color-primary-2);
border-left-color: var(--monster-bg-color-primary-3);
border-left-style: dotted;
border-left-width: 1px;
position: absolute;
top: 0;
left: 1rem;
}
.title {
font-weight: bold;
bottom: 0;
top: 0;
}
& ul li {
margin: 0;
position: relative;
padding: 0.1rem 0.3rem;
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
border-radius: 5px;
position: relative;
}
& ul li:before {
content: "";
display: block;
width: 5px;
height: 5px;
width: 6px;
height: 6px;
box-sizing: border-box;
border-radius: 50%;
background: var(--monster-bg-color-primary-3);
border: 1px solid var(--monster-color-primary-2);
position: absolute;
left: -0.9rem;
left: calc(-1rem + (5px / 4));
top: 0.6rem;
}
}
source/components/state/stylesheet/log.mjs
+ 1
− 1
View file @ 3c507195
......@@ -24,7 +24,7 @@ const LogStyleSheet = new CSSStyleSheet();
try {
LogStyleSheet.insertRule(`
@layer log {
[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=entries] ul{list-style-type:none;margin:0;padding:0 0 0 1.8rem;position:relative;top:0}[data-monster-role=entries] ul:before{border:1px dashed var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:1rem;position:absolute;top:0;width:0}[data-monster-role=entries] .title{font-weight:700}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-1);border-radius:5px;color:var(--monster-color-primary-1);margin:0;padding:.1rem .3rem;position:relative}[data-monster-role=entries] ul li:before{background:var(--monster-bg-color-primary-3);border:1px solid var(--monster-color-primary-2);border-radius:50%;content:\"\";display:block;height:5px;left:-.9rem;position:absolute;top:.6rem;width:5px}
[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=entries]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;position:relative}[data-monster-role=entries] ul{list-style-type:none;margin:0;padding:0 0 0 1.8rem;width:100%}[data-monster-role=entries] ul:before{border-left:1px dotted var(--monster-bg-color-primary-3);bottom:0;content:\"\";display:block;height:100%;left:1rem;position:absolute;top:0;width:2px}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-1);border-radius:5px;color:var(--monster-color-primary-1);margin:0;padding:.1rem .3rem;position:relative}[data-monster-role=entries] ul li:before{background:var(--monster-bg-color-primary-3);border:1px solid var(--monster-color-primary-2);border-radius:50%;box-sizing:border-box;content:\"\";height:6px;left:calc(-1rem + 1.25px);position:absolute;top:.6rem;width:6px}
}`, 0);
} catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
......
source/types/validate.mjs
+ 1
− 0
View file @ 3c507195
......@@ -185,6 +185,7 @@ function validateObject(value) {
* ```
*
* @param {*} value
* @param {object} instance
* @return {*}
* @license AGPLv3
* @since 1.5.0
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment