omegga 0.1.85 → 1.0.2

package/src/webserver/frontend/components/ListInput.vue

@@ -1,105 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style';
-
-
-.br-list-input {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  user-select: none;
-  width: 100%;
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 50%;
-    cursor: default;
-  }
-
-  .br-list-item {
-    @include row;
-    margin-bottom: 8px;
-    width: 100%;
-
-    .button {
-      margin-left: 8px;
-    }
-  }
-
-  & > .button {
-    margin-bottom: 8px;
-  }
-}
-
-</style>
-
-<template>
-  <div :class="['br-list-input', {
-    disabled,
-  }]">
-    <div v-for="(v, i) in value || []" class="br-list-item" :key="i">
-      <br-input v-if="['string', 'password', 'number'].includes(type)"
-        :value="value[i]"
-        @input="val => updateItem(i, val)"
-        :placeholder="placeholder ? placeholder.toString() : ''"
-        :type="type"
-      />
-      <br-dropdown v-if="type === 'enum'"
-        :value="value[i]"
-        :options="options"
-        @input="val => updateItem(i, val)"
-      />
-      <br-role-dropdown v-if="type === 'role'"
-        :value="value[i]"
-        @input="val => updateItem(i, val)"
-      />
-      <br-button icon warn
-        data-tooltip="Remove this item from the list"
-        @click="removeItem(i)">
-        <MinusIcon/>
-      </br-button>
-    </div>
-    <br-button icon main
-      data-tooltip="Add an item to the list"
-      @click="addItem()">
-      <PlusIcon/>
-    </br-button>
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-
-import PlusIcon from 'vue-tabler-icons/icons/PlusIcon';
-import MinusIcon from 'vue-tabler-icons/icons/MinusIcon';
-
-export default Vue.component('br-list-input', {
-  components: {
-    PlusIcon, MinusIcon,
-  },
-  methods: {
-    updateItem(index, val) {
-      const clone = this.value.slice();
-      clone[index] = val;
-      this.$emit('input', clone);
-    },
-    addItem() {
-      const clone = this.value.slice();
-      clone.push({string: '', number: 0, password: '', role: '', enum: this.options && this.options[0]}[this.type]);
-      this.$emit('input', clone);
-    },
-    removeItem(index) {
-      const clone = this.value.slice();
-      clone.splice(index, 1);
-      this.$emit('input', clone);
-    }
-  },
-  props: {
-    placeholder: String,
-    disabled: Boolean,
-    type: String,
-    value: Array,
-    options: Array,
-  },
-});
-
-</script>

package/src/webserver/frontend/components/Loader.vue

@@ -1,98 +0,0 @@
-<style scoped>
-@import '../css/theme';
-
-.loader {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: none;
-  align-items: stretch;
-  flex-direction: column;
-}
-
-.loader.active {
-  display: flex;
-}
-
-.loader-container {
-  flex: 1;
-}
-
-.loader-container.blur {
-  backdrop-filter: blur(5px);
-}
-
-.loader.inline {
-  position: relative;
-  display: inline-block;
-  left: auto;
-  right: auto;
-  width: auto;
-  height: auto;
-}
-
-.loader-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  color: white;
-}
-
-.inline .loader-container {
-  display: block;
-  color: inherit;
-}
-
-.loader-icon {
-  color: white;
-  animation: rotating 2s infinite linear;
-}
-
-@keyframes rotating {
-  0% { transform: rotate(0); }
-  50% { transform: rotate(180deg); }
-  100% { transform: rotate(360deg); }
-}
-
-</style>
-
-<template>
-  <div :class="['loader', {
-    active,
-    inline,
-  }]" @click="$emit('click', $event)">
-    <div :class="['loader-container', { blur }]">
-      <LoaderIcon :size="sizes[size || 'normal']" :class="['loader-icon']" />
-      <div><slot /></div>
-    </div>
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-import LoaderIcon from 'vue-tabler-icons/icons/LoaderIcon';
-
-export default Vue.component('br-loader', {
-  components: { LoaderIcon },
-  props: {
-    active: Boolean,
-    size: String,
-    blur: Boolean,
-    inline: Boolean,
-  },
-  data() {
-    return {
-      sizes: {
-        small: '24',
-        normal: '30',
-        huge: '60',
-        massive: '120',
-      },
-    }
-  },
-});
-
-</script>

