🌍[Spring] Mining difficulty full-stack

src/backend/blockchainIOT/src/main/java/uk/ac/brunel/blockchainIOT/fogBlockchain/blockService.java

@@ -75,6 +75,10 @@ public static boolean createBlock(String blockData){
         }
     }
 
+    public static int getMiningDifficulty(){
+        return miningDifficulty;
+    }
+
     public static void setMiningDifficulty(int difficulty){
         ledger.clear();
         miningDifficulty = difficulty;

src/backend/blockchainIOT/src/main/java/uk/ac/brunel/blockchainIOT/springBoot/BlockchainIotController.java

@@ -53,7 +53,13 @@ public void mineLastBlock() {
         blockService.mineBlock();
     }
 
-    //Add block using data param
+    //Mine the last block
+    @GetMapping(value = "/block/mine/difficulty")
+    public int getMinerDifficulty() {
+        return blockService.getMiningDifficulty();
+    }
+
+    //Change mining difficulty using data param
     @PostMapping(value = "/block/mine/difficulty")
     public void minerSetDifficulty(@RequestParam("difficulty") int difficulty) {
         blockService.setMiningDifficulty(difficulty);

src/backend/blockchainIOT/src/main/resources/static/block.html

@@ -65,7 +65,7 @@ <h1 class="mt-5">Block Explorer</h1>
             <p class="lead">The below diagram will show all the blocks currently stored on the blockchain.</p>
             <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">Create Block</a>
             <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#validationModal">Validate Block</a>
-            <a href="#" class="btn btn-danger">Clear Blockchain</a>
+            <a href="#" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#clearModal">Clear Blockchain</a>
         </div>
     </main>
 
@@ -147,6 +147,27 @@ <h5 class="modal-title">Validate blockchain integrity</h5>
       </div>
     </div>
 
+    <!-- Clear Blockchain Modal -->
+    <div class="modal fade" id="clearModal" tabindex="-1" role="dialog" aria-labelledby="clearModal" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Clear Blockchain Data</h5>
+            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+              Are you sure you wish to remove <b>all data stored on this ledger</b>? This is <b>unrecoverable and all data will be lost</b>!
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button id="clearBtn" type="button" class="btn btn-danger">Clear Data</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Preloader Modal -->
     <div class="modal fade" id="preLoaderModal" tabindex="-1" role="dialog" aria-labelledby="minerLoaderModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
       <div class="modal-dialog modal-lg modal-dialog-centered">

src/backend/blockchainIOT/src/main/resources/static/js/blockParams.js

@@ -0,0 +1,27 @@
+/* 
+ * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
+ * Click nbfs://nbhost/SystemFileSystem/Templates/Other/javascript.js to edit this template
+ */
+
+$(document).ready( function () {
+    //Set difficulty on page load
+    $.getJSON("api/fog/block/mine/difficulty", function(data) {
+        $('#difficultyRange').val(data);
+        $('#difficultyValue').html(data);
+    });
+
+    //Change difficulty on request
+    $('#difficultyRange').change(function(){        
+        //Perform mining request to endpoint, using input data
+        $.post( "api/fog/block/mine/difficulty", { difficulty: $('#difficultyRange').val() }, function( data ) {
+            if(data === true){
+                $('#difficultyRange').val(data);
+                $('#difficultyValue').html(data);
+            }
+        });
+
+    });
+});
+
+
+

src/backend/blockchainIOT/src/main/resources/static/js/blockUtils.js

@@ -81,4 +81,22 @@ $(document).ready( function () {
             }, 500);
         });
     });
+
+    //Blockchain validation onClick function
+    $('#clearBtn').click(function(){
+        //Hide Modal
+        $('#clearModal').modal('hide');
+        //Show progress bar modal anim
+        $('#preLoaderModal').modal('show' , {backdrop: 'static', keyboard: false}); 
+        $('#preLoaderModalTitle').html("Removing blockchain data");
+        //Perform mining request to endpoint
+        $.get( "api/fog/block/clear", function( data ) {
+            //Delay by 500ms as the get request is quite instant preventing closure of modal that just opened (!)
+            setTimeout(function () {
+                //Remove progress indicator
+                $('#preLoaderModal').modal('hide');
+                location.reload();
+            }, 500);
+        });
+    });
 });

src/backend/blockchainIOT/src/main/resources/static/settings.html

@@ -59,18 +59,41 @@
     <!-- Begin page content -->
     <main class="flex-shrink-0">
         <div class="container">
-            <h1 class="mt-5">Adopting the IoT to Blockchain!</h1>
-            <p class="lead">The aim of this project is to create a blockchain solution to solve the maintainability, security, and privacy issues with IOT devices.</p>
+            <h1 class="mt-5">Settings</h1>
+            <div class="alert alert-warning" role="alert">
+              <h4 class="alert-heading">Warning!</h4>
+              <p>Changing the difficulty level of the mining process, will increase the amount of time it takes for a block to get mined.</p>
+              <hr>
+              <p class="mb-0">In addition, the blockchain stored on the ledger will be <b>permanently removed</b> as this will be invalid after!</p>
+            </div>
+            <p class="lead">The following parameters can be customised</p>
+            <div>
+                <form>
+                    <div class="form-group col-lg">
+                        <label>Mining difficulty</label>
+                        <p>This is the number matching leading zero's to be matched when hashing in the mining process.</p>
+                        <input type="range" class="form-range" min="1" max="10" step="1" id="difficultyRange" onInput="$('#difficultyValue').html($(this).val())">
+                        <span id="difficultyValue">5<!-- Default value --></span>
+                    </div>
+                </form>
+            </div>
         </div>
     </main>
+
     <footer class="footer fixed-bottom mt-auto py-3 bg-light">
         <div class="container">
             <span class="text-muted">ChainIOT; Adopting the IoT to Blockchain
                 </br>Henri Koci - Brunel University London</span>
         </div>
     </footer>
 
+    <!-- JQuery 3.6.0 CDN Script -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     <!-- Option 1: Bootstrap Bundle with Popper -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
+    <!-- Load cards on document launch -->
+    <script src="js/blockParams.js"></script>
   </body>
 </html>