frontlog, müsste so klappen, mit pipe usw

frontlog.js

@@ -1,9 +1,29 @@
 let frontlogList = {};
-let frontlog_mxel = document.body.dataset['frontlog']??3;
+let frontlogMaxEl = document.body.dataset['frontlog']||3;
 let frontlog = document.createElement('frontlog');
 document.body.appendChild(frontlog);
 
-let frontlogAdd = function(title,icon,msg,col, time) {
+let frontlogVanish = function(elem) {
+  elem.remove();
+  //TODO irgendwann hübscher machen
+  let elems = document.getElementsByTagName('flogelem');
+  if(elems.length < frontlogMaxEl && frontlogList.length) {
+    let p = frontlogList.shift();
+    frontlogPipe(p.title,p.icon,p.msg,p.col,p.time);
+  }
+}
+
+let frontlogAdd = function(title,icon,msg,col,time) {
+  let elems = document.getElementsByTagName('flogelem');
+  if(elems.length < frontlogMaxEl) {
+    frontlogPipe(title,icon,msg,col,time);
+  }else{
+    let pElem = {"title":title,"icon":icon,"msg":msg,"col":col,"time":time};
+    frontlogList.appendChild(pElem);
+  }
+}
+
+let frontlogPipe = function(title,icon,msg,col, time) {
   let elem = document.createElement('flogelem');
   {
     let elemid = 'fl_';
@@ -15,6 +35,25 @@ let frontlogAdd = function(title,icon,msg,col, time) {
       }
     }
     elem.id = elemid;
+    let flicon = document.createElement('img');
+    flicon.src = icon;
+    elem.appendChild(flicon);
+
+    let fltitle = document.createElement('fltitle');
+    fltitle.innerText = title;
+    elem.appendChild(fltitle);
+
+    let flmsg = document.createElement('flmsg');
+    flmsg.innerText = msg;
+    elem.appendChild(flmsg);
   }
-  elem.appendChild
+
+  elem.style = 'border-color: '+col+';';
+  elem.addEventListener('click',function(ev){
+    frontlogVanish(ev.target);
+  });
+  setTimeout(function(){
+    frontlogVanish(elem);
+  },time*1000)
+  frontlog.appendChild(elem);
 }