Add more to plugin

vscode-extension/media/add-package.js

@@ -0,0 +1,79 @@
+
+(function(){
+    const vscode = acquireVsCodeApi();
+   
+    const searchbtn = document.getElementById('searchbtn');
+    const query = document.getElementById('query');
+    const body = document.getElementById('packages');
+    const prevPage = document.getElementById('prevPage');
+    const currentPage = document.getElementById('currentPage');
+    const nextPage = document.getElementById('nextPage');
+    var page = 1;
+    
+    if(searchbtn)
+    searchbtn.onclick = ()=>{
+        page = 1;
+        currentPage.innerText = "1";
+        vscode.postMessage(
+            {command: 'query', query: query.value, page: 1},
+        );
+    };
+    if(prevPage)
+    prevPage.onclick = ()=>{
+        page--;
+        if(page < 1) page=1;
+        currentPage.innerText = page.toString();
+        vscode.postMessage(
+            {command: 'query', query: query.value, page: page},
+        );
+    };
+    if(nextPage)
+    nextPage.onclick = ()=>{
+        page++;
+        currentPage.innerText = page.toString();
+        vscode.postMessage(
+            {command: 'query', query: query.value, page: page},
+        );
+    };
+
+
+    window.addEventListener('message', event => {
+        const message = event.data; // The json data that the extension sent
+        switch (message.command) {
+            case "searchResponse":
+            {
+                body.innerHTML = "";
+                
+                for(var i = 0; i < message.packages.length; i++)
+                {
+                    const pkg = message.packages[i];
+                    const node = document.createElement('div');
+                    node.classList.add('package');
+                    const img = document.createElement('img');
+                    img.src = pkg.icon;
+                    img.width = 64;
+                    img.height = 64;
+                    node.appendChild(img);
+                    const title = document.createElement('span');
+                    title.innerText = pkg.name;
+                    node.appendChild(title);
+                    const btn = document.createElement('button');
+                    btn.innerText = pkg.installText;
+                    btn.onclick = ()=>{
+                        vscode.postMessage({
+                            command: "manage-pkg",
+                            name: pkg.name,
+                            version: pkg.version,
+                            query: message.query,
+                            page: message.page
+                        });
+                    };
+                    node.appendChild(btn);
+
+                    body.appendChild(node);
+                }
+            }
+                break;
+        }
+    });
+}());