changed new_world and edit_world loading screens, fixed mod duplicates

brianmiller · May 22, 2023 · 8ee6cda · 8ee6cda
1 parent 2b871d4
commit 8ee6cda
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 35 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -2,7 +2,7 @@
 FROM ubuntu:focal
 
 # version of this build
-ENV phvalheimVersion=2.11
+ENV phvalheimVersion=2.12
 
 # me
 LABEL maintainer="Brian Miller <[email protected]>"

diff --git a/container/nginx/www/admin/edit_world.php b/container/nginx/www/admin/edit_world.php
@@ -93,10 +93,10 @@ function populateDisabledModList($pdo,$world,$getAllModsLatestVersion) {
 
                 $modVersion = $row['version'];
                 $modVersion = str_replace("\"","",$modVersion);
-                #$modExistCheck = modExistCheck($pdo,$world,$modUUID);
 		$modSelectedCheck = modSelectedCheck($pdo,$world,$modUUID);
+		$modIsDep = modIsDep($pdo,$world,$modUUID);
 
-                if (!$modSelectedCheck) {
+                if (!$modSelectedCheck && !$modIsDep) {
                         print "<tr>\n";
                         print "  <td style='width:1px;'><input name='thunderstore_mods[]' value='" . $modUUID . "' type='checkbox'></input></td>\n";
                         print "  <td style='padding-right:15px;'><a target='_blank' href='$modURL'>$modName</a></td>\n";
@@ -173,9 +173,8 @@ function populateDisabledModList($pdo,$world,$getAllModsLatestVersion) {
                                         ],
                                 }); // end data tables
 
-				// unblur after php populates table
-				document.body.classList.remove("blur");
-				document.body.classList.remove("overlay");
+				// remove loading spinner after php populates table
+                                document.getElementById("spinner").style.display = "none";
 
                         }); // end document load
 
@@ -184,15 +183,16 @@ function populateDisabledModList($pdo,$world,$getAllModsLatestVersion) {
                         function onFormSubmit() {
 				// clears search filter and changes list range to all items. This is needed for POST
 				$('#modtable').DataTable().page.len('-1').draw();
-				$('#modtable').DataTable().search( '' ).draw();				
+				$('#modtable').DataTable().search( '' ).draw();
                         }
 
 
 			// execute this when the submit button is clicked
 			function onSubmitClick() {
-				document.body.classList.add("blur");
+				// disable scroll bar
 				document.body.classList.add("noscroll");
-				document.getElementById("overlay").style.display = "block";
+				// display loading spinner
+				document.getElementById("spinner").style.display = "block";
 			}
 
 			// only allow the form to be submitted once per page load
@@ -212,9 +212,9 @@ function onSubmitClick() {
 
 	</head>
 
+        <div id="spinner" class="loading style-2 overlay" style="display:none;"><div class="loading-wheel"></div></div>
 	<body>
-	       <div>
-	        <div class="overlay" id="overlay" name="overlay" style="display:none;"></div>
+	        <!--<div class="overlay" id="overlay" name="overlay" style="display:none;"></div>-->
 		<form id="edit_world" name="edit_world" method="post" action="edit_world.php" onSubmit="onFormSubmit()">
 		      <div style="padding-top:10px;" class="">
                         <table class="outline" style="width:auto;margin-left:auto;margin-right:auto;vertical-align:middle;border-collapse:collapse;" border=0>
@@ -258,8 +258,10 @@ function onSubmitClick() {
 					<th class="alt-color">Version</th>
 				</thead>
 				<tbody>
-					<?php echo '<script type="text/javascript">document.body.classList.add("blur");</script>'; ?>
-					<?php echo '<script type="text/javascript">document.body.classList.add("overlay");</script>'; ?>
+					<?php echo '<script type="text/javascript">document.getElementById("spinner").style.display = "block";</script>'; ?>
+					<?php echo '<script type="text/javascript">document.body.classList.add("noscroll");</script>'; ?>
+					<?php #echo '<script type="text/javascript">document.body.classList.add("blur");</script>'; ?>
+					<?php #echo '<script type="text/javascript">document.body.classList.add("overlay");</script>'; ?>
 					<?php populateEnabledModList($pdo,$world,$getAllModsLatestVersion); ?>
 					<?php populateDepModList($pdo,$world,$getAllModsLatestVersion); ?>
 					<?php populateDisabledModList($pdo,$world,$getAllModsLatestVersion); ?>

diff --git a/container/nginx/www/admin/new_world.php b/container/nginx/www/admin/new_world.php
@@ -106,9 +106,8 @@ function populateModList($pdo,$getAllModsLatestVersion) {
                                         ],
                                 }); // end data tables
 
-				// unblur after php populates table
-				document.body.classList.remove("blur");
-				document.body.classList.remove("overlay");
+                                // remove loading spinner after php populates table
+                                document.getElementById("spinner").style.display = "none";
 
                         }); // end document load
 
