Show installed version and latest version on the download preview

Author: drojf

fileVersionManagement.py

@@ -223,6 +223,29 @@ def deleteLocalVersionFileIfExists(localVersionFolder):
 		if os.path.exists(localVersionFilePathToDelete):
 			os.remove(localVersionFilePathToDelete)
 
+	def getLocalVersionOrStatusString(self, fileID):
+		#type: (str) -> str
+		if self.localVersionInfo is None:
+			return "Mod Not Installed"
+
+		fileVersion = self.localVersionInfo.fileVersionsDict.get(fileID)
+
+		if fileVersion is None:
+			return "Not Installed".format(fileID)
+
+		return fileVersion.version
+
+	def getLatestVersionOrStatusString(self, fileID):
+		#type: (str) -> str
+		if self.remoteVersionInfo is None:
+			return "Remote ver data missing"
+
+		fileVersion = self.remoteVersionInfo.fileVersionsDict.get(fileID)
+
+		if fileVersion is None:
+			return "Remote id [{}] ver missing".format(fileID)
+
+		return fileVersion.version
 
 def installNewerThanDate(versionDataJsonPath, date):
 	# type: (str, datetime) -> Tuple[bool, str]

httpGUI.py

@@ -592,6 +592,8 @@ def getPreviewAsDict(self, downloadFolder, downloadManually):
 						"url": item.url,
 						"manualDownloadStatus": None,
 						"fileName": None,
+						"localVersion": self.fileVersionManager.getLocalVersionOrStatusString(item.modFileID),
+						"remoteVersion": self.fileVersionManager.getLatestVersionOrStatusString(item.modFileID),
 					}
 				)
 			else:
@@ -631,6 +633,8 @@ def getPreviewAsDict(self, downloadFolder, downloadManually):
 							"url": extractableItem.fileURL,
 							"manualDownloadStatus": manualDownloadStatus,
 							"fileName": extractableItem.filename,
+							"localVersion": self.fileVersionManager.getLocalVersionOrStatusString(item.modFileID),
+							"remoteVersion": self.fileVersionManager.getLatestVersionOrStatusString(item.modFileID),
 						}
 					)
 

httpGUI/installer.html

@@ -680,27 +680,33 @@ <h4 class="uppercase mt40">Please confirm your install settings:</h4>
 																<span>Rows will turn green when downloaded correctly.</span>
 															</div>
 															<div v-bind:class="{ 'greyed-out': startInstallInProgressFiltered }">
-																<table class="umineko-image-table-content">
+																<table class="download-preview-table">
 																	<thead>
 																		<tr>
 																			<th style="width: 100px">File</th>
 																			<th style="width: 80px">Size</th>
 																			<th style="width: 100%">Update Reason</th>
+																			<th style="width: 100px">Installed Version</th>
+																			<th style="width: 100px">Latest Version</th>
 																			<th v-if="downloadItemsPreview.downloadManually" style="width: 200%">Manual Download Status</th>
 																		</tr>
 																	</thead>
 																	<tbody>
 																		<tr v-for="fileInfo in downloadItemsPreview.downloadItems"
-																		v-bind:class="{ active: fileInfo.rowClass === 'active', inactive: fileInfo.rowClass === 'inactive', warning: fileInfo.rowClass === 'warning' }">
+																		v-bind:class="{ active: fileInfo.rowClass === 'active', inactive: fileInfo.rowClass === 'inactive', warningMinor: fileInfo.rowClass === 'warning' }">
 																			<td>{{ fileInfo.id }}</td>
 																			<td>{{ fileInfo.fileSize }}</td>
 																			<td>{{ fileInfo.updateReason }}</td>
-																			<td v-if="downloadItemsPreview.downloadManually"><span class="rendered-markdown" v-html="renderMarkdown(fileInfo.manualDownloadStatus)"></span>	</td>
+																			<td>{{ fileInfo.localVersion }}</td>
+																			<td>{{ fileInfo.remoteVersion }}</td>
+																			<td v-if="downloadItemsPreview.downloadManually" v-bind:class="{ warning: fileInfo.rowClass === 'warning' }"><span class="rendered-markdown" v-html="renderMarkdown(fileInfo.manualDownloadStatus)"></span>	</td>
 																		</tr>
 																		<tr>
 																			<td>Total Download Size</td>
 																			<td>{{ downloadItemsPreview.totalDownload }}</td>
 																			<td>{{ downloadItemsPreview.updateTypeDescription }}</td>
+																			<td></td>
+																			<td></td>
 																			<td v-if="downloadItemsPreview.downloadManually"></td>
 																		</tr>
 																	</tbody>

httpGUI/style.css

@@ -204,6 +204,61 @@ h1, h2, h3, h4, h5, h6 {
     border-color: black;
 }
 
+.download-preview-table {
+    width: 100%;
+    table-layout: fixed; /* Setting width: 100% and table-layout:fixed achieves equally sized columns */
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);
+    /* border-radius: 8px; */
+    overflow: hidden; /* Fix top of table not being rounded     */
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.download-preview-table th {
+    background-color: #47b475;
+    color: #fff;
+    font-size: 16px;
+    padding: 2px 10px 2px 10px;
+    font-weight: bold;
+    border-width: 1px;
+    border-style: solid;
+    border-color: black;
+}
+
+.download-preview-table td {
+    padding: 2px 10px 2px 10px;
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: black;
+}
+
+.download-preview-table tr.inactive {
+    background-color: lightgray;
+}
+
+.download-preview-table tr.active {
+    background-color: lightgreen;
+}
+
+.download-preview-table tr.warningMinor {
+    background-color: lightyellow;
+}
+
+.download-preview-table tr.warning {
+    background-color: yellow;
+    border-width: 4px;
+    border-style: solid;
+    border-color: black;
+}
+
+.download-preview-table td.warning {
+    background-color: yellow;
+    border-width: 4px;
+    border-style: solid;
+    border-color: black;
+}
+
 .warning-text {
     background-color: yellow;
     border-width: 4px;