Serve application from CPM web api

Author: niekcandaele

.travis.yml

@@ -16,4 +16,5 @@ deploy:
   file: "dist/cpm-map-*.tgz"
   api_key: $GITHUB_TOKEN
   on:
-    branch: master
+    branch: master
+    tags: true

public/img/steamlogin.png

@@ -125,9 +125,7 @@ export default {
       }
     },
     getClaimType(type) {
-      return fetch(
-        `${window.requestProxy}/api/claims?ip=${this.connectionInfo.ip}&port=${this.cpmPort}&type=${type}`
-      )
+      return fetch(`/api/getmapclaims?type=${type}`)
         .then(function(response) {
           if (response) {
             return response.json();

src/components/ClaimsModal.vue

@@ -102,9 +102,7 @@ export default {
     async execute() {
       this.executing = true;
       for (const command of this.commands) {
-        const result = await fetch(
-          `${window.requestProxy}/api/command?ip=${this.connectionInfo.ip}&port=${this.connectionInfo.port}&command=${command}&adminUser=${this.connectionInfo.adminUser}&adminToken=${this.connectionInfo.adminToken}`
-        );
+        const result = await fetch(`/api/createadvclaim?command=${command}`);
         const historyObj = {
           success: result.ok,
           command: command,

src/components/CommandsModal.vue

@@ -77,9 +77,8 @@ export default {
       this.connectionInfo = JSON.parse(localStorage.connectionInfo);
     }
 
-    if (this.connectionInfo.ip && this.connectionInfo.port) {
-      this.createMap();
-    }
+    this.createMap();
+
     eventBus.$on("connection-info", connectionInfo => {
       this.connectionInfo = connectionInfo;
       if (this.map != null) {
@@ -199,7 +198,7 @@ export default {
     },
     GetSdtdTileLayer(mapinfo) {
       var tileLayer = L.tileLayer(
-        `http://${this.connectionInfo.ip}:${this.connectionInfo.port}/map/{z}/{x}/{y}.png?adminUser={adminUser}&adminToken={adminToken}`,
+        `${window.allocsMap.protocol}//${window.allocsMap.host}:${window.allocsMap.port}/map/{z}/{x}/{y}.png?adminUser={adminUser}&adminToken={adminToken}`,
         {
           maxZoom: mapinfo.maxzoom + 1,
           minZoom: Math.max(0, mapinfo.maxzoom - 5),
@@ -252,9 +251,7 @@ export default {
       }).setView([0, 0], Math.max(0, this.mapInfo.maxzoom - 1));
     },
     getClaims(type) {
-      return fetch(
-        `${window.requestProxy}/api/claims?ip=${this.connectionInfo.ip}&port=${this.cpmPort}&type=${type}`
-      )
+      return fetch(`/api/getmapclaims?type=${type}`)
         .then(function(response) {
           if (response) {
             return response.json();

src/components/SdtdMap.vue

@@ -7,14 +7,6 @@
     @ok="onSubmit"
   >
     <div class="my-4">
-      <b-form-group id="input-group-1" label="IP address:" label-for="input-1">
-        <b-form-input id="input-1" v-model="form.ip" required placeholder="123.456.7.8"></b-form-input>
-      </b-form-group>
-
-      <b-form-group id="input-group-1" label="Port:" label-for="input-1">
-        <b-form-input id="input-1" v-model="form.port" required placeholder="8082"></b-form-input>
-      </b-form-group>
-
       <b-form-group id="input-group-1" label="Admin user:" label-for="input-1">
         <b-form-input id="input-1" v-model="form.adminUser" placeholder="user"></b-form-input>
       </b-form-group>
@@ -44,8 +36,6 @@ export default {
   data() {
     return {
       form: {
-        ip: "",
-        port: "",
         adminUser: "",
         adminToken: ""
       },

src/components/ServerSettings.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="session">
+    <a v-if="!userStatus.loggedin" href="/session/login">
+      <img src="img/steamlogin.png" />
+    </a>
+    <div v-else>
+      {{this.userStatus.username}} - Permission level: {{this.userStatus.permissionlevel}}
+      <br />
+      <a href="/session/logout">
+        <button class="btn btn-danger" type="button">Logout</button>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SessionHandler",
+  data() {
+    return {
+      userStatus: {
+        loggedin: false,
+        username: null,
+        permissionlevel: 2000,
+        permissions: []
+      }
+    };
+  },
+  async mounted() {
+    this.userStatus = await this.getUserStatus();
+  },
+  methods: {
+    getUserStatus() {
+      return fetch("/userstatus")
+        .then(response => {
+          return response.json();
+        })
+        .then(data => {
+          return data;
+        });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.session {
+  bottom: 0%;
+  text-align: center;
+  position: absolute;
+}
+</style>

src/components/SessionHandler.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sidenav">
-    <h1>CPM Advanced Claim creator</h1>
+    <h1>CPM</h1>
     <a href="#" v-b-modal.server-settings>Server settings</a>
     <a href="#" v-b-modal.claims>Claims</a>
     <a href="#" v-b-modal.commands>
@@ -15,6 +15,7 @@
       Discord
       <font-awesome-icon icon="external-link-alt" size="xs" />
     </a>
+    <session-handler></session-handler>
     <server-settings></server-settings>
     <claims></claims>
     <commands-modal></commands-modal>
@@ -51,6 +52,7 @@ export default {
   background-color: #111; /* Black */
   overflow-x: hidden; /* Disable horizontal scroll */
   padding-top: 20px;
+  color: #818181;
 }
 
 .sidenav h1 {
@@ -63,7 +65,6 @@ export default {
   padding: 6px 8px 6px 16px;
   text-decoration: none;
   font-size: 25px;
-  color: #818181;
   display: block;
 }
 

src/components/SideBar.vue

@@ -22,6 +22,7 @@ import ServerSettings from './components/ServerSettings.vue';
 import ClaimsModal from './components/ClaimsModal.vue';
 import ClaimCreator from './components/ClaimCreator.vue';
 import CommandsModal from './components/CommandsModal.vue';
+import SessionHandler from './components/SessionHandler.vue';
 
 require('../node_modules/leaflet/dist/leaflet.css');
 
@@ -42,6 +43,12 @@ window.claimTypes = [
 // Since most maps are not accesible via https, we have to proxy requests through a https enabled API
 window.requestProxy = "https://cpm-api.herokuapp.com"
 
+window.allocsMap = {
+  host: location.hostname,
+  port: parseInt(location.port) - 1,
+  protocol: location.protocol,
+};
+
 library.add(faExternalLinkAlt);
 library.add(faTrashAlt);
 Vue.component('font-awesome-icon', FontAwesomeIcon)
@@ -51,6 +58,7 @@ Vue.component('server-settings', ServerSettings)
 Vue.component('claims', ClaimsModal);
 Vue.component('claim-creator', ClaimCreator);
 Vue.component('commands-modal', CommandsModal);
+Vue.component('session-handler', SessionHandler);
 
 Vue.use(BootstrapVue)