views/frame.html

<% 

let urlArray = [];
let nameArray = [];

for (let i = 0; i <= 8; i++) {
  let u = settings['frameUrl' + i];
  let n = settings['frameName' + i] || " ";
  if (u) {
    urlArray.push(u);
    nameArray.push(n);
  }
}

const sitesPerRow = urlArray.length > 3 ? Math.round(urlArray.length / 2) : urlArray.length;
const rows = urlArray.length > 3 ? 2 : 1;

%><html>
<head>
  <title>Nightscout multiframe view</title>
  <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <style media="screen" type="text/css">
  html, body, table, tr, td {
    margin:0 !important;
    padding:0 !important;
    border: 0;
}
table {
  width:100%;
  height:100%;
}
  </style>
</head>
<body>
  <table>
    <% let s = 0;
       for (let r = 1; r <= rows; r++) {
      %><tr>
        <% for (let sp = 0; sp < sitesPerRow; sp++) {
          let pointer = sp + s;
          %><td align="center" style="height:20px"><%= nameArray[pointer] %></td>
        <% } %>
        </tr>
        <tr>
          <% for (let sp = 0; sp < sitesPerRow; sp++) {
            let pointer = sp + s;
            %><td align="center" width="auto"><iframe src="<%= urlArray[pointer] %>" style="width:100%;height:100%;"></iframe></td>
          <% } %>
        </tr>
    <% s += sitesPerRow; } %>
  </table>
</body>

</html>