js response

common.js

@@ -10,6 +10,7 @@ function check_deployments() {
 	apps.length = 0; // reset
 	apps.push(...JSON.parse(data)); // push each element
 	console.log(apps);
+	document.getElementById('installAppsBtn').click();
 
 	// manage
 	html_data = '';
@@ -19,6 +20,7 @@ function check_deployments() {
 		service_name = data[k].name;
 		orig_service_name = data[k].orig_name;
 		version = data[k].version;
+		subtitle = data[k].subtitle;
 		installed = data[k].installed;
 		if (installed=='true') {
 			html_data += '<div><a href="#" onclick="reinstall(\''+service_name+'\',\''+service_name+'\')">'+orig_service_name+'</a> - '+version+' - INSTALLED</div>';
@@ -109,12 +111,16 @@ function check_vpn() {
   jQuery.get(url, function(data) {
         console.log('check_vpn: '+data);
         if (data=="2") {
+		document.getElementById('vpnToggle').checked = true;
+  		document.querySelector(".switch-label").textContent = "ON";
           $('#vpn_off').hide();
           $('#vpn_on').show();
           $('#pro_off').hide();
           $('#pro_on').show();
         }
         else {
+		document.getElementById('vpnToggle').checked = false;
+  		document.querySelector(".switch-label").textContent = "OFF";
           $('#vpn_on').hide();
           $('#vpn_off').show();
           $('#pro_on').hide();
@@ -238,11 +244,13 @@ function check_uninstall(additional) {
         console.log('check_uninstall '+additional+': '+data);
       if (data!="") {
               jQuery("#"+additional).html(data);
+	      jQuery("#popupText").html(data); // manage2
       }
       if (data!="OK") {
               setTimeout(check_uninstall, 1000, additional);
       }
       else {
+	  jQuery("#popupText").html('Uninstall has finished'); // manage2
 	  jQuery("#"+additional).html('Uninstall has finished');
 	  get_deployments();
       }
@@ -256,15 +264,18 @@ function uninstall(additional) {
   });
 	data = '<fieldset><form action="#" method="post"><div class="row">YOU ARE GOING TO UNINSTALL '+additional.toUpperCase()+'.<br>ARE YOU SURE? IF YES, PLEASE CLICK ON THE BUTTON BELOW.<br><br></div><div class="row"><div class="mb-3"><button class="btn btn-lg btn-primary btn-block" type="button" onclick="confirm_uninstall(\''+additional+'\')">Uninstall</button></div></div></form></fieldset>';
 	jQuery("#"+additional).html(data);
+	jQuery("#popupText").html(data); // manage2
 }
 
 function confirm_uninstall(additional) {
   jQuery("#"+additional).html('Loading...');
+  jQuery("#popupText").html('Loading'); // manage2
   var url  = 'scan.php?op=uninstall&additional='+additional;
   jQuery.get(url, function(data) {
         console.log('uninstall '+additional+': '+data);
           if (data!="") {
                 jQuery("#"+additional).html(data);
+	        jQuery("#popupText").html(data); // manage2
                 setTimeout(check_uninstall, 1000, additional);
           }
   });
@@ -284,6 +295,7 @@ function update_deployment(additional) {
         console.log('edit '+additional+': '+data);
           if (data!="") {
                 jQuery("#"+additional).html(data);
+	        jQuery("#popupText").html(data); // manage2
                 setTimeout(check_deployment, 1000, additional);
           }
   });
@@ -315,7 +327,7 @@ function check_deployment(additional) {
   var url  = 'scan.php?op=check_deployment&additional='+additional;
   jQuery.get(url, function(data) {
       console.log('check_deployment '+additional);
-      //console.log('check_deployment data: '+data);
+      console.log('check_deployment data: '+data);
       if (data!="") {
 	      jQuery("#"+additional).html(data);
 	      jQuery("#popupText").html(data); // manage2
@@ -337,6 +349,7 @@ function deploy(additional) {
 	console.log('deploy '+additional+': '+data);
 	  if (data!="") {
 	        jQuery("#"+additional).html(data);
+	        jQuery("#popupText").html(data); // manage2
       		setTimeout(check_deployment, 1000, additional);
 	  }
   });
@@ -355,6 +368,7 @@ function redeploy(additional) {
 	console.log('redeploy '+additional+': '+data);
 	  if (data!="") {
 	        jQuery("#"+additional).html(data);
+		jQuery("#popupText").html(data); // manage2
       		setTimeout(check_deployment, 1000, additional);
 	  }
   });
@@ -428,8 +442,8 @@ function get_proxy_html() {
 	<script>
 	jQuery('#vpn_save_btn').click(function() {
 		console.log('vpn save');
-		jQuery('#vpn').html('Loading...');
 		save_vpn();
+		jQuery('#vpn').html('Loading...');
 	});
 	</script>
         `;

manage.html

@@ -59,7 +59,7 @@
     .menu {
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 5px;
       padding: 0 10px;
     }
 
@@ -248,11 +248,11 @@
 	.app img {
 	  border-radius: 15px;
 	  background-color: #101214;
-	  width: 110px;
+	  width: 70px;
-	  height: 110px;
+	  height: 70px;
 	  object-fit: contain;
 	  margin-bottom: 20px;
-	  padding: 10px;
+	  padding: 30px;
 	}
 
 	.app-label {
@@ -270,14 +270,21 @@
 	}
 
 	.more-btn {
-	  background-color: var(--highlight-color);
+	  background-color: inherit;
-	  border: none;
+	  color: #cccccc;
+	  border: 1px solid #cccccc;
 	  border-radius: 15px;
-	  padding: 20px;
+	  padding: 18px;
 	  font-size: 16px;
 	  font-weight: 400;
 	  cursor: pointer;
 	  width: 100%;
+	  font-weight: bold;
+	}
+
+	.more-btn:hover {
+	  color: var(--highlight-color);
+	  border: 1px solid var(--highlight-color);
 	}
 
 	.app-details {
@@ -336,19 +343,19 @@
 }
 
 .title {
-  font-size: 20px;
+  font-size: 26px;
   font-weight: bold;
   margin: 0;
 }
 
 .subtitle {
-  font-size: 14px;
+  font-size: 16px;
   margin: 4px 0;
   color: #999;
 }
 
 .description {
-  font-size: 12px;
+  font-size: 14px;
   margin: 20px 0 0;
   color: #999;
 }
@@ -656,11 +663,19 @@
     </div>
     <div class="yellow-row">
 	    <div class="yellow-box">
-	      <h4>Safebox Pro</h4>
+		<div id="pro_off">
-	      <p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
+		      <h4>Safebox Pro</h4>
-	      <a href="" class="details">Read details</a><br><br>
+		      <p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
-		<img src="/img/upgrade.png" alt="Upgrade now" width="100%"/>	
+		      <a href="" class="details">Read details</a><br><br>
-	      </p>
+			<img src="/img/upgrade.png" alt="Upgrade now" width="100%"/>	
+		      </p>
+		</div>
+		<div id="pro_on" class="hidden">
+		      <h4>Login</h4>
+		      <p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
+		      <a href="" class="details">Read details</a><br><br>
+		      </p>
+		</div>
 	    </div>
 	    <div class="yellow-corner">
 		<img src="img/yellow_corner.png" alt=""/>
@@ -669,6 +684,7 @@
   </div>
   <div class="main" >
     <div id="myAppsContainer">
+	    Loading applications...
     </div>
     <div id="popup" class="popup hidden">
 	<div class="popup-content">
@@ -724,11 +740,13 @@
 	    //if ((all==false && app.installed=='true') || (all==true && app.installed!='true')) {
 		    const appDiv = document.createElement('div');
 		    appDiv.className = 'app';
+		    if (app.installed=='true') more = 'Installed';
+		    else more = 'More';
 		    appDiv.innerHTML = `
 			<div class="app-img"><img src="${app.image}" alt="${app.name}" title="${app.orig_name} ${app.version}"></div>
-			<div class="app-label">${app.name} ${app.version}</div>
+			<div class="app-label">${app.subtitle}</div>
 			<div class="app-name">${app.orig_name}</div>
-			<button class="more-btn">More</button>
+			<button class="more-btn">${more}</button>
 		    `;
 		    appDiv.addEventListener('click', () => {
 			popupText.textContent = `You clicked on ${app.name} ${app.version}!`;
@@ -745,27 +763,16 @@
 
     //TODO: Ilyen függvényeket kell csinálni és a listenerekhez adni az egyes részeket
     function renderText(title) {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
         //TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent
         myAppsContainer.innerHTML = `
-            <h1 style="text-align: center;">${title}</h1>
+	    <div class="main-header">
-
+	      <h1>${title}</h1>
-            <div class="input-group">
+	      <button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
-                <input type="text" placeholder="Írj be valamit..." id="textInput">
+	    </div>
-                <button id="submitButton">Küldés</button>
+	    <label>Under development...</label>
-
-                <select id="myComboBox" class="custom-select">
-                    <option value="">Válassz egy lehetőséget...</option>
-                    <option value="1">Első opció</option>
-                    <option value="2">Második opció</option>
-                    <option value="3">Harmadik opció</option>
-                </select>
-
-                <label class="checkbox-container">
-                    <input type="checkbox" id="myCheckbox">
-                    <span class="checkmark"></span>
-                    Elfogadom a feltételeket
-                </label>
-            </div>
         `;
 
         const submitButton = document.getElementById('submitButton');
@@ -785,6 +792,9 @@
     }
 
     function renderVPN() {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
         myAppsContainer.innerHTML = `
 	    <div class="main-header">
 	      <h1>VPN</h1>
@@ -833,6 +843,9 @@
     }
 
     function renderSettings() {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
 	myAppsContainer.innerHTML = `
     <div class="main-header">
       <h1>Settings</h1>
@@ -961,7 +974,7 @@
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
-<script src="common.js?t=10"></script>
+<script src="common.js?t=23"></script>
 </body>
 </html>
 

scan.php

@@ -146,12 +146,14 @@ switch ($_GET["op"]) {
                                                                 $orig_service_name = $service_name;
 								$service_name = strtolower($service_name);
 								$version = $content["version"];
+								$subtitle = $content["subtitle"];
+								if (empty($subtitle) || $subtitle == "null") $subtitle = "";
 								$icon = $content["icon"];
 								if (empty($icon) || $icon == "null") $icon = "img/default_logo.png"; // default icon image
 								if (array_key_exists($service_name,$data["INSTALLED_SERVICES"])) $installed = "true";
 								else $installed = "false";
 								if (!empty($deployments)) $deployments .= ", ";
-								$deployments .= '{"name": "'.$service_name.'", "orig_name": "'.$orig_service_name.'", "image": "'.$icon.'", "version": "'.$version.'", "installed": "'.$installed.'"}';
+								$deployments .= '{"name": "'.$service_name.'", "orig_name": "'.$orig_service_name.'", "image": "'.$icon.'", "version": "'.$version.'", "subtitle": "'.$subtitle.'", "installed": "'.$installed.'"}';
 							}
 							if (!empty($deployments)) $deployments = "[{$deployments}]";
 						}
@@ -190,7 +192,7 @@ switch ($_GET["op"]) {
 							    </div>
 							    <div class="text-content">
 							      <h1 class="title">'.$template->name.'</h1>
-							      <h2 class="subtitle">'.$template->title.'</h2>
+							      <h2 class="subtitle">'.$template->subtitle.'</h2>
 							      <p class="description">'.$template->description.'</p>
 							    </div>
 							  </div>