@@ -123,9 +122,10 @@ function onFormSubmit() {
 
                         // execute this when the submit button is clicked
                         function onSubmitClick() {
-                                document.body.classList.add("blur");
+				// disable scroll bar
                                 document.body.classList.add("noscroll");
-                                document.getElementById("overlay").style.display = "block";
+				// display loading spinner
+                                document.getElementById("spinner").style.display = "block";
                         }
 
                         // only allow the form to be submitted once per page load
@@ -145,9 +145,9 @@ function onSubmitClick() {
 
 	</head>
 
+	<div id="spinner" class="loading style-2 overlay" style="display:none;"><div class="loading-wheel"></div></div>
 	<body>
 	      <div>
-		<div class="overlay" id="overlay" name="overlay" style="display:none;"></div>
 		<form id="new_world" name="new_world" method="post" action="new_world.php" onSubmit="onFormSubmit();">
 
 		      <div style="padding-top:10px;" class="">
@@ -180,8 +180,8 @@ function onSubmitClick() {
 					<th class="alt-color">Version</th>
 				</thead>
 				<tbody>
-					<?php echo '<script type="text/javascript">document.body.classList.add("blur");</script>'; ?>
-					<?php echo '<script type="text/javascript">document.body.classList.add("overlay");</script>'; ?>
+                                        <?php echo '<script type="text/javascript">document.getElementById("spinner").style.display = "block";</script>'; ?>
+                                        <?php echo '<script type="text/javascript">document.body.classList.add("noscroll");</script>'; ?>
         	                        <?php populateModList($pdo,$getAllModsLatestVersion); ?>
 				</tbody>
 			</table>

diff --git a/container/nginx/www/css/phvalheimStyles.css b/container/nginx/www/css/phvalheimStyles.css
@@ -7,6 +7,7 @@
 	--outline-light: #34e2e2;
 	--button-font-color-idle: orchid;
 	--button-font-color-hover: palegreen;
+	--main-color: orchid;
 	--main-alt-color: palegreen;
 	--tab-background-color-unfocused: var(--main-background-color);
 	--tab-background-color-focused: #2C355E;
@@ -596,30 +597,22 @@ table#worlds.dataTable thead:hover {
 }
 
 .overlay {
-    position:fixed;
     top:0;
     bottom:0;
     left:0;
     right:0;
-    background-color: var(--main-background-color);;
-    opacity:0.50;
-    z-index:1001;
-}
-
-.overlay-message{
+    background-color: var(--main-background-color);
+    opacity:1.50;
     position: fixed;
-    top:30px;
-    left:30px;
-    width:400px;
-    height:250px;
-    background-color:#fff;
-    opacity:1;
-    z-index:1002;
 }
 
 .blur{
     -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
     filter: blur(5px);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index:-10;
 }
 
 .unblur{
@@ -632,3 +625,48 @@ table#worlds.dataTable thead:hover {
     height: 100%;
     overflow: hidden;
 }
+
+.loading {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0,0,0,0.9);
+    z-index: 10;
+}
+
+.loading-wheel {
+    width: 20px;
+    height: 20px;
+    margin-top: -40px;
+    margin-left: -40px;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    border-width: 30px;
+    border-radius: 50%;
+    -webkit-animation: spin 1s linear infinite;
+    z-index: 10;
+}
+
+.style-2 .loading-wheel {
+    border-style: double;
+    border-color: var(--main-color) transparent;
+    background-color: none;
+    position: absolute;
+    z-index: 10;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0);
+    }
+    100% {
+        -webkit-transform: rotate(-360deg);
+    }
+}