weircon-front/templates/dashboard.html

{% extends "base.html" %}
{% block title %}Weircon — forside{% endblock %}
{% block body %}
<h1>Hej, {{ user.name }}</h1>
<p class="lead">Tjenester du har adgang til.</p>
{% if saved %}<div class="flash">{{ saved }}</div>{% endif %}

<div id="dash">
  <div class="grid" style="margin-top:1.6rem" aria-hidden="true">
    {% for i in range(8) %}
    <div class="card skel"><div class="head"><span class="ico"></span><span class="sk" style="width:55%;height:1em"></span></div><span class="sk" style="width:80%;height:.8em;margin-top:.8rem"></span></div>
    {% endfor %}
  </div>
</div>

{% if is_admin %}
<section class="appgroup">
  <h2>Administration</h2>
  <div class="grid">
    <a class="card" href="/admin" style="position:relative">
      <div class="head"><span class="ico">⚙️</span><span class="name">Admin-panel</span></div>
      <div class="sub">Brugere, grupper, drift, ikoner m.m.</div>
      <div class="go">Åbn →</div>
    </a>
  </div>
</section>
{% endif %}

<style>
  .toolbar { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin:1.4rem 0 .2rem; }
  .toolbar .filter { margin:0; flex:1; min-width:12rem; }
  .viewtoggle { display:inline-flex; border:1px solid var(--border); border-radius:.7rem; overflow:hidden; }
  .viewtoggle button { background:transparent; color:var(--muted); border:0; padding:.5rem .9rem; cursor:pointer; font:inherit; font-size:.88rem; }
  .viewtoggle button.on { background:var(--surface2); color:var(--text); }
  .card { position:relative; }
  .card:hover { border-color:var(--accent); transform:translateY(-3px); background:color-mix(in srgb, var(--surface) 92%, transparent); }
  .card-link { position:absolute; inset:0; z-index:1; border-radius:inherit; }
  .fav { position:absolute; top:.55rem; right:.6rem; z-index:2; width:1.7rem; height:1.7rem; border-radius:.5rem;
    border:0; background:transparent; color:var(--border); cursor:pointer; font-size:1.05rem; line-height:1; padding:0; transition:color .15s, transform .15s; }
  .fav:hover { color:var(--muted); transform:scale(1.15); }
  .fav.on { color:#f5c518; }
  .mcdot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.4rem; }
  .mcdot.run { background:#3fb950; box-shadow:0 0 6px rgba(63,185,80,.5); }
  .mcdot.off { background:var(--muted); }
  .mcdot.warn { background:#f5c518; }
  .mcdot.err { background:#f85149; }
  .card.skel { opacity:.5; pointer-events:none; }
  .card.skel .ico { background:var(--surface2); }
  .sk { display:inline-block; background:var(--surface2); border-radius:5px; }
  [hidden] { display:none !important; }
</style>
<script>
(function(){
  function setView(v){
    var g=document.getElementById('view-grouped'), a=document.getElementById('view-alpha');
    if(!g||!a) return;
    g.hidden=(v==='alpha'); a.hidden=(v!=='alpha');
    document.querySelectorAll('.viewtoggle button').forEach(function(b){ b.classList.toggle('on', b.getAttribute('data-view')===v); });
  }
  function setFav(slug,on){
    document.querySelectorAll('.fav[data-slug="'+CSS.escape(slug)+'"]').forEach(function(b){
      b.classList.toggle('on',on); b.setAttribute('aria-pressed', on?'true':'false');
    });
    var favgrid=document.getElementById('favgrid'), favsec=document.getElementById('favsec');
    if(!favgrid) return;
    var has=favgrid.querySelector('.card[data-slug="'+CSS.escape(slug)+'"]');
    if(on && !has){
      var src=document.querySelector('#view-grouped .card[data-slug="'+CSS.escape(slug)+'"]') || document.querySelector('.card[data-slug="'+CSS.escape(slug)+'"]');
      if(src){ favgrid.appendChild(src.cloneNode(true)); }
    } else if(!on && has){ has.remove(); }
    if(favsec) favsec.style.display = favgrid.children.length ? '' : 'none';
  }
  // delegation: virker også for async-indlæst indhold
  document.addEventListener('click',function(e){
    var fav=e.target.closest && e.target.closest('.fav');
    if(fav){ e.preventDefault(); e.stopPropagation();
      var slug=fav.getAttribute('data-slug'), on=!fav.classList.contains('on');
      setFav(slug,on);
      fetch('/api/favorite',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({slug:slug,on:on})});
      return; }
    var vb=e.target.closest && e.target.closest('.viewtoggle button');
    if(vb){ var v=vb.getAttribute('data-view'); setView(v);
      fetch('/api/view',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({view:v})}); }
  });
  document.addEventListener('keydown',function(e){
    var inp=document.getElementById('appfilter');
    if(inp && e.key==='/' && document.activeElement!==inp && !/input|textarea/i.test(document.activeElement.tagName)){ e.preventDefault(); inp.focus(); }
  });
  function initDash(){
    var inp=document.getElementById('appfilter');
    if(!inp || inp.__wired) return; inp.__wired=true;
    inp.addEventListener('input',function(){
      var q=inp.value.trim().toLowerCase(), shown=0;
      document.querySelectorAll('.card[data-search]').forEach(function(c){
        var hit=!q || c.getAttribute('data-search').indexOf(q)>-1;
        c.classList.toggle('hidden',!hit); if(hit && c.offsetParent!==null) shown++;
      });
      document.querySelectorAll('.appgroup').forEach(function(s){
        if(s.id==='favsec') return;
        var any=s.querySelector('.card:not(.hidden)'); s.style.display=any?'':'none';
      });
      var nm=document.getElementById('nomatch'); if(nm) nm.style.display=shown?'none':'block';
    });
  }
  fetch('/dashboard-content',{headers:{'X-Requested-With':'fetch'}})
    .then(function(r){ if(!r.ok) throw 0; return r.text(); })
    .then(function(html){ document.getElementById('dash').innerHTML=html; initDash(); })
    .catch(function(){ document.getElementById('dash').innerHTML='<p class="muted" style="margin-top:1.6rem">Kunne ikke hente tjenester — prøv at genindlæse siden.</p>'; });
})();
</script>
{% endblock %}