package/src/webserver/frontend/components/MainMenuButton.vue

@@ -1,83 +0,0 @@
-<style lang="scss">
-@import '../css/theme';
-
-$btn-height: 60px;
-$icon-height: $btn-height - 16px;
-
-.menu-button {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  text-transform: uppercase;
-  height: $btn-height;
-  font-size: 30px;
-  color: $br-button-fg;
-  background-color: $br-bg-secondary;
-  font-weight: bold;
-  padding: 0;
-  cursor: pointer;
-  user-select: none;
-  margin: 8px 0;
-  text-decoration: none;
-  width: 350px;
-
-  &:visited {
-    color: $br-button-fg;
-  }
-
-  .menu-button-content {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .ti, .icon {
-    display: flex;
-    width: $icon-height;
-    height: $icon-height;
-    margin-left: 8px;
-    align-items: center;
-    justify-content: center;
-    margin-right: 24px;
-  }
-
-  &:hover { background-color: $br-element-hover; }
-  &:active {background-color: $br-bg-footer; }
-  &.active {background-color: $br-button-normal; }
-  &.disabled {
-    opacity: 50%;
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &:not(.disabled):active .menu-button-content {
-    padding-top: 4px;
-  }
-}
-
-</style>
-
-<template>
-  <router-link :to="'/'+route" :class="['menu-button', {
-    disabled,
-    active: (name || route) === this.$route.name,
-  }]" @click="$emit('click', $event)">
-    <div class="menu-button-content">
-      <slot/>
-    </div>
-  </router-link>
-</template>
-<script>
-
-import Vue from 'vue';
-
-export default Vue.component('br-menu-button', {
-  props: {
-    disabled: Boolean,
-    route: String,
-    name: String,
-  },
-});
-
-</script>

package/src/webserver/frontend/components/Modal.vue

@@ -1,44 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style.scss';
-
-.modal {
-  @include absolute-center;
-  background-color: $br-bg-primary;
-  width: 500px;
-  opacity: 0;
-
-  &.visible {
-    opacity: 1;
-    animation: fadeIn 0.4s ease 1;
-  }
-
-  .modal-content {
-    position: relative;
-  }
-
-  .popout-inputs {
-    .dropdown,
-    .input {
-      margin: 8px;
-    }
-  }
-}
-</style>
-
-<template>
-  <div :class="['modal', { visible }]">
-    <div class="modal-content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue';
-
-export default Vue.component('br-modal', {
-  props: {
-    visible: Boolean,
-  },
-});
-</script>

package/src/webserver/frontend/components/NavBar.vue

@@ -1,24 +0,0 @@
-<style scoped lang="scss">
-@import '../css/theme';
-
-.navbar {
-  display: flex;
-  height: 32px;
-  font-size: $br-footer-font;
-  color: $br-fg-footer;
-  background-color: $br-bg-footer;
-  font-weight: bold;
-  padding: 10px;
-}
-</style>
-
-<template>
-  <div class="navbar">
-    <slot />
-  </div>
-</template>
-<script>
-import Vue from 'vue';
-
-export default Vue.component('br-navbar', {});
-</script>

package/src/webserver/frontend/components/PlayerDropdown.vue

