Browse Source

Updated diskmg interface to semantic

Toby Chui 3 years ago
parent
commit
3f81f8b1f7
1 changed files with 38 additions and 49 deletions
  1. 38 49
      web/SystemAO/disk/diskmg.html

+ 38 - 49
web/SystemAO/disk/diskmg.html

@@ -1,10 +1,10 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        <link rel="stylesheet" href="../../../script/tocas/tocas.css">
-        <script type='text/javascript' src="../../../script/tocas/tocas.js"></script>
-        <script src="../../../script/jquery.min.js"></script>
-        <script src="../../../script/ao_module.js"></script>
+        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
+        <script src="../../script/jquery.min.js"></script>
+        <script type='text/javascript' src="../../semantic/semantic.min.js"></script>
+        <script src="../../script/ao_module.js"></script>
         <title>Diskmg</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <style>
@@ -70,8 +70,11 @@
             #rightClickMenu{
                 position:absolute;
             }
+            .selectable{
+                cursor: pointer;
+            }
             .selectable:hover{
-                background-color:#f0f0f0;
+                background-color:#f0f0f0 !important;
             }
             .focusedPart{
                 background-color: #e3f0ff;
@@ -114,8 +117,8 @@
         </style>
     </head>
     <body>
-        <div id="diskListTable">
-            <table class="ts celled striped attached table" style="padding-left:3px;padding-right:3px;">
+        <div id="diskListTable" >
+            <table class="ui celled striped attached unstackable table">
                 <thead>
                     <tr>
                         <th>
@@ -178,12 +181,7 @@
                 </div>
             </div>
         </div>
-    <div id="rightClickMenu" class="ts contextmenu">
-        <!-- 
-        <div id="openbtn" class="item disabled selectable" onClick="openInFileExplorer(this);">
-            <i class="folder open icon"></i> Open
-        </div>
-        -->
+    <div id="rightClickMenu" class="ui vertical menu" style="display: none;">
         <div id="formatDisk" class="item selectable" onClick="toggleFormatInterface(this);">
             <i class="disk outline icon"></i> Format Disk
         </div>
@@ -193,33 +191,35 @@
     </div>
     <!-- Sections for functional menus-->
     <div id="formatOptions" class="funcmenu">
-        <div class="ts header">
-            Disk Format
-            <div class="sub header" style="font-weight:120%;color:red;">Warning! The format process will wipe all data from the selected partition.</div>
-        </div>
-        <div class="ts inverted negative segment">
-            <p style="font-size:120%;">Danger Zone</p>
+        <h2 class="ui header">
+            <i class="red exclamation circle icon"></i>
+            <div class="content">
+                Format Disk
+                <div class="sub header" style="font-weight:120%;color:red;">Warning! The format process will wipe all data from the selected partition.</div>
+            </div>
+        </h2>
+        <div class="ui red message">
             <p>Format on any drive or partition will wipe all data within that drive or partition. Please make sure you have backup all necessary files and your drive / partition selection is correct.</p>
         </div>
-        <div class="ts header">
+        <div class="ui header">
             <i class="disk outline icon"></i>
             <div id="selectedDiskDisplay" class="content">
                 /dev/sda1 (120 GB)
             </div>
         </div>
-        <div class="ts form">
+        <div class="ui form">
             <div class="field">
                 <label>Target File System Format</label>
-                <div class="ts checkboxes">
-                    <div class="ts radio checkbox">
+                <div class="ui checkboxes">
+                    <div class="ui radio checkbox">
                         <input id="ext4" type="radio" name="format" checked>
                         <label for="ext4">EXT4</label>
                     </div>
-                    <div class="ts radio checkbox">
+                    <div class="ui radio checkbox">
                         <input id="ntfs" type="radio" name="format">
                         <label for="ntfs">NTFS</label>
                     </div>
-                    <div class="ts radio checkbox">
+                    <div class="ui radio checkbox">
                         <input id="vfat" type="radio" name="format">
                         <label for="vfat">VFAT</label>
                     </div>
@@ -227,36 +227,36 @@
             </div>
         </div>
         <div class="funcmenuBottom" align="right">
-            <button class="ts tiny negative button" onClick="formatThisDev();">Format</button>
-            <button class="ts tiny button" onClick="hideAllFuncMenu();">Close</button>
+            <button class="ui tiny negative button" onClick="formatThisDev();">Format</button>
+            <button class="ui tiny button" onClick="hideAllFuncMenu();">Close</button>
         </div>
     </div>
     <div id="mountOptions" class="funcmenu">
-        <div class="ts header">
+        <div class="ui header">
             Disk Mount
             <div class="sub header">Select a mount point for this device</div>
         </div>
-        <div id="mtptlist" class="ts segmented list" style="max-height:300px;overflow-y:auto;">
+        <div id="mtptlist" class="ui segmented list" style="max-height:300px;overflow-y:auto;">
            
             
    
             <div class="mountpt item selectable userdefine" onclick="selectThis(this);">
                 <p>User defined mount point</p>
-                <div class="ts fluid mini input">
+                <div class="ui fluid mini input">
                     <input id="userDefinedMountPoint" type="text" placeholder="/">
                 </div>
             </div>
         </div>
         
         <div class="funcmenuBottom" align="right">
-            <button class="ts tiny primary button" onClick="mountThisDev();">Mount</button>
-            <button class="ts tiny button" onClick="hideAllFuncMenu();">Close</button>
+            <button class="ui tiny primary button" onClick="mountThisDev();">Mount</button>
+            <button class="ui tiny button" onClick="hideAllFuncMenu();">Close</button>
         </div>
     </div>
     
     <!-- dimmers-->
-     <div id="loaderUI" class="ts active dimmer" style="display:none;">
-        <div class="ts text loader">Waiting for System Response<br>Do Not Close This Tab</div>
+     <div id="loaderUI" class="ui active dimmer" style="display:none;">
+        <div class="ui text loader">Waiting for System Response<br>Do Not Close This Tab</div>
     </div>
     <div class="functMenuDimmer" onClick="hideAllFuncMenu();">
         
@@ -269,16 +269,6 @@
         var fwmode = false;
         var formatPendingDevInfo;
         
-        //Init floatWindow events
-      	//It is a submodule inside System Setting, which shouldn't change the window title
-      	/*
-        if (ao_module_virtualDesktop){
-            ao_module_setWindowTitle("Disk Manager");
-            fwmode = true;
-        }else{
-            
-        }
-        */
       
         //Updates Nov 2020, added platform detection
         $.get(ao_root + "system/disk/diskmg/platform", function(data){
@@ -332,7 +322,7 @@
                 if (confirm("THIS OPERATION WILL WIPE ALL DATA ON /dev/" + targetDisk[0] + ". ARE YOU SURE?")){
                     $("#formatOptions").fadeOut('fast');
                     $(".functMenuDimmer").fadeOut('fast');
-
+                    console.log(ao_root + "system/disk/diskmg/format?dev=" + targetDisk[0] + "&format=" + targetFormat);
                     $.get(ao_root + "system/disk/diskmg/format?dev=" + targetDisk[0] + "&format=" + targetFormat,function(e){
                         if (e.error !== undefined){
                             alert(e.error );
@@ -445,7 +435,7 @@
             $(".partitionRepresentation").contextmenu(function(e){
                 if (mode == "windows"){
                     //Switch back to normal menu when under window mode
-                    return true;
+                    //return true;
                 }
                 var px = e.clientX;
                 var py = e.clientY;
@@ -716,14 +706,14 @@
             //Clear the old diskpart table
             $("#diskVisualization").html("");
             //Render the partition table
-            var maxWidth = window.innerWidth * 0.8 - 200;
+            var maxWidth = window.innerWidth * 0.96 - 200;
             var maxCapDisk = -1;
             var keys = [];
             for (key in disks){
                 keys.push(key);
                 var thisDiskSize = disks[key]["partitionsTotalSize"];
                 if (thisDiskSize > maxCapDisk){
-                    maxCapDisk = thisDiskSize;
+                    maxCapDisk = parseInt(thisDiskSize);
                 }
             }
             
@@ -734,7 +724,6 @@
                 var mountState = "Mounted";
                 var shortenType = diskInfo["Type"][0].split(" ").shift();
                 var thisMaxWidth = maxWidth - (1- (diskInfo["partitionsTotalSize"] / maxCapDisk)) * (window.innerWidth * displayScaleRatio);
-                
                 if (diskInfo["Mounted"].length == 1 && diskInfo["Mounted"][0] == false){
                     mountState = "Unmounted";
                 }else if(diskInfo["Mounted"].length > 1){