Updated new raid interface design

web/SystemAO/disk/raid/newRAID.html

@@ -40,9 +40,10 @@
                 background-color: rgb(232, 246, 253);
             }
 
-            .advance{
+            .advanceinfo{
                 background-color: rgb(248, 248, 248) !important;
-                border-radius: 0.6em !important;
+                border-radius: 0.4em !important;
+                padding: 0.6em;
             }
         </style>
     </head>
@@ -50,45 +51,56 @@
         <br>
         <div class="backicon"></div>
         <div class="ui container">
-            <p>1. Select RAID Type</p>
-            <div class="ui selection fluid dropdown">
-                <input type="hidden" name="raidtype" value="raid1">
-                <i class="dropdown icon"></i>
-                <div class="default text"></div>
-                <div class="menu">
-                  <div class="item" data-value="raid1">RAID 1 (Mirror, Recommend)</div>
-                  <div class="item" data-value="raid5">RAID 5 (Lose 1 Disk Max.)</div>
-                  <div class="item" data-value="raid6">RAID 6 (Lose 2 Disk Max.)</div>
-                  <div class="item" data-value="raid6">RAID 10</div>
-                  <div class="item" data-value="raid0">RAID 0 (Striped, Not Recommend)</div>
+            <form class="ui form">
+                <h4 class="ui dividing header">1. RAID Volume Settings</h4>
+                <div class="field">
+                <label>Volume Name</label>
+                <div class="two fields">
+                    <div class="field">
+                        <input type="text" id="volumeName" placeholder="Volume Name">
+                    </div>
+                    <div class="field">
+                        <div class="ui selection fluid dropdown">
+                            <input type="hidden" id="raidtype" value="raid1">
+                            <i class="dropdown icon"></i>
+                            <div class="default text"></div>
+                            <div class="menu">
+                            <div class="item" data-value="raid1">RAID 1 (Mirror, Recommend)</div>
+                            <div class="item" data-value="raid5">RAID 5 (Lose 1 Disk Max.)</div>
+                            <div class="item" data-value="raid6">RAID 6 (Lose 2 Disk Max.)</div>
+                            <div class="item" data-value="raid6">RAID 10</div>
+                            <div class="item" data-value="raid0">RAID 0 (Striped, Not Recommend)</div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <div class="ui divider"></div>
-        </div>
+                <h4 class="ui dividing header">2. RAID Disks Settings</h4>
+                <div class="ui container">
+                    <div style="float:right;">
+                        <button class="ui circular icon basic button" onclick="reloadList();"><i class="ui green refresh icon"></i></button>
+                    </div>
+                    <p>Tips: For any extra disks selected, it will be used as spare disks.</p>
+                    <br>
+                    <div id="noUsableDisk" class="ui yellow message" style="display:none;">
+                        <i class="yellow exclamation triangle icon"></i> There are no usable / spare disks on your system
+                    </div>
+                    <div id="usablediskSelectionList" style="margin-bottom: 1em;">
         
-        <div class="ui container">
-            <div style="float:right;">
-                <button class="ui circular icon basic button" onclick="reloadList();"><i class="ui green refresh icon"></i></button>
-            </div>
-            <p>2. Select RAID target disks <span id="targetRAIDVol"></span></p>
-            <br>
-            <div id="noUsableDisk" class="ui yellow message" style="display:none;">
-                <i class="yellow exclamation triangle icon"></i> There are no usable / spare disks on your system
-            </div>
-            <div id="usablediskSelectionList" style="margin-bottom: 1em;">
-
-            </div>
-            <div id="disableddiskSelectionList">
-
-            </div>
+                    </div>
+                    <div id="disableddiskSelectionList">
+        
+                    </div>
+                </div>
+                <div class="ui basic button" onclick="createRAID(event);">
+                    <i class="ui icons">
+                        <i class="grey server icon"></i>
+                        <i class="small green add icon" style="margin-top: 8px; margin-left: 8px;"></i>
+                    </i>
+                       Create RAID
+                </div>
+            </form>
         </div>
         <br>
-        <!-- Advance Settings -->   
-        <div class="ui container">
-            <div class="ui basic segment advance" >
-
-            </div>
-        </div>
       
         <!-- Disk Format Confirmation -->
         <div id="confirmDiskChoice" class="ui modal">
@@ -98,24 +110,32 @@
             </div>
             <div class="image content">
               <div class="ui small image">
-                <img src="./img/drive-format.svg">
+                <img src="./img/drive-add.svg">
               </div>
               <div class="description">
                 <h3 id="oprconfirm"></h3>
                 <p><b>Selecting these disk will erase all data current on the disk.</b> Confirm?</p>
+                
+                <div class="advanceinfo">
+                    <small >
+                        <b>Notes on "Continue Without Format"</b><br>
+                        If you decided to continue building the RAID volume without formating the disks (usually use for rebuilding an array migrate from another server), please make sure the mdadm version on both server are identical.
+                    </small>
+                </div>
+              
               </div>
             </div>
             <div class="actions">
-              <div class="ui black deny button">
-                Cancel
-              </div>
-              <div class="ui yellow button" onclick="confirmAddDisk();">
-                Continue without Format
-              </div>
               <div class="ui positive left labeled icon button" onclick="confirmAddDisk();">
                 <i class="check icon"></i>
                 Confirm
               </div>
+              <div class="ui orange button" onclick="confirmAddDiskWithoutFormat();">
+                Continue without Format
+              </div>
+              <div class="ui basic deny button">
+                Cancel
+              </div>
             </div>
           </div>
 
@@ -253,6 +273,17 @@
             initDiskList();
 
 
+            /* Create RAID functions */
+            function createRAID(event){
+                event.preventDefault();
+                $("#confirmDiskChoice").modal("show");
+            }
+
+            function confirmAddDisk(){
+                let volumeName = $("#volumeName").val().trim();
+                let raidLevel = $("#raidtype")[0].value;
+                
+            }
         </script>
     </body>
 </html>