<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- IIS Virtual Directory name -->
    <!--<base href="/JSViewer_MVC_Core/">-->

    <meta charset="utf-8" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <title>JS Viewer</title>
    <link href="jsViewer.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
  </head>

  <body onload="loadViewer()">
    <div style="width: 100%; overflow-x: hidden;">
      <div id="viewerContainer"></div>
    </div>
    <script type="text/javascript" src="jsViewer.min.js"></script>
    <script type="text/javascript">
      var viewer;
      var reportID = "test.rdlx";
      var query = {
        report: "test.rdlx",
        year: 2020,
        month: 7,
        siteId: 101,
      };
      if (location.search) {
        location.search
          .substring(1)
          .split("&")
          .forEach(function (part, idx) {
            if (!part) return;
            var items = part.split("=");
            var value = items.length > 1 ? items[1] : "";
            query[items[0]] = value;
          });
      }

      function loadViewer() {
        viewer = GrapeCity.ActiveReports.JSViewer.create({
          element: "#viewerContainer",
          reportID: query["report"] + ".rdlx",
          reportParameters: [
            { name: "ApiUrl", values: [location.origin + "/api"] },
            { name: "SiteId", values: [query["siteId"]] },
            { name: "Year", values: [query["year"]] },
            { name: "Month", values: [query["month"]] },
            { name: "DetailId", values: [query["detailId"]] },
            { name: "Date", values: [query["date"]] },
          ],
        });
      }

      function setActive(report) {
        let reportsList = document.getElementById("reportsList");
        let reports = reportsList.children;
        for (let i = 0; i < reports.length; i++) {
          reports[i].classList.remove("active");
        }
        report.classList.add("active");
      }
    </script>
  </body>
</html>