5 changed files with 161 additions and 61 deletions
@ -0,0 +1,69 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title> |
||||||
|
Kara - Add reponses |
||||||
|
</title> |
||||||
|
<meta charset="utf8"> |
||||||
|
<link rel="icon" href="/favicon.ico"> |
||||||
|
<link rel="manifest" href="manifest/kara.json"> |
||||||
|
<link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/> |
||||||
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" |
||||||
|
name="viewport"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="container-fluid" id="kara"> |
||||||
|
<div id="kara-banner" class="bg-dark text-light"> |
||||||
|
<img src="/img/logo/luna/icon.ico" class="header-logo" alt="logo-header"/> |
||||||
|
{{ this.name }} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row" id="addForm"> |
||||||
|
<div class="col"> |
||||||
|
<h5>Add Reaction</h5> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="includeAll">Message must include all search-terms</label> |
||||||
|
<input type="checkbox" id="includeALl" v-model="addModal.includeAll"> |
||||||
|
</div> |
||||||
|
<div class="form-group"> |
||||||
|
<label for="keywords">Keywords (separated with comma)</label> |
||||||
|
<input type="text" id="keywords" v-model="addModal.keywords" class="form-control"> |
||||||
|
</div> |
||||||
|
<div class="form-group"> |
||||||
|
<label>Responses</label> |
||||||
|
<small>(Wildcards: $username$, $botname$)</small> |
||||||
|
<template v-for="(key, responseOption) in addModal.responses"> |
||||||
|
<input type="text" v-model="addModal.responses[responseOption]" class="form-control response-input"> |
||||||
|
</template> |
||||||
|
<div class="float-right"> |
||||||
|
<button class="btn-sm btn-success" @click="addResponseToInput">+</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="row"> |
||||||
|
<div class="col"> |
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> |
||||||
|
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="addNewResponseContainer">Add |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<link rel="stylesheet" |
||||||
|
:href="'https://maxcdn.bootstrapcdn.com/bootswatch/4.3.1/' + activeTheme + '/bootstrap.min.css'"> |
||||||
|
<link href="app.css" rel="stylesheet" type="text/css"/> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script> |
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js" crossorigin="anonymous"></script> |
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script> |
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" |
||||||
|
crossorigin="anonymous"></script> |
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script> |
||||||
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
||||||
|
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> |
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
||||||
|
<script src="addReponse.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
let responses = new Vue({ |
||||||
|
el: '#kara', |
||||||
|
data: { |
||||||
|
name: 'Kara', |
||||||
|
activeTheme: 'slate', |
||||||
|
addModal: { |
||||||
|
includeAll: false, |
||||||
|
keywords: '', |
||||||
|
responses: [ |
||||||
|
'Answer #1' |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
addMessage(body, bot, me = false) { |
||||||
|
this.messages.push({ |
||||||
|
body: body, |
||||||
|
bot: bot, |
||||||
|
command: body.search('/') === 0, |
||||||
|
me: me, |
||||||
|
time: Date.now() |
||||||
|
}) |
||||||
|
}, |
||||||
|
addResponseToInput() { |
||||||
|
this.addModal.responses.push(''); |
||||||
|
}, |
||||||
|
addNewResponseContainer() { |
||||||
|
let includeAll = this.addModal.includeAll; |
||||||
|
let keywords = this.cleanupMessage(this.addModal.keywords).split(','); |
||||||
|
let responses = this.addModal.responses; |
||||||
|
|
||||||
|
let newResponse = { |
||||||
|
includeAll: includeAll, |
||||||
|
keywords: keywords, |
||||||
|
responses: responses |
||||||
|
}; |
||||||
|
|
||||||
|
axios.post('/responses/create', newResponse) |
||||||
|
.then((response) => { |
||||||
|
console.log(response); |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.log(error); |
||||||
|
}) |
||||||
|
|
||||||
|
// this.addModal.includeAll = false;
|
||||||
|
// this.addModal.keywords = '';
|
||||||
|
// this.addModal.responses = [''];
|
||||||
|
}, |
||||||
|
cleanupMessage(message) { |
||||||
|
message = message.toLowerCase(); |
||||||
|
return message.replace('?', '') |
||||||
|
.replace('!', '') |
||||||
|
.replace('.', '') |
||||||
|
.replace(',', '') |
||||||
|
.replace('-', '') |
||||||
|
.replace('_', '') |
||||||
|
.replace('#', '') |
||||||
|
.replace('\'', '') |
||||||
|
.replace('"', '') |
||||||
|
.replace('+', '') |
||||||
|
.replace('*', '') |
||||||
|
.replace('§', '') |
||||||
|
.replace('$', '') |
||||||
|
.replace('%', '') |
||||||
|
.replace('&', '') |
||||||
|
.replace('/', '') |
||||||
|
.replace('(', '') |
||||||
|
.replace(')', '') |
||||||
|
.replace('=', '') |
||||||
|
.replace('\\', '') |
||||||
|
.replace('@', '') |
||||||
|
.replace('~', '') |
||||||
|
.replace('…', ''); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
Loading…
Reference in new issue