[Expansions] Expansion Management

boot/inject_http.go

@@ -11,6 +11,7 @@ import (
 	"github.com/Akkadius/spire/internal/eqemuchangelog"
 	"github.com/Akkadius/spire/internal/eqemuserver"
 	"github.com/Akkadius/spire/internal/eqemuserverconfig"
+	"github.com/Akkadius/spire/internal/expansions"
 	apphttp "github.com/Akkadius/spire/internal/http"
 	"github.com/Akkadius/spire/internal/http/controllers"
 	appmiddleware "github.com/Akkadius/spire/internal/http/middleware"
@@ -61,6 +62,7 @@ var httpSet = wire.NewSet(
 	websocket.NewController,
 	backup.NewController,
 	system.NewController,
+	expansions.NewController,
 	provideControllers,
 	NewRouter,
 )
@@ -195,6 +197,7 @@ func provideControllers(
 	backupController *backup.Controller,
 	websocketController *websocket.Controller,
 	systemController *system.Controller,
+	expansionsController *expansions.Controller,
 ) *appControllerGroups {
 	return &appControllerGroups{
 		authControllers: []routes.Controller{
@@ -218,6 +221,7 @@ func provideControllers(
 			websocketController,
 			systemController,
 			authedAnalyticsController,
+			expansionsController,
 		},
 		v1controllersNoAuth: []routes.Controller{
 			quest,

frontend/src/components/InfoErrorBanner.vue

@@ -56,6 +56,11 @@ export default {
       type: String,
       required: false
     },
+    dismissTime: {
+      type: Number,
+      required: false,
+      default: 5000
+    },
     slim: {
       type: Boolean,
       required: false
@@ -72,7 +77,7 @@ export default {
   },
   mounted() {
     if (this.notification && this.notification.length > 0) {
-      this.sendNotification(this.notification, 5000)
+      this.sendNotification(this.notification)
     }
     if (this.error && this.error.length > 0) {
       this.localError = this.error
@@ -116,10 +121,12 @@ export default {
         clearTimeout(this.notificationTimer);
       }
 
-      // dismiss in interval
-      this.notificationTimer = setTimeout(() => {
-        this.dismissNotification()
-      }, 5000)
+      if (this.dismissTime > 0) {
+        this.notificationTimer = setTimeout(() => {
+          this.dismissNotification()
+        }, this.dismissTime)
+      }
+
     },
   }
 }

frontend/src/components/selectors/ContentExpansionSelector.vue

@@ -1,25 +1,36 @@
 <template>
   <div>
-    <img
-      :alt="getExpansionName(expansionId)"
-      v-for="(expansion, expansionId) in EXPANSIONS_FULL"
-      v-if="!getExpansionIcon(expansionId).includes('base64')"
-      :title="getExpansionName(expansionId) + ' (' + expansionId + ')'"
-      :src="getExpansionIcon(expansionId)"
-      @click="selectExpansion(expansionId)"
-      :style="'width: 56px; opacity: .7; ' + (isExpansionSelected(expansionId) ? 'border: 2px solid #dadada; border-radius: 7px;' : 'border: 2px solid rgb(218 218 218 / 30%); border-radius: 7px;')"
-      class="mr-2 p-1 mt-1 hover-highlight-inner"
-    >
+    <div v-for="(expansion, expansionId) in EXPANSIONS_FULL" class="d-inline-block">
+      <img
+        :alt="getExpansionName(expansionId)"
+        v-if="!getExpansionIcon(expansionId).includes('base64')"
+        :title="getExpansionName(expansionId) + ' (' + expansionId + ')'"
+        :src="getExpansionIcon(expansionId)"
+        @click="selectExpansion(expansionId)"
+        :style="'width: 60px; ' + (isExpansionSelected(expansionId) ? 'border: 2px solid #dadada; border-radius: 7px;' : 'border: 2px solid rgb(218 218 218 / 30%); border-radius: 7px; opacity: .3')"
+        class="mr-2 p-1 mt-1 hover-highlight-inner"
+      >
+      <span
+        v-if="showNames"
+        :style="isExpansionSelected(expansionId) ? 'font-weight: bold; opacity: 1;' : 'font-weight: normal; opacity: .7;'"
+      >
+        {{ expansion.name }}
+      </span>
+    </div>
 
     <div
-      :style="'width: 56px; font-size: 12px; font-weight: bold; padding: 0px !important; opacity: .7; ' + (isExpansionSelected(-1) ? 'border: 2px solid #dadada; border-radius: 7px;' : 'border: 2px solid rgb(218 218 218 / 30%); border-radius: 7px;')"
-      class="mr-2 mt-2 hover-highlight-inner d-inline-block text-center"
+      :style="'width: 56px; font-size: 12px; font-weight: bold; padding: 0px !important; opacity: 1; ' + (isExpansionSelected(-1) ? 'border: 2px solid #dadada; border-radius: 7px;' : 'border: 2px solid rgb(218 218 218 / 30%); border-radius: 7px;')"
+      class="mr-2 mt-2 hover-highlight-inner text-center"
       @click="selectExpansion(-1)"
     >
       All
     </div>
 
-    ({{ selectedExpansion }}) {{ getExpansionName(selectedExpansion) }}
+    <div style="font-weight: bold; font-size: 14px;" class="mt-3">
+      Selected ({{ selectedExpansion }}) {{ getExpansionName(selectedExpansion) }}
+
+    </div>
+
 
   </div>
 </template>
@@ -37,8 +48,17 @@ export default {
       EXPANSIONS_FULL: EXPANSIONS_FULL,
     }
   },
+  watch: {
+    value: function (newVal) {
+      this.selectedExpansion = newVal
+    }
+  },
   props: {
-    value: [Number, Array]
+    value: [Number, Array],
+    showNames: {
+      type: Boolean,
+      default: false
+    }
   },
   mounted() {
     this.selectedExpansion = parseInt(this.value)

frontend/src/router.ts

@@ -251,6 +251,11 @@ const router = new Router({
           component: () => import('./views/Expansion.vue'),
           meta: {title: "Expansions"},
         },
+        {
+          path: ROUTE.EXPANSIONS_MANAGEMENT,
+          component: () => import('./views/expansions/ExpansionManagement.vue'),
+          meta: {title: "Server Expansion Management"},
+        },
         {
           path: ROUTE.BOT_SPELLS_EDIT,
           component: () => import('./views/bots/BotSpellsEditor.vue'),

frontend/src/routes.ts

@@ -25,6 +25,7 @@ export const ROUTE = {
   COFFEE: "/coffee",
   DATABASE_CONNECTIONS: "/connections",
   EMITTER_VIEWER: "/emitter-viewer",
+  EXPANSIONS_MANAGEMENT: "/expansions-management",
   ITEM_EDIT: "/item/%s",
   ITEM_ICON_VIEWER: "/item-icon-viewer",
   ITEM_VIEWER: "/item-viewer",