@@ -1,210 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style';
-
-
-.br-player-list {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  user-select: none;
-  width: 100%;
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 50%;
-    cursor: default;
-  }
-
-  .br-player-item {
-    @include row;
-    margin-bottom: 8px;
-    width: 100%;
-
-    .button {
-      margin-left: 8px;
-    }
-  }
-
-  & > .button {
-    margin-bottom: 8px;
-  }
-
-  .player-search {
-    position: relative;
-
-    .options {
-      position: absolute;
-      bottom: 100%;
-      left: 0;
-      width: 100%;
-      max-height: 200px;
-      overflow-y: auto;
-      z-index: 10;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
-
-      .green {
-        background-color: $br-main-normal;
-
-        &:hover {
-          background: $br-main-hover;
-          outline: none;
-        }
-
-        &:active {
-          background: $br-main-pressed;
-          outline: none;
-        }
-      }
-    }
-  }
-
-  .option, .selected {
-    font-family: 'Glacial Indifference';
-    background: $br-element-normal;
-    color: $br-inverted-fg;
-    height: $br-element-height;
-    padding: 2px 12px;
-    padding-right: 0;
-    box-sizing: border-box;
-    font-weight: bold;
-    font-size: $br-element-font;
-    width: 100%;
-    text-decoration: none;
-
-    &:not(.search):hover {
-      background: $br-element-overlay;
-      outline: none;
-    }
-
-    &:not(.search):active {
-      background: $br-element-pressed;
-      outline: none;
-    }
-  }
-}
-
-</style>
-
-<template>
-  <div :class="['br-player-list', {
-    disabled,
-  }]">
-    <div v-for="(v, i) in value || []" class="br-player-item" :key="i">
-      <router-link :to="'/players/' + v.id" class="selected" data-tooltip="Click to navigate to player page">
-        {{v.name}}
-      </router-link>
-      <br-button icon warn
-        data-tooltip="Remove this player from the list"
-        @click="removeItem(i)">
-        <MinusIcon/>
-      </br-button>
-    </div>
-    <div class="player-search" ref="self">
-      <br-input
-        placeholder="Search Players..."
-        v-model="search"
-        @input="() => doSearch()"
-      />
-      <div class="options" v-if="open">
-        <div class="option search" style="position: relative;" v-if="loadingSearch">
-          <br-loader active size="small"></br-loader>
-        </div>
-        <div v-for="p in players"
-          class="option"
-          :key="p.id"
-          @click="open = false; addItem(p)"
-        >
-          {{p.name}}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-import debounce from 'lodash/debounce';
-
-import PlusIcon from 'vue-tabler-icons/icons/PlusIcon';
-import MinusIcon from 'vue-tabler-icons/icons/MinusIcon';
-
-export default Vue.component('br-player-list', {
-  components: {
-    PlusIcon, MinusIcon,
-  },
-  beforeDestroy() {
-    // remove click detection
-    document.removeEventListener('click', this.handleClick);
-  },
-  async created() {
-    // detect clicks outside of this element
-    document.addEventListener('click', this.handleClick);
-  },
-  methods: {
-    handleClick(e) {
-      // basically anytime there's a click, this component should be closed
-      if (open && !this.$refs.self.contains(e.target)) {
-        this.open = false;
-        this.players = [];
-      }
-    },
-    updateItem(index, val) {
-      const clone = this.value.slice();
-      clone[index] = val;
-      this.$emit('input', clone);
-    },
-    addItem(o) {
-      this.open = false;
-      this.players = [];
-      this.search = '';
-
-      const clone = this.value.slice();
-      clone.push({id: o.id, name: o.name});
-      this.$emit('input', clone);
-    },
-    removeItem(index) {
-      const clone = this.value.slice();
-      clone.splice(index, 1);
-      this.$emit('input', clone);
-    },
-    doSearch: debounce(function(){
-      if (this.search.length !== 0) {
-        this.page = 0;
-        this.open = true;
-        this.getPlayers();
-      } else {
-        this.open = false;
-        this.players = [];
-      }
-    }, 500),
-    async getPlayers() {
-      this.loadingSearch = true;
-      const { players } = await this.$$request('players.list', {
-        page: 0,
-        search: this.search,
-        sort: 'lastSeen',
-        direction: -1,
-        filter: '',
-      });
-      this.players = players;
-      this.loadingSearch = false;
-    },
-  },
-  props: {
-    placeholder: String,
-    disabled: Boolean,
-    type: String,
-    value: Array,
-  },
-  data() {
-    return {
-      search: '',
-      options: ['foo', 'bar', 'baz'],
-      players: [],
-      loadingSearch: false,
-      open: false,
-    };
-  },
-});
-
-</script>

package/src/webserver/frontend/components/PopoutContent.vue

@@ -1,32 +0,0 @@
-<style scoped lang="scss">
-@import '../css/theme';
-
-.popout-content {
-  background-color: $br-bg-primary;
-  color: $br-boring-button-fg;
-  font-weight: bold;
-  font-size: $br-element-font;
-  padding: 20px;
-}
-
-.popout-content > p {
-  margin: 20px 0;
-}
-.popout-content > p:first-child {
-  margin-top: 0;
-}
-.popout-content > p:last-child {
-  margin-bottom: 0;
-}
-</style>
-
-<template>
-  <div class="popout-content">
-    <slot />
-  </div>
-</template>
-<script>
-import Vue from 'vue';
-
-export default Vue.component('br-popout-content', {});
-</script>