Merge pull request #18 from oozuyguntas/main

OzgeOzuyguntas_Manufacturing_Demo_Portal

Manufacturing_Embedded_Demo/Manufacturing_Embedded_Demo.txt

@@ -0,0 +1 @@
+{"color---templates/gridV/index.html---Button-Text":"#ffffff","text---templates/gridV/index.html-User-text":"Ozge%20Ozuyguntas","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":"Action%20","webedit---templates/gridV/index.html-2":"false","color---templates/gridV/index.html---Header-Background":"#9AABB4","parameter---templates/gridV/index.html-parameter":"[['Supplier name Parameter','Product Parameter (supplier)'],['Facility (group) Parameter'],['Product Parameter (supplier)','Supplier name Parameter'],[]]","color---templates/gridV/index.html---Footer-Text":"#ffffff","WARN":"agree","img---templates/gridV/index.html-img-logo":"https://cdn-icons-png.flaticon.com/512/3787/3787840.png","text---templates/gridV/index.html-Filter-text-Product Parameter (supplier)":"Product%20Name","text---templates/gridV/index.html-Viz-1-text":"Suppliers%20Dashboard","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/OO_Suppliers/Manufacturingdemo3-Suppliers?:showVizHome=no&:embed=true,https://public.tableau.com/views/OO_Production/Manufacturingdemo2-Production?:showVizHome=no&:embed=true,https://public.tableau.com/views/OO_Inventory/Manufacturingdemo1-Inventory?:showVizHome=no&:embed=true,","askdata---templates/gridV/index.html-0":"","text---templates/gridV/index.html-Terms-text":"Terms%20%26%20Conditions%20","action---templates/gridV/index.html-1":"false","lastpageloaded-grid":"2","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":"#C7ADC7","webedit---templates/gridV/index.html-0":"false","text---templates/gridV/index.html-AskData-text":"Ask%20data%20","color---templates/gridV/index.html---Footer-Background":"#9AABB4","color---templates/gridV/index.html---Content-Background":"#ffffff","color---templates/gridV/index.html---Content-Text":"#ffffff","TOKEN_VALUE":"","action---templates/gridV/index.html-0":"true","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-Facility (group) Parameter":"Facility","text---templates/gridV/index.html-Filter-text-Supplier name Parameter":"Supplier%20name","color---templates/gridV/index.html---Button-Hover-Background":"#9AABB4","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://media.licdn.com/dms/image/D4E03AQENBTh5zbKnKg/profile-displayphoto-shrink_800_800/0/1667410706004?e=1706140800&v=beta&t=LLRyvCm8mm0e1EVbC5Y573yVJSedFNRmAzHEna6Q4VM","text---templates/gridV/index.html-Viz-3-text":"Inventory%20Dashboard","text---templates/gridV/index.html-Viz-2-text":"Production%20Dashboard"}

Manufacturing_Embedded_Demo/css/config.css

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

Manufacturing_Embedded_Demo/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;
+  }
+}

Manufacturing_Embedded_Demo/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)}
+

Manufacturing_Embedded_Demo/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>