102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
const subpanehead = (text, id)=> `<div style="text-align:lift">
|
|
<label id="title_${id}" style="font-size:24px;margin:10px;" class="text">${text}</label>
|
|
</div>
|
|
`
|
|
const textel = (text, imglnk, id)=> `<div class="img">
|
|
<img id="img_${id}" src="${imglnk}" style="width: 30px; height: 30px; margin: 5px;" class="rounded-circles" alt="Cinque Terre">
|
|
<label id="text_${id}" style="font: size 20px;margin:10px;" class="text">${text}</label>
|
|
</div>
|
|
`
|
|
|
|
const subpane = (title, elements, id)=>`
|
|
<div>
|
|
${subpanehead(title, id)}
|
|
${(()=>{let rs = ""; elements.forEach(({text, image}, index)=>{rs+=textel(text, image, id+""+index)}); return rs;})()}
|
|
</div>
|
|
`
|
|
const defaultPage = {
|
|
panes:[
|
|
{
|
|
title:"Titel1",
|
|
elemente:[
|
|
{text:"text1", image:"/img/vv.jpg"},
|
|
{text:"text2", image:"/img/vv.jpg"},
|
|
{text:"text3", image:"/img/vv.jpg"},
|
|
{text:"text4", image:"/img/vv.jpg"},
|
|
{text:"text5", image:"/img/vv.jpg"},
|
|
{text:"text6", image:"/img/vv.jpg"},
|
|
{text:"text7", image:"/img/vv.jpg"},
|
|
{text:"text8", image:"/img/vv.jpg"},
|
|
]
|
|
},
|
|
{
|
|
title:"Titel2",
|
|
elemente:[
|
|
{text:"text1", image:"/img/vv.jpg"},
|
|
{text:"text2", image:"/img/vv.jpg"},
|
|
{text:"text3", image:"/img/vv.jpg"},
|
|
{text:"text4", image:"/img/vv.jpg"},
|
|
{text:"text5", image:"/img/vv.jpg"},
|
|
{text:"text6", image:"/img/vv.jpg"},
|
|
{text:"text7", image:"/img/vv.jpg"},
|
|
{text:"text8", image:"/img/vv.jpg"},
|
|
]
|
|
},
|
|
{
|
|
title:"Titel3",
|
|
elemente:[
|
|
{text:"text1", image:"/img/vv.jpg"},
|
|
{text:"text2", image:"/img/vv.jpg"},
|
|
{text:"text3", image:"/img/vv.jpg"},
|
|
{text:"text4", image:"/img/vv.jpg"},
|
|
{text:"text5", image:"/img/vv.jpg"},
|
|
{text:"text6", image:"/img/vv.jpg"},
|
|
{text:"text7", image:"/img/vv.jpg"},
|
|
{text:"text8", image:"/img/vv.jpg"},
|
|
]
|
|
},
|
|
{
|
|
title:"Titel4",
|
|
elemente:[
|
|
{text:"text1", image:"/img/vv.jpg"},
|
|
{text:"text2", image:"/img/vv.jpg"},
|
|
{text:"text3", image:"/img/vv.jpg"},
|
|
{text:"text4", image:"/img/vv.jpg"},
|
|
{text:"text5", image:"/img/vv.jpg"},
|
|
{text:"text6", image:"/img/vv.jpg"},
|
|
{text:"text7", image:"/img/vv.jpg"},
|
|
{text:"text8", image:"/img/vv.jpg"},
|
|
]
|
|
}
|
|
]
|
|
}
|
|
const buildPage = (info={})=>{
|
|
let res = {panes:[]};
|
|
for (let i = 0; i < defaultPage.panes.length; i++){
|
|
const pane = {elemente: []};
|
|
if(info.panes&&info.panes[i]){
|
|
pane.title=info.panes[i].title||defaultPage.panes[i].title;
|
|
if(info.panes[i].elemente){
|
|
for(let k = 0; k < defaultPage.panes[i].elemente.length; k++){
|
|
element = {
|
|
text: info.panes[i].elemente[k].text||defaultPage.panes[i].elemente[k].text,
|
|
image: info.panes[i].elemente[k].image||defaultPage.panes[i].elemente[k].image,
|
|
};
|
|
pane.elemente.push(element);
|
|
}
|
|
}else{
|
|
pane.elemente = defaultPage.panes[i].elemente
|
|
}
|
|
}else{
|
|
pane.title= defaultPage.panes[i].title;
|
|
pane.elemente = defaultPage.panes[i].elemente;
|
|
}
|
|
res.panes.push(pane);
|
|
}
|
|
document.getElementById("tpane").innerHTML="";
|
|
res.panes.forEach((pane, index)=>{
|
|
document.getElementById("tpane").innerHTML+=subpane(pane.title, pane.elemente, index)
|
|
})
|
|
}
|
|
buildPage()
|