Add Dicom Demo

apps/dicom-connect/table.css

@@ -0,0 +1,260 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+footer {
+  /* position: sticky;
+  /* bottom: -8px; */
+  width: 100%;
+}
+.header {
+  margin-top: 60px;
+}
+
+.page-container {
+  height: 100vh;
+  /* flex-direction: column; */
+  /* justify-content: space-between; */
+}
+
+.link {
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  font-size: 0.99em;
+  font-weight: bold;
+  color: #5e6875;
+  text-decoration: none;
+  padding-right: 0.7rem;
+  padding-left: 0.7rem;
+  margin-top: 0.2rem;
+  font-family: "Open Sans", Helvetica, sans-serif;
+  /* line-height: 1.8; */
+}
+.bg-dark {
+  background-color: #343a40 !important;
+}
+.bg-info {
+  background-color: #17a2b8 !important;
+}
+#collection-list li.item {
+  cursor: pointer;
+}
+#collection-list li.item:hover {
+  background-color: #deeeff;
+}
+#entries {
+  cursor: pointer;
+}
+.page-item {
+  cursor: pointer;
+}
+
+/* #collection-list .item:hover {
+	background-color:#f8f9fa;
+} */
+
+#collection-list .item {
+  /* font-weight:bold; */
+  color: #007bff;
+  padding: 0.5rem;
+}
+#collection-list .item i {
+  padding: 0.25rem;
+}
+
+nav li {
+  transition: background 0.5s;
+  border-radius: 3px;
+}
+nav li:not(:first-child) {
+  margin-left: 0.3em !important;
+}
+nav li:not(.active):hover {
+  background: white;
+}
+nav li:not(.active):hover a {
+  color: black !important;
+}
+.active {
+  background: white;
+}
+.active a {
+  color: black !important;
+}
+
+nav li:not(.active):hover{
+	background: white;
+}
+
+.overall {
+  display: flex;
+}
+
+.reload {
+  display: none;
+  padding: 0 4px;
+}
+
+.btn2{
+	display: flex;
+	align-items: center;
+}
+@media screen and (min-width: 480px){
+  .reload {
+    display: block;
+  }
+}
+
+#deleteBtn,
+#downloadBtn {
+  margin-left: 0.6em;
+}
+#deleteBtn i {
+  color: white;
+}
+#open-delete {
+  display: inline-flex;
+}
+.custom-file-input,
+.sort-btn {
+  cursor: pointer;
+}
+
+#notification-box {
+  overflow-y: scroll;
+  max-height: 40em;
+}
+
+/* Tooltip container */
+.tooltipCustom {
+  position: relative;
+  display: inline-block;
+  /* border-bottom: 1px dotted black; If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltipCustom .tooltiptextCustom {
+  visibility: hidden;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text */
+  position: absolute;
+  z-index: 100;
+  width: 200px;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -100px; /* Use half of the width (120/2 = 60), to center the tooltip */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltipCustom:hover .tooltiptextCustom {
+  visibility: visible;
+  z-index: 1000;
+}
+
+.notification-box {
+  padding: 10px 0px;
+  color: black;
+}
+
+#tabs,
+#content {
+  width: 100%;
+}
+
+.bg-gray {
+  background-color: #eee;
+}
+@media (max-width: 640px) {
+  #dropNot {
+    top: 50px;
+    left: -16px;
+    width: 290px;
+  }
+  .nav {
+    display: block;
+  }
+  .nav .nav-item,
+  .nav .nav-item a {
+    padding-left: 0px;
+  }
+  .message {
+    font-size: 13px;
+  }
+}
+#dropNot {
+  top: 60px;
+  left: 0px;
+  right: unset;
+  width: 460px;
+  box-shadow: 0px 5px 7px -1px #c1c1c1;
+  padding-bottom: 0px;
+  padding: 0px;
+}
+.dropdown-menu:before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  left: 12px;
+  border: 10px solid #343a40;
+  border-color: transparent transparent #343a40 transparent;
+}
+
+.has-search .form-control {
+  padding-left: 2.375rem;
+}
+
+.has-search .form-control-feedback {
+  position: absolute;
+  z-index: 2;
+  display: block;
+  width: 2.375rem;
+  height: 2.375rem;
+  line-height: 2.375rem;
+  text-align: center;
+  pointer-events: none;
+  color: #aaa;
+}
+
+/* .nav-tabs {
+	display: flex;
+} */
+
+.collapse.in {
+  display: inline !important;
+}
+.p {
+  margin-bottom: 0;
+}
+
+.icon-center {
+  text-align: center!important
+}
+/* .main-container {
+  max-height: calc(100% - 199px);
+  overflow-x: hidden;
+  overflow-y: auto;
+} */
+
+.loader {
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

apps/dicom-connect/table.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="keywords" content="camicroscope, quip" />
+	<meta charset='utf-8'>
+	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
+	<meta name='viewport'
+		content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
+	<!-- common -->
+	<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
+	<!-- Check If we're logged in ok, otherwise, log in for us -->
+	<!-- Font Awesome -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+
+	<script src='../../../common/authChecker.js'></script>
+	<script>
+		// __auth_check(1)
+	</script>
+
+	<script src='../../core/Store.js'></script>
+	<script src='../../common/util.js'></script>
+	<script src='../../common/ajv.js'></script>
+	<script src='../../components/loading/loading.js'></script>
+	<script src="../loader/loader.js"></script>
+	<script src="../loader/chunked_upload.js"></script>
+	<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
+	<title>CaMicroscope Data Table</title>
+
+	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
+		></script>
+		<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+		rel="stylesheet"
+		integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
+		crossorigin="anonymous">
+	<link rel="stylesheet" href="../../common/stacktable.css">
+
+	<!-- popup css -->
+	<link rel="stylesheet" type="text/css" media="all" href="../../css/popup.css" />
+<script src='../../common/stacktable.js'></script>
+	<link rel="stylesheet" href="./table.css" />
+	<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">
+
+    <!-- datatables -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css"
+    />
+    <script
+        type="text/javascript"
+        charset="utf8"
+        src="https://cdn.datatables.net/2.0.3/js/dataTables.js"
+    ></script>
+</head>
+
+<body>
+	<div class="page-container">
+        <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
+            <div class="container-fluid">
+                <button class="navbar-toggler m-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent" >
+                    <ul class="navbar-nav mr-auto gap-1">
+                        <li class="nav-item link" style="font-family: sans-serif;">
+                            <a class="nav-link" href="landing/landing.html"> <i class="fas fa-home"></i> Home</a>
+                        </li>
+                        <li class="nav-item active link" style="font-family: sans-serif;">
+                            <a class="nav-link" href="table.html"> <i class="fas fa-list-ul"></i>  Slides</a>
+                        </li>
+                        <li class="nav-item link">
+                            <a class="nav-link" href="Info.html"> <i class="fas fa-info-circle"></i> Info</a>
+                        </li>
+                        <li class="nav-item link">
+                            <a class="nav-link" href="./dev-workbench/workbench.html"> <i class="fas fa-pencil-ruler"></i> Workbench</a>
+                        </li>
+                        <li class="nav-item link">
+                            <a class="nav-link" href="./port/export.html"> <i class="fas fa-solid fa-file-export"></i> Export</a>
+                        </li>
+                        <li class="nav-item link" style="font-family: sans-serif;">
+                            <a class="nav-link" href="./signup/signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
+                        </li>
+                        <li class="nav-item link" style="font-family: sans-serif;">
+                            <a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform"> <i class="fas fa-comment"></i> Feedback</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <div class="header text-center text-white bg-info p-4">
+            <h1 class="h1">caMicroscope</h1>
+            <p>Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
+        </div>
+
+        <div class="container-fluid p-4 main-container">
+            <div class="row mx-5">
+                <div class="col">
+                    <!-- breadcrumb for tracking -->
+                    <nav aria-label="breadcrumb"><ol id="breadcrumb" class="breadcrumb"></ol></nav>
+                    <!-- datatables -->
+                    <table id="datatable" class="display" width="100%"></table>
+                </div>
+            </div>        
+        </div>
+    </div>
+
+
+    <!-- <footer class="text-center text-white bg-dark p-3">
+        <p class="p">Copyright © 2021 caMicroscope</p>
+    </footer> -->
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
+    <script src="./table.js"></script>
+</body>
+
+</html>