Emergency Room Portal

JL_Emergency_Room/JL_Emergency_Room.txt

@@ -0,0 +1 @@
+{"color---templates/gridV/index.html---Button-Text":"#ffffff","text---templates/gridV/index.html-User-text":"Dr.%20Mendez","action---templates/gridV/index.html-2":"false","color---templates/gridV/index.html---Header-Text":"#ffffff","askdata---templates/gridV/index.html-3":"","webedit---templates/gridV/index.html-1":"false","text---templates/gridV/index.html-Download-Data-text":"Download%20Data%20","warnings---templates/gridV/index.html-3":"false","text---templates/gridV/index.html-Action-text":"Explain%20Me","webedit---templates/gridV/index.html-2":"false","color---templates/gridV/index.html---Header-Background":"#000000","parameter---templates/gridV/index.html-parameter":"[['Choose Dept'],['Select Department'],['Select Department'],[]]","color---templates/gridV/index.html---Footer-Text":"#ffffff","WARN":"agree","img---templates/gridV/index.html-img-logo":"https://static.vecteezy.com/system/resources/thumbnails/017/177/954/small/round-medical-cross-symbol-on-transparent-background-free-png.png","text---templates/gridV/index.html-Viz-1-text":"Overview","warnings---templates/gridV/index.html-1":"false","warnings---templates/gridV/index.html-2":"false","TOKEN_NAME":"","text---templates/gridV/index.html-WebEdit-text":"Web%20Edit%20","SITE_NAME":"","filter---templates/gridV/index.html-filter":"[[],[],[],[]]","view---templates/gridV/index.html-view":"https://public.tableau.com/views/JL_Emergency_Room_1/JL_Emergency_Room_1?:showVizHome=no&:embed=true,https://public.tableau.com/views/JL_Emergency_Room_2/JL_Emergency_Room_2?:showVizHome=no&:embed=true,https://public.tableau.com/views/JL_Emergency_Room_3/JL_Emergency_Room_3?:showVizHome=no&:embed=true,","askdata---templates/gridV/index.html-0":"","text---templates/gridV/index.html-Filter-text-MonthChoser.Param":"MonthChoser.Param","text---templates/gridV/index.html-Terms-text":"Terms%20%26%20Conditions%20","text---templates/gridV/index.html-Filter-text-Choose Dept":"Choose%20Dept","action---templates/gridV/index.html-1":"true","lastpageloaded-grid":"1","text---templates/gridV/index.html-Viz-4-text":"Viz%204%20","askdata---templates/gridV/index.html-1":"","text---templates/gridV/index.html-Reset-Viz-text":"Reset%20Viz%20","color---templates/gridV/index.html---Button-Background":"#000000","webedit---templates/gridV/index.html-0":"false","text---templates/gridV/index.html-AskData-text":"Ask%20data%20","color---templates/gridV/index.html---Footer-Background":"#454545","color---templates/gridV/index.html---Content-Background":"#ffffff","color---templates/gridV/index.html---Content-Text":"#ffffff","TOKEN_VALUE":"","action---templates/gridV/index.html-0":"false","SERVER_URL":"","action---templates/gridV/index.html-3":"false","text---templates/gridV/index.html-PrivacyPolicy-text":"Privacy%20Policy%20","webedit---templates/gridV/index.html-3":"false","text---templates/gridV/index.html-Filter-text-Select Department":"Select%20Department","color---templates/gridV/index.html---Button-Hover-Background":"#454545","askdata---templates/gridV/index.html-2":"","warnings---templates/gridV/index.html-0":"false","color---templates/gridV/index.html---Button-Hover-Text":"#ffffff","VERSION":"1.02","img---templates/gridV/index.html-img-avatar":"https://cdn4.iconfinder.com/data/icons/professions-1-2/151/3-512.png","text---templates/gridV/index.html-Viz-3-text":"Patients","text---templates/gridV/index.html-Viz-2-text":"Diversity"}

JL_Emergency_Room/css/config.css

@@ -0,0 +1,12 @@
+:root {
+--Button-Text:#ffffff;
+--Header-Text:#ffffff;
+--Header-Background:#000000;
+--Footer-Text:#ffffff;
+--Button-Background:#000000;
+--Footer-Background:#454545;
+--Content-Background:#ffffff;
+--Content-Text:#ffffff;
+--Button-Hover-Background:#454545;
+--Button-Hover-Text:#ffffff;
+}

JL_Emergency_Room/css/layout.css

@@ -0,0 +1,75 @@
+body{
+  margin: 0px;
+}
+.container {
+  display: grid;
+  font-family: Arial, Helvetica, sans-serif;
+  grid-template-areas:
+    "header header"
+    "nav content"
+    "footer footer";
+
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-gap: 0px;
+
+  height: 100vh;
+}
+
+header {
+  grid-area: header;
+  background-color: var(--Header-Background);
+  color: var(--Header-Text);
+}
+
+nav {
+  color: var(--Header-Text);
+  background-color: var(--Button-Background);
+  grid-area: nav;
+}
+
+main {
+  grid-area: content;
+  color: var(--Content-Text);
+  background-color: var(--Content-Background);
+}
+
+footer {
+  grid-area: footer;
+}
+.log{
+  max-height: 50px;
+  width: auto;
+  margin: 10px;
+}
+.logo {
+  width: 100%;
+  height: 100%;
+  color: var(--Header-Text);
+  display: flex;
+}
+.person {
+  margin: auto 20px auto auto;
+}
+@media (max-width: 768px) {
+  .container {
+    grid-template-areas:
+      "header"
+      "nav"
+      "content"
+      "side"
+      "footer";
+
+    grid-template-columns: 1fr;
+    grid-template-rows:
+      auto /* Header */
+      minmax(75px, auto) /* Nav */
+      1fr /* Content */
+      minmax(75px, auto) /* Sidebar */
+      auto; /* Footer */
+  }
+
+  nav, aside {
+    margin: 0;
+  }
+}

