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