favorites
This commit is contained in:
BuckarooBanzay
parent
efc085c440
commit
9591cfcd5f
47
public/js/components/Favorites.js
Normal file
47
public/js/components/Favorites.js
Normal file
@ -0,0 +1,47 @@
|
||||
import { get_favorites, remove_server } from "../service/favorites.js";
|
||||
import SelectServer from "./SelectServer.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"select-server": SelectServer
|
||||
},
|
||||
computed: {
|
||||
list: get_favorites
|
||||
},
|
||||
methods: {
|
||||
remove_server: remove_server
|
||||
},
|
||||
template: /*html*/`
|
||||
<div v-if="list.length">
|
||||
<h4>Favorites</h4>
|
||||
<table class="table table-dark table-sm table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Action</th>
|
||||
<th>Address</th>
|
||||
<th>Port</th>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="server in list">
|
||||
<td>
|
||||
<i class="fa fa-trash" v-on:click="remove_server(server)"></i>
|
||||
|
||||
<select-server :server="server"/>
|
||||
</td>
|
||||
<td>
|
||||
{{server.address}}
|
||||
</td>
|
||||
<td>
|
||||
{{server.name}}
|
||||
</td>
|
||||
<td>
|
||||
{{server.port}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@ -51,8 +51,15 @@ export default {
|
||||
<a href="https://github.com/paradust7/minetest-wasm" target="_new">paradust's</a>
|
||||
work on the wasm port of minetest
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-server"></i>
|
||||
Browse servers on the
|
||||
<router-link to="/serverlist">
|
||||
Serverlist
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
<div class="alert alert-warning">
|
||||
<div class="alert alert-warning" v-if="!info.AllowedHost">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
<b>NOTE:</b> This is still an experiment, some (or all) features might not work properly!
|
||||
</div>
|
||||
|
||||
14
public/js/components/LoginPage.js
Normal file
14
public/js/components/LoginPage.js
Normal file
@ -0,0 +1,14 @@
|
||||
import Favorites from "./Favorites.js";
|
||||
import Login from "./Login.js";
|
||||
|
||||
export default {
|
||||
inject: ["info"],
|
||||
components: {
|
||||
"login-form": Login,
|
||||
"favorites-list": Favorites
|
||||
},
|
||||
template: /*html*/`
|
||||
<login-form/>
|
||||
<favorites-list v-if="!info.AllowedHost"/>
|
||||
`
|
||||
};
|
||||
15
public/js/components/SelectServer.js
Normal file
15
public/js/components/SelectServer.js
Normal file
@ -0,0 +1,15 @@
|
||||
import { store } from "../service/login.js";
|
||||
|
||||
export default {
|
||||
props: ["server"],
|
||||
methods: {
|
||||
select_server: function(server) {
|
||||
store.address = server.address;
|
||||
store.port = ""+server.port;
|
||||
this.$router.push("/");
|
||||
}
|
||||
},
|
||||
template: /*html*/`
|
||||
<i class="fa-solid fa-play" style="color: green;" v-on:click="select_server(server)"></i>
|
||||
`
|
||||
};
|
||||
@ -1,13 +1,15 @@
|
||||
import { store } from "../service/login.js";
|
||||
import { add_server, is_favorite, remove_server } from "../service/favorites.js";
|
||||
import SelectServer from "./SelectServer.js";
|
||||
|
||||
export default {
|
||||
props: ["list", "enable_star"],
|
||||
components: {
|
||||
"select-server": SelectServer
|
||||
},
|
||||
props: ["list"],
|
||||
methods: {
|
||||
select_server: function(server) {
|
||||
store.address = server.address;
|
||||
store.port = ""+server.port;
|
||||
this.$router.push("/");
|
||||
}
|
||||
add_server: add_server,
|
||||
remove_server: remove_server,
|
||||
is_favorite: is_favorite
|
||||
},
|
||||
template: /*html*/`
|
||||
<table class="table table-dark table-sm table-striped">
|
||||
@ -26,11 +28,12 @@ export default {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="server in list">
|
||||
<tr v-for="server in list" v-bind:class="{'table-success': is_favorite(server)}">
|
||||
<td>
|
||||
<i class="fa-regular fa-star" v-if="enable_star"></i>
|
||||
<i class="fa fa-star" style="color: yellow;" v-on:click="remove_server(server)" v-if="is_favorite(server)"></i>
|
||||
<i class="fa-regular fa-star" v-on:click="add_server(server)" v-else></i>
|
||||
|
||||
<i class="fa-solid fa-play" style="color: green;" v-on:click="select_server(server)"></i>
|
||||
<select-server :server="server"/>
|
||||
</td>
|
||||
<td style="max-width: 15ch;">
|
||||
{{server.address}}
|
||||
|
||||
@ -1,24 +1,29 @@
|
||||
/* globals Vue */
|
||||
import Serverlist from "./Serverlist.js";
|
||||
import Favorites from "./Favorites.js";
|
||||
|
||||
const store = Vue.reactive({
|
||||
list: [],
|
||||
busy: false,
|
||||
search: ""
|
||||
});
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"server-list": Serverlist
|
||||
"server-list": Serverlist,
|
||||
"favorites-list": Favorites
|
||||
},
|
||||
data: () => store,
|
||||
created: function() {
|
||||
const min = 37, max = 42;
|
||||
if (this.list.length == 0) {
|
||||
this.busy = true;
|
||||
fetch("http://servers.minetest.net/list")
|
||||
.then(r => r.json())
|
||||
.then(l => l.list)
|
||||
.then(l => l.filter(e => e.proto_max > min && e.proto_min < max))
|
||||
.then(l => this.list = l);
|
||||
.then(l => this.list = l)
|
||||
.finally(() => this.busy = false);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -42,11 +47,23 @@ export default {
|
||||
}
|
||||
},
|
||||
template: /*html*/`
|
||||
<div class="row">
|
||||
<div class="row" v-if="busy">
|
||||
<div class="col-4"></div>
|
||||
<div class="col-4">
|
||||
<div class="alert alert-info">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
Loading serverlist
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4"></div>
|
||||
</div>
|
||||
<favorites-list/>
|
||||
<h4>Serverlist</h4>
|
||||
<div class="row" v-if="!busy">
|
||||
<div class="col-12">
|
||||
<input type="text" class="form-control" placeholder="Search" v-model="search"/>
|
||||
</div>
|
||||
</div>
|
||||
<server-list :list="filtered_list" enable_star="true"/>
|
||||
<server-list :list="filtered_list" v-if="!busy"/>
|
||||
`
|
||||
};
|
||||
6
public/js/components/Template.js
Normal file
6
public/js/components/Template.js
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
export default {
|
||||
template: /*html*/`
|
||||
<div></div>
|
||||
`
|
||||
};
|
||||
@ -1,8 +1,8 @@
|
||||
import Login from "./components/Login.js";
|
||||
import LoginPage from "./components/LoginPage.js";
|
||||
import ServerlistPage from "./components/ServerlistPage.js";
|
||||
|
||||
export default [{
|
||||
path: "/", component: Login
|
||||
path: "/", component: LoginPage
|
||||
},{
|
||||
path: "/serverlist", component: ServerlistPage
|
||||
}];
|
||||
|
||||
52
public/js/service/favorites.js
Normal file
52
public/js/service/favorites.js
Normal file
@ -0,0 +1,52 @@
|
||||
/* global Vue */
|
||||
|
||||
const store = Vue.reactive({
|
||||
list: []
|
||||
});
|
||||
|
||||
function load() {
|
||||
store.list = JSON.parse(localStorage.getItem("favorites") || "[]");
|
||||
}
|
||||
|
||||
function save() {
|
||||
localStorage.setItem("favorites", JSON.stringify(store.list));
|
||||
}
|
||||
|
||||
load();
|
||||
|
||||
export const get_favorites = () => store.list;
|
||||
|
||||
export function remove_server(server) {
|
||||
store.list = store.list.filter(entry => {
|
||||
return entry.address != server.address || entry.port != server.port;
|
||||
});
|
||||
save();
|
||||
}
|
||||
|
||||
export function is_favorite(server) {
|
||||
return store.list.find(entry => entry.address == server.address && entry.port == server.port);
|
||||
}
|
||||
|
||||
export function add_server(server) {
|
||||
for (let i=0; i<store.list.length; i++){
|
||||
const entry = store.list[i];
|
||||
if (entry.address == server.address && entry.port == server.port) {
|
||||
// replace entry
|
||||
store.list[i] = {
|
||||
address: server.address,
|
||||
port: server.port,
|
||||
name: server.name
|
||||
};
|
||||
save();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// append entry
|
||||
store.list.push({
|
||||
address: server.address,
|
||||
port: server.port,
|
||||
name: server.name
|
||||
});
|
||||
save();
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user