JL_Emergency_Room/css/page.css

@@ -0,0 +1,92 @@
+
+.header_right {
+  display: flex;
+  line-height: 25px;
+}
+.ButtonBar { 
+  overflow: hidden;
+  display: flex;
+  font-family: Arial, Helvetica, sans-serif;
+  min-height: 35px;
+  white-space: nowrap;
+  flex-direction: column;
+  margin-top: 30px;
+}
+
+.ButtonBar a{
+  display: flex;
+}
+.ButtonBar a i{
+  margin-right: 5px;
+}
+.ButtonBar a:not(.filter-entry) {
+
+  font-size: 16px;
+  color: var(--Button-Text);
+  text-align: center;
+  padding-right:20px;
+  padding-left:20px;
+  height: 25px;
+  text-decoration: none;
+  padding-top: 10px;
+}
+
+.ButtonBar a{
+  transition: all 0.5s;
+}
+.ButtonBar a:hover {
+  background-color: var(--Button-Hover-Background);
+  color: var(--Button-Hover-Text);
+}
+
+.divider{
+  margin-top: 8px;
+  color:var(--Button-Background);
+  text-align: center;
+  border-top: grey;
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+.show {
+  display: block!important;
+}
+
+
+.dropdown {
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  background-color: var(--Button-Background);
+  z-index: 1;
+  max-height: 80%;
+  overflow: auto;
+}
+
+/* Links inside the filter dropdown */
+.dropdown-content a {
+  color: var(--Button-Text);
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.usrpic {
+  height: 30px;
+  margin-right: 10px;
+}
+.footer{
+  background-color: var(--Footer-Background);
+  color: var(--Footer-Text);
+  display: flex;
+  line-height: 30px;
+  justify-content: space-between;
+  padding: 10px;
+}
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: var(--Button-Hover-Background)}
+

JL_Emergency_Room/index.html

@@ -0,0 +1,105 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="css/config.css" />
+    <link rel="stylesheet" href="css/layout.css" />
+    <link rel="stylesheet" href="css/page.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <script src="https://eu-west-1a.online.tableau.com/javascripts/api/tableau-2.7.0.min.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/advanced.js"></script>
+    <script src="tableau.js"></script>
+    <title>Tableau Example</title>
+  </head>
+  <body onload="loadVizInit()">
+    <div class="container">
+      <header>
+        <div class="logo">
+          <div>
+            <img
+              id="img-logo"
+              class="log img-editable"
+              src="https://tab-se.github.io/demobuilderportals/assets/TABlogo_wht.png"
+            />
+          </div>
+          <!-- <div id="Brand-Name-text" class="editable">My Brand</div> -->
+          <div class="person">
+            <div class="header_right">
+              <img
+                id="img-avatar"
+                class="usrpic img-editable"
+                src="https://tab-se.github.io/demobuilderportals/assets/user_avatar.png"
+              />
+              <span id="User-text" class="editable">User</span>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <nav>
+        <div class="ButtonBar">
+          <a class="viz" index="1" href="#" onclick="loadVizByIndex(0)"
+            ><i class="fa fa-chart-line"></i>
+            <div id="Viz-1-text" class="editable">Viz 1</div></a
+          >
+          <a class="viz" index="2" href="#" onclick="loadVizByIndex(1)"
+            ><i class="fa fa-chart-line"></i>
+            <div id="Viz-2-text" class="editable">Viz 2</div></a
+          >
+          <a class="viz" index="3" href="#" onclick="loadVizByIndex(2)"
+            ><i class="fa fa-chart-line"></i>
+            <div id="Viz-3-text" class="editable">Viz 3</div></a
+          >
+          <a class="viz" index="4" href="#" onclick="loadVizByIndex(3)"
+            ><i class="fa fa-chart-line"></i>
+            <div id="Viz-4-text" class="editable">Viz 4</div></a
+          >
+
+          <div class="divider"></div>
+          <div class="filter-container">
+            <a href="#" onclick="resetViz()">
+              <i class="fa fa-undo"></i>
+              <div id="Reset-Viz-text" class="editable">Reset Viz</div></a
+            >
+          </div>
+          <div class="divider"></div>
+
+          <a href="#" onclick="dataDownload()"
+            ><i class="fa fa-file-download"></i>
+            <div id="Download-Data-text" class="editable">Download Data</div></a
+          >
+          <a class="webedit" href="#" onclick="launchEdit()"
+            ><i class="fa fa-pencil-ruler"></i>
+            <div id="WebEdit-text" class="editable">Web Edit</div></a
+          >
+          <a class="askdata" href="#" onclick="launchAsk()"
+            ><i class="fa fa-comment-dots"></i>
+            <div id="AskData-text" class="editable">Ask data</div></a
+          >
+          <a class="action" href="#" onclick="launchAction()"
+            ><i class="fa fa-clipboard"></i>
+            <div id="Action-text" class="editable">Action</div></a
+          >
+        </div>
+      </nav>
+
+      <main>
+        <div class="Content">
+          <div id="tableauViz"></div>
+        </div>
+      </main>
+
+      <footer>
+        <div class="footer">
+          <div class="editable" id="Terms-text">Terms & Conditions</div>
+          <div id="PrivacyPolicy-text" class="editable">Privacy Policy</div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>