Add v1.0
This commit is contained in:
Oliver Akins
parent
6a5f642fb4
commit
48dffc112a
21 changed files with 1327 additions and 0 deletions
126
docs/index.html
Normal file
126
docs/index.html
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lurk Message Manager</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||||
<script src="./script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-if="!authenticated" id="login">
|
||||
<h2>Login</h2>
|
||||
<label for="username">Username</label>
|
||||
<input id="username" type="text" v-model="login.username">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" v-model="login.password">
|
||||
<button
|
||||
@click.stop="tryLogin"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
<div v-cloak v-else>
|
||||
<div id="header">
|
||||
<label for="channel-selector">
|
||||
Select Channel
|
||||
</label>
|
||||
<select
|
||||
name="channel selector"
|
||||
id="channel-selector"
|
||||
v-model="channel"
|
||||
@change="getMessages"
|
||||
>
|
||||
<option value="" selected disabled>Select a Channel</option>
|
||||
<option
|
||||
v-for="channel in channels"
|
||||
:key="channel"
|
||||
:value="channel"
|
||||
>
|
||||
{{channel}}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
:disabled="new_group"
|
||||
@click.stop="addGroup"
|
||||
>
|
||||
Add Message Group
|
||||
</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="body">
|
||||
<div
|
||||
v-for="(group, i) in messages"
|
||||
:key="group.id"
|
||||
class="lurk-group"
|
||||
>
|
||||
<div class="flex-container">
|
||||
<h3 style="flex-grow: 1;">Message Group {{i + 1}}</h3>
|
||||
<button
|
||||
v-if="group.id != 'new-group'"
|
||||
@click.stop="deleteGroup(group)"
|
||||
>
|
||||
Delete Group
|
||||
</button>
|
||||
<div v-else>
|
||||
<button
|
||||
@click.stop="removeNewGroup"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
:disabled="group.lurk.length == 0 || group.unlurk.length == 0"
|
||||
@click.stop="saveGroup(group)"
|
||||
>
|
||||
Save Group
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<i>Group ID: {{group.id}}</i>
|
||||
<hr>
|
||||
<div class="lurk-messages group-messages">
|
||||
<h4>Lurk Messages</h4>
|
||||
<div v-for="msg in group.lurk" class="flex-container message">
|
||||
<div style="flex-grow: 1">{{msg}}</div>
|
||||
<button @click.stop="deleteLurk(group, msg)">Delete Message</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="flex-container">
|
||||
<input type="text" class="message-input" v-model="group.new.lurk">
|
||||
<button
|
||||
:disabled="group.new.lurk.length == 0"
|
||||
@click.stop="addLurk(group)"
|
||||
>
|
||||
Add Lurk Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="unlurk-messages group-messages">
|
||||
<h4>Unlurk Messages</h4>
|
||||
<div v-for="msg in group.unlurk" class="flex-container message">
|
||||
<div style="flex-grow: 1">{{msg}}</div>
|
||||
<button @click.stop="deleteUnlurk(group, msg)">Delete Message</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="flex-container">
|
||||
<input type="text" class="message-input" v-model="group.new.unlurk">
|
||||
<button
|
||||
:disabled="group.new.unlurk.length == 0"
|
||||
@click.stop="addUnlurk(group)"
|
||||
>
|
||||
Add Unlurk Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
182
docs/script.js
Normal file
182
docs/script.js
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
const app = new Vue({
|
||||
el: `#app`,
|
||||
data() {return {
|
||||
url: `http://localhost:4000`,
|
||||
authenticated: false,
|
||||
channels: [],
|
||||
channel: ``,
|
||||
login: {
|
||||
username: `alkali`,
|
||||
password: `metal`,
|
||||
},
|
||||
api: null,
|
||||
messages: [],
|
||||
new_group: false,
|
||||
}},
|
||||
methods: {
|
||||
async tryLogin() {
|
||||
try {
|
||||
let r = await axios.post(
|
||||
`${this.url}/login`,
|
||||
undefined,
|
||||
{ auth: this.login }
|
||||
);
|
||||
this.api = axios.create({
|
||||
baseURL: this.url,
|
||||
validateStatus: null,
|
||||
auth: this.login,
|
||||
});
|
||||
this.channels.push(...r.data.sort());
|
||||
this.authenticated = true;
|
||||
} catch (_) {};
|
||||
},
|
||||
async getMessages() {
|
||||
if (!this.api) { return };
|
||||
let r = await this.api.get(`/manage/${this.channel}`);
|
||||
if (r.status === 200) {
|
||||
for (const m of r.data) {
|
||||
m.new = {
|
||||
lurk: ``,
|
||||
unlurk: ``,
|
||||
};
|
||||
};
|
||||
this.messages = r.data;
|
||||
} else {
|
||||
this.messages = [];
|
||||
};
|
||||
},
|
||||
async addLurk(group) {
|
||||
if (group.id === `new-group`) {
|
||||
group.lurk.push(group.new.lurk);
|
||||
} else {
|
||||
if (!this.api) { return };
|
||||
let payload = {
|
||||
lurk: [
|
||||
...group.lurk,
|
||||
group.new.lurk
|
||||
],
|
||||
unlurk: group.unlurk,
|
||||
};
|
||||
let r = await this.api.patch(
|
||||
`/manage/${this.channel}/message/${group.id}`,
|
||||
payload
|
||||
);
|
||||
if (r.status != 200) {
|
||||
alert(`Failed to update the group. Status: ${r.status}`);
|
||||
} else {
|
||||
group.lurk.push(group.new.lurk);
|
||||
alert(`Added lurk message successfully.`);
|
||||
};
|
||||
};
|
||||
group.new.lurk = ``;
|
||||
},
|
||||
async addUnlurk(group) {
|
||||
if (group.id === `new-group`) {
|
||||
group.unlurk.push(group.new.unlurk);
|
||||
} else {
|
||||
if (!this.api) { return };
|
||||
let payload = {
|
||||
lurk: group.lurk,
|
||||
unlurk: [
|
||||
...group.unlurk,
|
||||
group.new.unlurk
|
||||
],
|
||||
};
|
||||
let r = await this.api.patch(
|
||||
`/manage/${this.channel}/message/${group.id}`,
|
||||
payload
|
||||
);
|
||||
if (r.status != 200) {
|
||||
alert(`Failed to update the group. Status: ${r.status}`);
|
||||
} else {
|
||||
group.unlurk.push(group.new.unlurk);
|
||||
alert(`Added unlurk message successfully.`);
|
||||
};
|
||||
};
|
||||
group.new.unlurk = ``;
|
||||
},
|
||||
addGroup() {
|
||||
this.new_group = true;
|
||||
this.messages.unshift({
|
||||
lurk: [],
|
||||
unlurk: [],
|
||||
id: "new-group",
|
||||
new: {
|
||||
lurk: ``,
|
||||
unlurk: ``,
|
||||
},
|
||||
});
|
||||
},
|
||||
async saveGroup(group) {
|
||||
if (!this.api) { return };
|
||||
let r = await this.api.post(`/manage/${this.channel}/message`, {
|
||||
lurk: group.lurk,
|
||||
unlurk: group.unlurk,
|
||||
});
|
||||
if (r.status === 200) {
|
||||
this.messages.shift()
|
||||
this.messages.push({
|
||||
...r.data,
|
||||
new: {
|
||||
lurk: ``,
|
||||
unlurk: ``,
|
||||
},
|
||||
});
|
||||
alert(`Group has been saved`);
|
||||
};
|
||||
this.new_group = false;
|
||||
},
|
||||
async deleteGroup(group) {
|
||||
if (!this.api) { return };
|
||||
let r = await this.api.delete(`/manage/${this.channel}/message/${group.id}`);
|
||||
if (r.status === 200) {
|
||||
this.messages.splice(this.messages.indexOf(group, 1));
|
||||
alert(`Group has been deleted`);
|
||||
};
|
||||
},
|
||||
async deleteLurk(group, message) {
|
||||
if (group.id == "new-group") {
|
||||
group.lurk.splice(group.lurk.indexOf(message), 1);
|
||||
} else {
|
||||
if (!this.api) { return };
|
||||
let r = await this.api.patch(
|
||||
`/manage/${this.channel}/message/${group.id}`,
|
||||
{
|
||||
lurk: group.lurk.filter(m => m != message),
|
||||
unlurk: group.unlurk,
|
||||
}
|
||||
);
|
||||
if (r.status == 200) {
|
||||
group.lurk.splice(group.lurk.indexOf(message), 1);
|
||||
alert(`Deleted message successfully`);
|
||||
} else {
|
||||
alert(`Failed to delete the message. Status: ${r.status}`);
|
||||
};
|
||||
};
|
||||
},
|
||||
async deleteUnlurk(group, message) {
|
||||
if (group.id === `new-group`) {
|
||||
group.unlurk.splice(group.unlurk.indexOf(message), 1);
|
||||
} else {
|
||||
if (!this.api) { return };
|
||||
let r = await this.api.patch(
|
||||
`/manage/${this.channel}/message/${group.id}`,
|
||||
{
|
||||
lurk: group.lurk,
|
||||
unlurk: group.unlurk.filter(m => m != message),
|
||||
}
|
||||
);
|
||||
if (r.status == 200) {
|
||||
group.unlurk.splice(group.unlurk.indexOf(message), 1);
|
||||
alert(`Deleted message successfully`);
|
||||
} else {
|
||||
alert(`Failed to delete the message. Status: ${r.status}`);
|
||||
};
|
||||
};
|
||||
},
|
||||
removeNewGroup() {
|
||||
this.messages.shift();
|
||||
this.new_group = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
35
docs/style.css
Normal file
35
docs/style.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#login {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#login > input {
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.lurk-group {
|
||||
background: #1a242f;
|
||||
border-radius: 10px;
|
||||
margin: 7px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue