Untranslations

<template>
  <div>
 
  <h1>Untranslations</h1>
 
  <label class="item">
    <select @change="selectBranch($event)" class="center">
      <option
        v-for="branch in branches"
        v-bind:key="branch.site_id"
        :value="branch.site_id">
        {{ branch.title }}
        </option>
      </select>
  </label>
 
  <div class="flex">
    <label>
      <b>filter (RegExp): </b>
      <input
        type="text"
        class="center"
        ref="regtext"
        v-bind:class="{invalid: isRegExpInvalid}"
        @input="setFilter($event.target.value)"
        placeholder="^scp-\d{3,}$"
        />
    </label>
    <ul>
      <li>
        <input
          type="button"
          value="^scp-\d{3,}$"
          @click="sampleSelect($event)"
          class="inline"
          />
      </li>
      <li>
        <input
          type="button"
          value="-ex$"
          @click="sampleSelect($event)"
          class="inline"
          />
      </li>
      <li>
        <input
          type="button"
          value="^theme:"
          @click="sampleSelect($event)"
          class="inline"
          />
      </li>
    </ul>
  </div>
 
  <h4>Items: {{ items.length }}</h4>
 
  <table>
    <thead>
      <tr>
        <th>link</th>
        <th>unix_name</th>
        <th>title</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" v-bind:key="item.unix_name">
        <td class="center">
          <a target="_blank" class="fa fa-link" v-bind:href="`${base_url}/${item.unix_name}`"></a>
        </td>
        <td>
          {{ item.unix_name }}
        </td>
        <td>
          {{ item.title }}
        </td>
      </tr>
    </tbody>
  </table>
 
  </div>
</template>
 
<script>
module.exports = {
  // name: 'UntranslationView',
  data: function() {
    return {
      isRegExpInvalid: false,
      regex: null,
      base_url: 'https://scp-wiki.wikidot.com',
      en: [],
      cache: {},
      _items: [],
      items: [],
      branches: [
        {'site_id': 0      , 'title': ' - SELECT YOUR BRANCH - '         },
        {'site_id': 530812 , 'title': 'SCP-CN (Chinese)'                 },
        {'site_id': 464696 , 'title': 'SCP-FR (French)'                  },
        {'site_id': 1269857, 'title': 'SCP-DE (German)'                  },
        {'site_id': 530167 , 'title': 'SCP-IT (Italian)'                 },
        {'site_id': 578002 , 'title': 'SCP-JP (Japanese)'                },
        {'site_id': 486864 , 'title': 'SCP-KO (Korean)'                  },
        {'site_id': 647733 , 'title': 'SCP-PL (Polish)'                  },
        {'site_id': 783633 , 'title': 'SCP-PT/BR (Portuguese)'           },
        {'site_id': 169125 , 'title': 'SCP-RU (Russian)'                 },
        {'site_id': 560484 , 'title': 'SCP-ES (Spanish)'                 },
        {'site_id': 547203 , 'title': 'SCP-TH (Thai)'                    },
        {'site_id': 1398197, 'title': 'SCP-UA (Ukrainian)'               },
        {'site_id': 2060442, 'title': 'SCP-CS - (Czech)'                 },
        {'site_id': 3947998, 'title': 'SCP-ZH-TR - (Traditional Chinese)'},
        {'site_id': 1431627, 'title': 'SCP-TR - (Turkish)'               },
        {'site_id': 836589 , 'title': 'SCP-VN - (Vietnamese)'            }
      ]
    }
  },
  methods: {
    sampleSelect: function(e) {
      const v = e.target.value;
      this.$refs.regtext.value = v;
      this.setFilter(v);
    },
    sleep: function(ms) {
      return new Promise(r => setTimeout(r, ms));
    },
    setFilter: function(val) {
      this.isRegExpInvalid = false;
 
      if(!val) {
        this.regex = null;
        this.items = this._items.map(v => v);
        return;
      }
      try {
        this.regex = new RegExp(val);
        if(this._items?.length) {
          this.items = this._items
            .filter(v => v.unix_name.match(this.regex));
        }
      } catch(e) {
        this.isRegExpInvalid = true;
        this.regex = null;
      }
    },
    getData: async function(id) {
      try {
        const f = await fetch(`/quickmodule.php?module=PageLookupQModule&q=_&s=${id}`);
        return (await f.json()).pages;
      } catch(e) {
        await this.sleep(250);
        return await this.getData(id);
      }
    },
    selectBranch: async function(e) {
      this.items = [];
      this._items = [];
      const site_id = e.target.value;
      if(site_id == '0') {
        return;
      }
      e.target.disabled = true;
      this.cache[site_id] = this.cache[site_id] || (await this.getData(site_id))
        .reduce((p, v) => {
          p[v.unix_name] = v.title;
          return p;
      }, {});
      this._items = this.en
        .filter(v => !this.cache[site_id][v.unix_name])
      this.items = this._items
        .filter(v => !this.regex || v.unix_name.match(this.regex));
      e.target.disabled = false;
    }
  },
  mounted: async function() {
    document.title = '7happy7\'s Warehouse - Untranslations';
 
    const data = await this.getData(66711);
    this.en = data;
  }
}
</script>
 
<style scoped>
h4 {
    color: #42b983;
}
.flex {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.flex > label {
    width: 100%;
}
.flex > ul {
    cursor: text;
    font-size: .6em;
    font-style: italic;
}
label.item {
    display: block;
    padding: 1em 0;
}
select, input {
    border: 2px solid #888;
    padding: .5em 0;
}
input.inline {
    background: #42b983;
    border: 1px solid #34495e;
    border-radius: 2px;
    color: #34495e;
    cursor: pointer;
    display: block;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: 0.6em;
    font-style: italic;
    font-weight: bold;
    padding: 0.5em 1em;
    text-align: center;
    width: 100%;
}
input.inline:focus {
    outline: none;
}
.center {
  text-align: center;
}
input.invalid {
    background: #ffecec;
    border-color: #f87978;
    color: #f74f50;
}
</style>