rewrote ajax request, added view option for existing addons

Author: Leeous

index.html

@@ -42,6 +42,7 @@ <h3>What would you like to do?</h3>
             <div class="top">
                 <button id="back_button_existing_addon" class="back_button" data-backwards="#addon_management_prompt" data-forwards="#update_existing_addon" data-resize="500, 175">◀ Back</button>
                 <h3>Your addons</h3>
+                <p id="refresh_addons"><a href="#">Refresh</a></p>
             </div>
             <div id="yourAddons"></div>
         </div>

index.js

@@ -30,7 +30,7 @@ function createWindow() {
           backgroundColor: "#262626",
           titleBarStyle: "hidden",
           frame: false,
-          icon: "src/img/icon.png",
+          icon: "src/img/icon.ico",
           webPreferences: {
               nodeIntegration: true
           }
@@ -96,8 +96,10 @@ function sendClientAddonInfo() {
         fixedArray[i] = fixedArray[i].replace('/r', '');
         ADDON_IDS.push([fixedArray[i].substr(0, 11).replace(/\s/g, '').toString()])
     }
+
+    console.log(ADDON_IDS)
     console.log('Sent to client!')
-    mainWindow.webContents.send('message', ADDON_IDS);
+    mainWindow.webContents.send('addonInfo', ADDON_IDS);
   });
 }
 

src/css/style.css

@@ -176,19 +176,49 @@ header {
     padding: 15px 10px;
 }
 
-#update_existing_addon .top h3, #create_new_addon .top h3 {
+#create_new_addon .top h3 {
     display: inline-block;
     margin: 0;
     font-weight: 300;
     transform: translateY(2px)
-}y
+}
 
 #update_existing_addon .top button, #create_new_addon .top button {
     display: inline-block;
     background-color: rgb(219, 68, 68);
     margin-right: 5px;
 }
 
+#update_existing_addon .top {
+    background-color: #0f0f0f;
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+}
+
+#update_existing_addon .top h3 {
+    /* display: inline-block; */
+    flex: 1;
+    margin: 0;
+    text-align: left;
+    font-weight: 300;
+}
+
+#update_existing_addon .top button {
+    /* display: inline-block; */
+    background-color: rgb(219, 68, 68);
+    margin-right: 5px;
+}
+
+#refresh_addons {
+    margin-left: auto;
+    padding-right: 15px;
+}
+
+#refresh_addons a {
+    color: white;
+}
+
 #yourAddons {
     overflow-y: scroll;
     height: 65%;
@@ -219,7 +249,6 @@ header {
     font-weight: 500;
     background-color: #161616;
     padding: 10px 0;
-    cursor: pointer;
     transition: ease 0.5s all;
 }
 
@@ -232,11 +261,14 @@ header {
     margin: 0
 }
 
