Build the table

js/pgupgrade.js

@@ -2,6 +2,8 @@ function versionHandler () {
     'use strict';
     let obj = JSON.parse(this.responseText);
     if(obj.result === 1) {
+
+        // Construct version warning/display
         let pgVersion = obj.data.installed_version.major + '.' + obj.data.installed_version.minor;
         let elem = document.getElementById('psqlVersion');
         let html = pgVersion;
@@ -10,6 +12,31 @@ function versionHandler () {
             html += " -- You are using a version of PostgreSQL Server that is no longer supported! Immediate upgrade reccomended.";
         }
         elem.innerHTML = html;
+
+        // Now let's build the table
+        let rows = '';
+        for ( var version of Object.keys(obj.data.available_versions) ) {
+            rows +=
+`<tr id="pgVersionRow-${version}">
+    <td>
+        <input type="radio" name="selectedVersion" value="${version}"></input>
+        ${version}
+    </td>
+    <td>
+        Lorem Ipsum
+    </td>
+    <td>
+        Community
+    </td>
+    <td>
+        ${obj.data.available_versions[version].release}
+    </td>
+    <td>
+        ${obj.data.available_versions[version].EOL}
+    </td>
+</tr>`;
+        }
+        document.querySelector('#upgradeForm > table > tbody').innerHTML = rows;
     } else {
         console.log(obj.error);
     }

templates/ui/pgupgrade.tmpl

@@ -35,6 +35,7 @@ This interface at least attempts to take care of those issues for you.
 <h3>Current Version</h3>
 <div id="psqlVersion">Loading...</div>
 <h3>Select a Version</h3>
+<form id="upgradeForm" name="upgradeForm" action="step2.cgi" method="GET">
 <table class="table table-striped">
     <thead>
         <tr>
@@ -57,5 +58,7 @@ This interface at least attempts to take care of those issues for you.
         </tr>
     </tbody>
 </table>
+<input id="submit" name="submit" type="submit" value="Maximum GO"></input>
+</form>
 <script type="text/javascript" src="js/pgupgrade.js"></script>
 [% END %]