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

fix: initialize of loaded html fields #210

parent 6417ab82
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
development/issues/closed/210.html 0 → 100644
+ 63
− 0
View file @ df47406b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>initializing of reloaded html fields #210</title>
<script src="./210.mjs" type="module"></script>
</head>
<body>
<h1>initializing of reloaded html fields #210</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/210">Issue #210</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-datasource-rest id="ds210"
data-monster-option-read-url="/issue-210.json"
data-monster-option-write-url="/issue-210"
data-monster-option-write-acceptedstatus="400::200"
data-monster-option-features-autoinit="true">
</monster-datasource-rest>
<monster-dataset data-monster-option-index="0"
data-monster-option-datasource-selector="#ds210"
data-monster-option-mapping-data="">
ID:
<div data-monster-replace="path:data.id"></div>
<div data-monster-replace="path:data.name"></div>
</monster-dataset>
<monster-form data-monster-option-datasource-selector="#ds210"
data-monster-option-mapping-data=""
data-monster-option-features-mutationobserver="true"
>
<monster-field-set data-monster-option-labels-title="my title">
<label for="id">field id</label><input id="id" type="number"
data-monster-attributes="value path:data.id"
data-monster-bind="path:data.id">
<label for="name">field name</label><input id="name" data-monster-attributes="value path:data.name">
</monster-field-set>
<monster-field-set data-monster-option-labels-title="">
<monster-datasource-save-button data-monster-option-datasource-selector="#ds210">ok
</monster-datasource-save-button>
</monster-field-set>
</monster-form>
</main>
</body>
</html>
development/issues/closed/210.mjs 0 → 100644
+ 111
− 0
View file @ df47406b
/**
* @file development/issues/open/210.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/210
* @description initializing of reloaded html fields
* @issue 210
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/style/form.pcss";
import "../../../source/components/datatable/datasource/rest.mjs";
import "../../../source/components/datatable/save-button.mjs";
import "../../../source/components/form/form.mjs";
import "../../../source/components/form/field-set.mjs";
import "../../../source/components/form/select.mjs";
import "../../../source/components/form/context-help.mjs";
import "../../../source/components/form/context-error.mjs";
import {domReady} from "../../../source/dom/ready.mjs";
domReady.then(() => {
// get html from server '/issue-210.html' and insert after last field in form
fetch('/issue-210.html')
.then(response => response.text())
.then(html => {
const form = document.querySelector('monster-form');
const fieldSet = document.querySelector('monster-field-set');
if (!fieldSet) {
return;
}
fieldSet.insertAdjacentHTML('beforeend', html);
// form.refresh();
});
});
/**
* Interne Daten löschen, nicht übertragen
* Änderungen werden global geändert
* diese Werte stehen nach dem speichern nicht mehr zur Verfügung
for (const [key, value] of Object.entries(data.dataset)) {
for (const [k, v] of Object.entries(data.dataset[key])) {
if (k.indexOf(internalDataPrefix) !== -1) {
delete data.dataset[key][k];
};
}
}
//nicht mit den Original daten arbeiten
//da sich so auch die Originaldaten ändern
let currentData = clone(data);
let d = diff(currentData.dataset,lastData.dataset);
/**
* Daten für den nächsten Vergleich speichern
lastData = clone(currentData);
let changedKeys = [];
for (const [key, value] of Object.entries(d)) {
let index = value.path[0]
if(changedKeys.includes(index)===false){
changedKeys.push(index);
}
}
/**
* Daten die sich nicht geändert haben löschen
let updateData = [];
for (const [key, value] of Object.entries(currentData.dataset)) {
if(changedKeys.includes(key)===true){
updateData.push(currentData.dataset[key]);
}
};
/**
* Zeit umformatieren für die Daten die noch
* übertragen werden sollen
for (const [key, value] of Object.entries(updateData)) {
let time = updateData[key]?.scheduler?.time;
if (time !== undefined) {
/**
* Locale Zeit '2024-03-22T11:22:33'
let d = new Date(Date.parse(time));
/**
* UTC Zeit '2024-03-22T10:22:33.000Z'
d = d.toISOString();
updateData[key].scheduler.time = d;
}
}
return updateData;
*/
\ No newline at end of file
development/mock/issue-210.js 0 → 100644
+ 101
− 0
View file @ df47406b
const json =
`[
{
"id": 1000,
"name": "order 1",
"load1": "value load row 1:1",
"load2": "value load row 1:2",
"load3": "value load row 1:3"
},
{
"id": 1001,
"name": "order 2",
"load1": "value load row 2:1",
"load2": "value load row 2:2",
"load3": "value load row 2:3"
}
]`;
// check if json is valid
JSON.parse(json)
const json400Error=`[
{
"sys": {
"type": "Error",
"message": "Invalid request"
}
}
]`
// check if json is valid
JSON.parse(json400Error)
const json200Error=`[
{
"sys": {
"type": "Error",
"message": "Invalid request"
}
}
]`
// check if json is valid
JSON.parse(json200Error)
const html = `
<label for="load1">field load 1</label><input id="load1" data-monster-attributes="value path:data.load1">
<label for="load2">field load 2</label><input id="load2" data-monster-attributes="value path:data.load2">
<label for="load3">field load 3</label><input id="load3" data-monster-attributes="value path:data.load3">
`;
const requestDelay = 100
export default [
{
url: '/issue-210.json',
method: 'get',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.statusCode = 200
setTimeout(function() {
res.end(json)
}, requestDelay);
},
},
{
url: '/issue-210',
method: 'post',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.statusCode = 400
setTimeout(function() {
res.end(json400Error)
}, requestDelay);
},
},
{
url: '/issue-210.html',
method: 'get',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'text/html')
res.statusCode = 200
setTimeout(function() {
res.end(html)
}, 4000);
},
}
];
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment