github.com/sdqri/sequined@v0.0.0-20240421190656-fc6bf956f4d8/internal/dashboard/templates/dashboard.html.tmpl (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3  <head>
     4    <meta charset="UTF-8">
     5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6    <title>Dashboard</title>
     7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     8    <script src="https://unpkg.com/htmx.org/dist/htmx.js"></script>
     9    <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
    10    <style>
    11      .sidebar {
    12        background-color: white;
    13        height: 100vh;
    14        transition: width 0.3s ease;
    15        overflow-x: hidden;
    16      }
    17      .sidebar-brand {
    18        padding: 20px;
    19        text-align: center;
    20      }
    21      .sidebar-brand img {
    22        border-radius: 100px;
    23        max-width: 80%;
    24      }
    25      .sidebar-item {
    26        padding: 10px;
    27        cursor: pointer;
    28      }
    29      .sidebar-item.active {
    30        background-color: #e9ecef;
    31      }
    32   </style>
    33  </head>
    34  <body>
    35    <div class="container-fluid">
    36      <div class="row">
    37        <!-- Sidebar -->
    38        <div class="col-md-2 sidebar" id="sidebar">
    39          <div class="sidebar-brand" id="brand">
    40            <img src="https://github.com/sdqri/sequined/raw/master/docs/sequined-main.jpg" alt="Sequined Logo">
    41            <h3 class="mt-2">Sequined Dashboard</h3>
    42          </div>
    43          <hr/>
    44          <div class="sidebar-options">
    45            <div class="sidebar-item active" onclick="showAnalytics()">
    46              <i class="fas fa-chart-line mr-2"></i> <span class="menu-text">Analytics</span>
    47            </div>
    48            <div class="sidebar-item" onclick="showGraph()">
    49              <i class="fas fa-chart-bar mr-2"></i> <span class="menu-text">Graph</span>
    50            </div>
    51          </div>
    52        </div>
    53        
    54        <!-- Content -->
    55        <div class="col-md-10 content" style="margin-top: 5rem;" id="content">
    56          <div id="analyticsContent" class="row justify-content-md-center">
    57            <div id="freshnesscard" class="card col-md-10 mx-2">
    58              <div class="card-body">
    59                <h5 class="card-title">Freshness</h5>
    60                <div id="freshnesscard" hx-get="/charts/freshness?bucket-duration=10m&duration=1h&ip=127.0.0.1" hx-trigger="load, every 10s" hx-swap="innerHTML" hx-target="#freshnesscard">
    61                </div>
    62              </div>
    63            </div>
    64            <div class="card col-md-10 mx-2">
    65              <div class="card-body">
    66                <h5 class="card-title">Age</h5>
    67                <div id="agecard" hx-get="/charts/age?bucket-duration=10m&duration=1h&ip=127.0.0.1" hx-trigger="load, every 10s" hx-swap="innerHTML" hx-target="#agecard">
    68                </div>
    69              </div>
    70            </div>
    71          </div>
    72          <div id="graphContent" class="row justify-content-md-center" style="display: none;">
    73            <div id="tree" class="card col-md-10 mx-2">
    74              <div class="card-body">
    75                <h5 class="card-title">Graph</h5>
    76                <div id="treechart" hx-get="/charts/tree" hx-trigger="load, every 10s" hx-swap="innerHTML" hx-target="#treechart">
    77              </div>
    78            </div>
    79          </div>
    80        </div>
    81      </div>
    82    </div>
    83  
    84    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    85    <script>
    86      function showAnalytics() {
    87        document.getElementById("analyticsContent").style.display = "flex";
    88        document.getElementById("graphContent").style.display = "none";
    89        document.querySelector(".sidebar-item.active").classList.remove("active");
    90        document.querySelectorAll(".sidebar-item")[0].classList.add("active");
    91      }
    92    
    93      function showGraph() {
    94        document.getElementById("analyticsContent").style.display = "none";
    95        document.getElementById("graphContent").style.display = "flex";
    96        document.querySelector(".sidebar-item.active").classList.remove("active");
    97        document.querySelectorAll(".sidebar-item")[1].classList.add("active");
    98      }
    99  
   100    </script>
   101  </body>
   102  </html>
   103