Add getGridCellsContent method and the cells do get populated, but there are too many values being passed and the content is not formatted properly

Author: Phrancis

src/components/Login.vue

@@ -4,7 +4,7 @@
     <!-- Server status -->
     <h4>Server Status</h4>
     <div class="server-status">
-        <ServerStatusGrid></ServerStatusGrid>
+        <ServerStatusGrid :serverOptions="serverOptions"></ServerStatusGrid>
         <!-- <table>
             <tr>
                 <th>Server</th>
@@ -30,7 +30,7 @@
                 </td>
                 <td>{{!server.gamesRunning ? '-' : `${server.gamesRunning} ${server.gamesRunning === 1 ? 'game' : 'games'}`}}</td>
                 <td>{{!server.ais ? '-' : `${server.ais} ${server.ais === 1 ? 'AI' : 'AIs'}`}}</td>
-                <td>{{! server.latency ? '-' : `${server.latency} ms`}}</td>
+                <td>{{!server.latency ? '-' : `${server.latency} ms`}}</td>
             </tr>
         </table> -->
         <input @click="refreshServers()" :disabled="refreshing" type="button" value="Refresh" class="btn btn-navbar" style="margin-top: 10px;"/>

src/components/css_grid/ServerStatusGrid.vue

@@ -8,26 +8,128 @@
             class="server-status-header"
             v-for="(headerName, index) in headerNames"
             :key="index">
-            <div>{{headerName}}</div>
+            {{headerName}}
+        </css-grid-item>
+
+        <css-grid-item
+            class="server-status-cell"
+            v-for="(content, index) in getGridCellsContent(serverOptions)"
+            :key="index">
+            {{content}}
         </css-grid-item>
 
     </css-grid>
 </template>
+
 <script>
+const headerNames = [
+    "Server",
+    "Online",
+    "Users",
+    "Mods",
+    "Games",
+    "AIs",
+    "Latency"
+];
+
 export default {
     name: "ServerStatusGrid",
+    props: ["serverOptions"],
     data() {
         return {
-            headerNames: [
-                "Server",
-                "Online",
-                "Users",
-                "Mods",
-                "Games",
-                "AIs",
-                "Latency"
-            ]
+            headerNames: headerNames
         }
     },
+    methods: {
+        getGridCellsContent: function(serverOptions) {
+            console.log(serverOptions);
+            const allServerValues = [];
+            const serverValueIndexes = {
+                name: 0,
+                isOnline: 1,
+                userCount: 2,
+                availableMods: 3,
+                gamesRunning: 4,
+                ais: 5,
+                latency: 6
+            };
+            for (let server in serverOptions) {
+                const thisServerValues = [
+                    server.name,
+                    server.isOnline,
+                    server.userCount,
+                    server.availableMods,
+                    server.gamesRunning,
+                    server.ais,
+                    server.latency
+                ];
+                for (let index = 0; index < thisServerValues.length; index++) {
+                    switch(index) {
+                        case serverValueIndexes.name:
+                            allServerValues.push(server[index]);
+                            break;
+                        case serverValueIndexes.isOnline:
+                            allServerValues.push(server[index] ? "true" : "false");
+                        case serverValueIndexes.userCount:
+                            let realUserCount = parseInt(server.userCount);
+                            realUserCount--;
+                            allServerValues.push(server[index]
+                                ? '-'
+                                : `${realUserCount} ${realUserCount === 1 ? 'user' : 'users'}`
+                            );
+                            break;
+                        case serverValueIndexes.availableMods:
+                            allServerValues.push(
+                                `<ul class="server-mod-list">` +
+                                    `<li>` +
+                                        `<router-link :to="/cards?server=${server.address}&mod=${serverValueIndexes.availableMods}">` +
+                                            `{{ key }}` +
+                                        `</router-link>` +
+                                    `</li>` +
+                                `</ul>`
+                            );
+                            break;
+                        case serverValueIndexes.gamesRunning:
+                            const gamesRunning = server.gamesRunning;
+                            allServerValues.push(!gamesRunning
+                                ? '-'
+                                : `${gamesRunning} ${gamesRunning === 1 ? 'game' : 'games'}`
+                            );
+                            break;
+                        case serverValueIndexes.ais:
+                            const serverAis = server.ais;
+                            allServerValues.push(
+                                !serverAis
+                                    ? '-'
+                                    : `${serverAis} ${serverAis === 1 ? 'AI' : 'AIs'}`
+                            );
+                            break;
+                        case serverValueIndexes.latency:
+                            allServerValues.push(
+                                !server.latency ? '-' : `${server.latency} ms`
+                            );
+                            break;
+                        default:
+                            allServerValues.push(null);
+                            break;
+                    }
+                }
+            }
+            console.log(allServerValues);
+            return allServerValues;
+        }
+    }
 }
 </script>
+
+<style>
+.server-status-header {
+    background-color: #eee;
+    color: #000;
+    padding: 5px;
+    border: 1px solid #000;
+    border-collapse: collapse;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+</style>