mirror of
https://gitlab.com/2009scape/2009scape.git
synced 2025-12-09 16:45:44 -07:00
151 lines
No EOL
5.7 KiB
HTML
151 lines
No EOL
5.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>💰 GE Tool</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta charset="UTF-8">
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
|
|
<link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/darkly/bulmaswatch.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="block container">
|
|
<div class="box">
|
|
<h1 class="title is-5">Import Files</h1>
|
|
|
|
<div class="field is-grouped">
|
|
<div class="file control has-name">
|
|
<label class="file-label">
|
|
<input id="files" class="file-input" type="file" name="files" accept=".json" multiple @change="readFiles">
|
|
<span class="file-cta">
|
|
<span class="file-label">
|
|
Select all the JSON config files
|
|
</span>
|
|
</span>
|
|
<span class="file-name">
|
|
{{ files ? `${files.length} files selected` : 'No files selected' }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<button class="button is-info" title="Last selected files will auto-refresh" @click="readFiles">Reload JSON</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
<div class="control">
|
|
<div class="tags has-addons">
|
|
<span class="tag">item_configs.json </span>
|
|
<span v-if="item_configs" class="tag is-success">YES</span>
|
|
<span v-else class="tag is-danger">NO</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<div class="tags has-addons">
|
|
<span class="tag">offer_dispatch.json</span>
|
|
<span v-if="offer_dispatch" class="tag is-success">YES</span>
|
|
<span v-else class="tag is-danger">NO</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="jsonLoaded" id="functionality">
|
|
<div class="block container">
|
|
<div class="box">
|
|
<h1 class="title">Offers</h1>
|
|
<div class="field">
|
|
<div class="control">
|
|
<label>Filter:</label>
|
|
<input class="input is-small" type="text" placeholder="Small input" v-model="nameFilter">
|
|
</div>
|
|
</div>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<td>Item ID</td>
|
|
<td>Name</td>
|
|
<td>Price</td>
|
|
<td>Amount</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="!nameFilter || offer.name.toLowerCase().includes(nameFilter.toLowerCase())"
|
|
v-for="(offer, itemId) in offers">
|
|
<td>{{ itemId }}</td>
|
|
<td>{{ offer.name }}</td>
|
|
<td>{{ offer.value }} gp</td>
|
|
<td>{{ offer.amount }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
autoRefresh: false,
|
|
files: undefined,
|
|
item_configs: undefined,
|
|
offer_dispatch: undefined,
|
|
nameFilter: ''
|
|
},
|
|
computed: {
|
|
jsonLoaded() {
|
|
loaded = this.item_configs && this.offer_dispatch
|
|
if (loaded && !this.autoRefresh) this.autoRefresh = setInterval(this.readFiles, 30000)
|
|
return loaded
|
|
},
|
|
offers() {
|
|
if (!this.offer_dispatch) return {}
|
|
offers = {}
|
|
for (offer of this.offer_dispatch.offers) {
|
|
offers[offer.itemId] = offers[offer.itemId]
|
|
|| {amount: 0, name: this.item_configs.find(x => x.id == offer.itemId).name, value: 0}
|
|
offers[offer.itemId].amount = (offer.amount - offer.completedAmount)
|
|
if (offer.offeredValue > offers[offer.itemId].value)
|
|
offers[offer.itemId].value = offer.offeredValue
|
|
}
|
|
return offers
|
|
}
|
|
},
|
|
methods: {
|
|
readFiles() {
|
|
this.files = document.getElementById('files').files
|
|
for (file of this.files) {
|
|
if (file.name == 'offer_dispatch.json') {
|
|
this.injestFile(file, 'offer_dispatch', 'status_dispatch')
|
|
}
|
|
if (file.name == 'item_configs.json') {
|
|
this.injestFile(file, 'item_configs', 'status_item')
|
|
}
|
|
}
|
|
},
|
|
injestFile(file, variable, status) {
|
|
var fr = new FileReader()
|
|
fr.onload = () => {
|
|
this.$set(this, variable, JSON.parse(fr.result))
|
|
}
|
|
fr.readAsText(file)
|
|
document.getElementById('app').style = ''
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
<style>
|
|
.input, .select select, .textarea {
|
|
background-color: #262b2b;
|
|
color: #fff;
|
|
}
|
|
</style> |