Added delete parameter button

Gourav Dwivedi · Gourav Dwivedi · commit d88259702097 · 2019-09-03T22:29:58.000+05:30
diff --git a/package.json b/package.json
@@ -30,9 +30,11 @@
     "@babel/preset-env": "^7.5.4",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.0.0",
+    "file-loader": "^4.2.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.7.0",
+    "url-loader": "^2.1.0",
     "webpack": "^4.35.3",
     "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2"
diff --git a/src/Index.html b/src/Index.html
@@ -8,6 +8,7 @@
     <link rel="icon" href="data:,">
 </head>
 <body>
+    <!-- <img src="./images/delete.png"/> -->
     
     <div class="container">
         <h1>Signal R JavaScript Client</h1>
diff --git a/src/images/delete.png b/src/images/delete.png
diff --git a/src/js/components/srform.js b/src/js/components/srform.js
@@ -1,10 +1,12 @@
 import * as signalR from "@aspnet/signalr";
+// import * from './../../images/';
+import deleteImg from '../../images/delete.png';
 
 const ContentType = { 
     TEXT : "Text",
     NUMBER : "Number",
     JSON : "JSON"
-} 
+}
 
 
 var connection = null;
@@ -97,11 +99,12 @@ export function AddArguments() {
 
                     divElement.appendChild(GetTextBoxElement());
                     divElement.appendChild(GetSelectElement());
+                    divElement.appendChild(GetImageElement());
+                    divElement.append(document.createElement('br'))
+                    divElement.appendChild(hr);
+                    parentDiv[i].appendChild(divElement);                  
 
-                    parentDiv[i].appendChild(divElement);
-                    parentDiv[i].appendChild(hr);
-
-                    parentDiv[i].append(document.createElement('br'))
+                    
                 }
             },
             false);
@@ -152,6 +155,22 @@ export function GetTextBoxElement() {
     return div;
 }
 
+export function GetImageElement() {
+    var div = document.createElement('div');
+    div.setAttribute('class', 'form-group col-sm-5');
+
+    var imgElement = document.createElement('img');
+    imgElement.src = deleteImg;
+    // inputTxtElement.src = require('../../images/delete.png');
+    imgElement.addEventListener('click', function() {
+        console.log('Delete Button');
+        debugger;
+        this.parentElement.parentElement.remove();
+    });
+    div.appendChild(imgElement);
+    return div;
+}
+
 export function ReadArguments() {
     var requestArgs = new Array();
     var argsContainers = document.querySelectorAll('.args-container');
@@ -300,7 +319,7 @@ export function Disconnect() {
 export function SendPayload() {
 
     var methodName = document.getElementById("inputServerMethod").value;
-    var c = new Array();
+    var methodArguments = new Array();
 
 
     var argsTextAreaClass = document.getElementsByClassName('req-arg');
@@ -317,10 +336,9 @@ export function SendPayload() {
     //     }
     // }
 
-    c = ReadAndFormatArguments();
-
+    methodArguments = ReadAndFormatArguments();
 
-    connection.invoke(methodName, ...c)
+    connection.invoke(methodName, ...methodArguments)
         .catch(function (err) {
             return console.log(err);
         });
diff --git a/webpack.config.js b/webpack.config.js
@@ -29,6 +29,19 @@ module.exports = {
         {
             test: /\.css$/,
             use: [MiniCssExtractPlugin.loader, "css-loader"]
+        },
+        {
+          //Image Loader code need to refactor
+            test: /\.(png|jpg)$/,
+            exclude: /node_modules/,
+            use: [{
+              loader: 'url-loader',
+              options: {
+                limit: 10000,
+                name: './src/images/[name].[ext]',
+                publicPath: './img/'
+              }
+            }]            
         }
       ]
     },