-.addon_existing a {
-    color: white;
+.addon_link {
     display: none;
 }
 
+.addon_link a {
+    color: white;
+}
+
 .removeBackOption {
     width: 100px;
 }

src/js/script.js

@@ -9,6 +9,9 @@ const shell = require("electron").shell;
 let win = remote.getCurrentWindow();
 
 addon_data = [];
+api_data = {
+    "itemcount": "0",
+};
 okToProcessAddonList = false;
 donePopulatingAddonList = false;
 currentNewAddon = "";
@@ -38,37 +41,45 @@ $(document).on("click", "a[href^='http']", function(event) {
 
 $(document).ready(() => {
     // Try and recieve data from gmpublish about user's addons
-    ipcRenderer.on("message", (event, message) => {
-        var arrayOfAddonIds = message;
-        for (let index = 0; index < arrayOfAddonIds.length; index++) {
-            $.ajax({
-                type: 'POST',
-                url: 'https://api.steampowered.com/ISteamRemoteStorage/GetPublishedFileDetails/v1/',
-                data: {
-                    'itemcount': 1,
-                    'publishedfileids[0]': parseInt(arrayOfAddonIds[index])
-                },
-                success: function success(data) {
-                    var addon = data.response.publishedfiledetails["0"];
-                    if (addon.result == 1) {
-                        for (let i = 0; i < Object.keys(data).length; i++) {
-                            var addonObject = {
-                                "title": addon.title,
-                                "id": addon.publishedfileid
-                            }
-                            addon_data.push(addonObject);
+    ipcRenderer.on("addonInfo", (event, message) => {
+        getAddonInfoFromSteam(message)
+    });
+    
+    function getAddonInfoFromSteam(message) {
+        arrayOfAddonIds = message;
+        
+        api_data['itemcount'] = arrayOfAddonIds.length;
+        
+        
+        for (let i = 0; i < arrayOfAddonIds.length; i++) {
+            // const element = arrayOfAddonIds[i];
+            api_data["publishedfileids[" + i + "]"] = parseInt(arrayOfAddonIds[i]);        
+        }
+        $.ajax({
+            type: 'POST',
+            url: 'https://api.steampowered.com/ISteamRemoteStorage/GetPublishedFileDetails/v1/',
+            data: api_data,
+            dataType: 'json',
+        }).done((data) => {
+            var response = data.response;
+            if (response.result == 1) {
+                for (let i = 0; i < response.resultcount; i++) {
+                    if (response.publishedfiledetails[i].result == 1) {
+                        var addon = response.publishedfiledetails[i];
+                        var addonObject = {
+                            "title": addon.title,
+                            "id": addon.publishedfileid
                         }
+                        addon_data.push(addonObject);
                     }
-                },
-                error: function (err) {
-                    console.log(err)
-                },
-                dataType: 'json',
-            });
-        }
-        okToProcessAddonList = true;
-        $('#update_existing_addon_button').text('Update existing addon');
-    });
+                }
+            }
+            // console.log(data.response);
+            var addon = data.response.publishedfiledetails["0"];
+            okToProcessAddonList = true;
+            $('#update_existing_addon_button').text('Update existing addon');
+        });
+    }
 
     // If user has already defined their Garrysmod directory, just skip ahead to #addon_management
     if (settings.get('gmodDirectory') != null) {
@@ -214,33 +225,51 @@ $(document).ready(() => {
         })
     }
 
+    // Check if user needs to refresh their addons
+    // TODO: Hopefully I can remove this later on as it really isn't needed (except in the case of Steam being down)
+    $('#refresh_addons').click(() => {
+        console.log("Attempting to refresh addons...");
+        $('#yourAddons').children().remove();
+        getAddonInfoFromSteam();
+        populateAddonList();
+
+    });
+
     // Get array of addon infomation and append their names to #yourAddons
     function populateAddonList() {
         // This check is done to make sure this only gets executed once
         if (!donePopulatingAddonList) {
             for (let i = 0; i < addon_data.length; i++) {
-                $('#yourAddons').append("<div class='addon_existing'><p>" + addon_data[i].title + "</p><a href='steam://url/CommunityFilePage/" + addon_data[i].id + "'>View on Steam</a></div>");
+                $('#yourAddons').append("<div class='addon_existing'><p>" + addon_data[i].title + "</p><p class='addon_link'><a href='steam://url/CommunityFilePage/" + addon_data[i].id + "'>View</a> <a href='#'>Update</a></p></div>");
                 donePopulatingAddonList = true;
+                
             }
             // Make sure if nothing is returned to let the user know
             // TODO: Allow for multiple error codes such as 429 (too many requests)
             // if (apiError == 400) {
             //     $('#yourAddons').append("<p style='background-color: #0f0f0f; padding: 15px 10px; margin: 10px 15px; border-radius: 5px;'><b>Steam Web API Error!</b><br/><br/>Error 400. Maybe</p>");
             //     donePopulatingAddonList = true;
             // }
+
+            console.log(addon_data, arrayOfAddonIds)
+
+            $('.addon_existing').hover((event) => {
+                var target = $(event.target);
+                var targetLink = $(target).find('.addon_link');
+                $(targetLink).css('opacity', 0).slideDown('fast').animate({ opacity: 1 }, { queue: false, duration: 'slow' });
+            }, (event) => {
+                var target = $(event.target);
+                var targetLink = $(target).find('.addon_link');
+                $(targetLink).slideUp('fast').animate({ opacity: 0 }, { queue: false, duration: 'slow' });
+            });
+            
             if (0 == addon_data.length) {
                 $('#yourAddons').append("<p style='background-color: #0f0f0f; padding: 15px 10px; margin: 10px 15px; border-radius: 5px;'><b>No addons found!</b><br/><br/>Either you don't have Steam open or haven't uploaded anything.</p>");
                 donePopulatingAddonList = true;
             }
         }
     }
 
-    // $('.addon_existing').hover((event) => {
-    //     console.log('hello')
-    //     var target = $(event.target);
-    //     $(this).find('a:last').fadeIn();
-    // })
-
     $('.typeCheckbox').on('click', (event) => {
         var target = $(event.target);
         if (jsonCheckboxCount < 2 && target.is(":checked")) {
@@ -314,7 +343,10 @@ $(document).ready(() => {
     }
 
     $("#resetAddonCreation").click(() => {
+        resetAddonCreation();
+    });
 
+    function resetAddonCreation() {
         jsonCheckboxCount = 0;
 
         // Clear the old data we used to make addon.json
@@ -347,7 +379,7 @@ $(document).ready(() => {
 
         // Hide any div that may still be displayed
         $('#addonjsonPrompt, #jsonCreator, #gmaPrep, #createGMA').css('display', 'none');
-    });
+    }
 
     $("#createGMAFile").click(() => {
         $('#gmaPrep').fadeOut(() => {
@@ -370,15 +402,15 @@ $(document).ready(() => {
             win.setBounds({height: 200})
             $('#new_addon_link').attr('href', 'steam://url/CommunityFilePage/' + newAddonID)
             $('#new_addon').fadeIn()
-        })
-    })
+        });
+    });
 
     ipcRenderer.on('addonGMALocation', (event, addonGMA) => {
         addonGMADir = addonGMA;
         $('#createGMA').fadeOut(() => {
             win.setBounds({height: 200})
             $("#uploadToWorkshopPrompt").fadeIn();
-        })
-    })
+        });
+    });
 
 });