Browse Source

Make buttons work

master
stew3254 2 years ago
parent
commit
d1357e7fa6
  1. 55
      html/configure.html
  2. 14
      html/create.html
  3. 0
      html/css/buttons.css
  4. 93
      html/css/index.css
  5. BIN
      html/imgs/blue.png
  6. BIN
      html/imgs/orange.png
  7. BIN
      html/imgs/purple.png
  8. 74
      html/index.html
  9. 103
      html/js/index.js
  10. 48
      src/server.go

55
html/configure.html

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Captain Hook</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/index.css">
</head>
<body>
<!-- <div class="main container">
<div class="card w-100">
<div class="card-body">
<div id="header">
<h1 class="card-title font-weight-bold">Captain Hook</h1>
<h5 class="card-subtitle text-muted">
A webhook server written in Go.
</h5>
</div>
<h2>Create Hook</h2>
<div class="input-group">
<input class="form-control" type="text" name="create">
<div class="input-group-append">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
{{if . -}}
<h2>Currently available hooks</h2>
<ul class="list-group hooks">
{{range . -}}
<li class="list-group-item ">
<span class="hook-text">{{.Name}}</span>
<button type="submit" class="btn btn-primary" id="modify-{{.Name}}">Modify</button>
<button type="submit" class="btn btn-danger" id="delete-{{.Name}}">Delete</button>
</li>
{{- end}}
</ul>
{{- else}}
<h2>No hooks currently exist</h2>
{{- end}}
</div>
</div>
</div>
</div>
</div> -->
<p>This page is under construction</p>
<!-- Bootstrap JS -->
<!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> -->
<script src="/js/index.js"></script>
</body>
</html>

14
html/create.html

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Hook</title>
</head>
<body>
<form>
<h1>This page does not actually work</h1>
<input type="text">
<input type="submit" value="submit" action="">
</form>
</body>
</html>

0
html/imgs/something.png → html/css/buttons.css

93
html/css/index.css

@ -1,67 +1,66 @@
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #252525;
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #252525;
}
.main {
margin: 0 12.5vw;
padding: 2vh 2vw;
min-height: 100%;
display: flex;
flex: 1
min-height: 100%;
width: 100%;
display: flex;
}
.main h1 {
font-weight: bold;
margin-bottom: 2vh;
.main .card-title {
padding-bottom: 5vh;
background-color: #e0e0e0;
}
.main h2 {
font-size: 1.25em;
font-weight: bold;
margin-top: 3vh;
margin-bottom: 2vh;
.main .card-body {
padding: 7vh 5vw;
background-color: #e0e0e0;
}
.main button {
padding: 0;
height: 50px;
min-width: 90px;
font-size: 1.2rem;
text-transform: uppercase;
color: white;
border: none;
.main #header {
margin-bottom: 3rem;
}
.delete-button {
background-color: red;
.main h2 {
font-size: 1.25rem;
font-weight: bold;
margin-top: 2.5rem;
margin-bottom: 2vh;
}
.modify-button {
background-color: blue;
.main button {
width: 100px;
font-size: 1.3remd;
text-transform: uppercase;
color: white;
border: none;
}
.create-button {
background-color: green;
.hooks .list-group-item {
padding: 0;
display: flex;
}
.list-group-item {
padding: 0;
border: 1px solid;
.hooks .hook-text {
flex: 1;
padding-left: 1rem;
}
.create, .hook {
display: flex;
.hooks button {
border-radius: 0;
}
.create input {
width: 100%;
margin: 0;
.input-group,
.hooks .list-group-item {
height: 3rem;
line-height: 3rem;
}
.hook p {
margin: 0;
padding: 0 20px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
.form-control {
height: 100%;
}

BIN
html/imgs/blue.png

After

Width: 626  |  Height: 417  |  Size: 327 KiB

BIN
html/imgs/orange.png

After

Width: 626  |  Height: 357  |  Size: 243 KiB

BIN
html/imgs/purple.png

After

Width: 626  |  Height: 417  |  Size: 349 KiB

74
html/index.html

@ -9,46 +9,46 @@
<link rel="stylesheet" type="text/css" href="/css/index.css">
</head>
<body>
<div class="main card">
<div class="container-fluid">
<div id="header">
<h1>Captain Hook</h1>
<p>
A webhook server written in Go.
</p>
</div>
<h2>Create Hook</h2>
<ul class="list-group">
<li class="list-group-item">
<div class="create">
<input type="text" name="create">
<button type="submit" class="create-button">Create</button>
</div>
</li>
</ul>
{{if . -}}
<h2>Currently available hooks</h2>
<ul class="list-group hooks">
{{range . -}}
<li class="list-group-item">
<div class="hook">
<p>{{.Name}}</p>
<button type="submit" class="modify-button">Modify</button>
<button type="submit" class="delete-button">Delete</button>
<div class="main container">
<div class="card w-100">
<div class="card-body">
<div id="header">
<h1 class="card-title font-weight-bold">Captain Hook</h1>
<h5 class="card-subtitle text-muted">
A webhook server written in Go.
</h5>
</div>
<h2>Create Hook</h2>
<div class="input-group">
<input class="form-control" type="text" name="create">
<div class="input-group-append">
<button type="submit" class="btn btn-success">Create</button>
</div>
</li>
</div>
{{if . -}}
<h2>Currently available hooks</h2>
<ul class="list-group hooks">
{{range . -}}
<li class="list-group-item ">
<span class="hook-text">{{.Name}}</span>
<button type="submit" class="btn btn-primary" id="modify-{{.Name}}">Modify</button>
<button type="submit" class="btn btn-danger" id="delete-{{.Name}}">Delete</button>
</li>
{{- end}}
</ul>
{{- else}}
<h2>No hooks currently exist</h2>
{{- end}}
</ul>
{{- else}}
<h2>No hooks have been created</h2>
{{- end}}
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
<script src="/js/index.js"></script>
</div>
</div>
<!-- Bootstrap JS -->
<!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> -->
<script src="/js/index.js"></script>
</body>
</html>

103
html/js/index.js

@ -1,4 +1,99 @@
// document.getElementById("aStupidButton").onclick = function (event) {
// event.preventDefault();
// // do stuff
// };
// Some basic parameters to always use for fetch
let init = {
method: "GET",
mode: "same-origin",
cache: "no-cache",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
redirect: "follow",
referrerPolicy: 'no-referrer',
}
// Gets the list of all hooks
async function get_hooks(remote = false) {
if (remote) {
let r = []
// Get hook data from api
await fetch("/hook/", init)
// Wait on data
.then(response => response.json())
// Extract hook name out and return the array of hook names
.then(data => {
data.forEach(hook => {
r.push(hook.Name)
})
})
return r
} else {
let r = []
// Grab all of the hook names from the local page and return an array of them
document.querySelectorAll(".hook").forEach(element => {
r.push(element.textContent)
})
return r
}
}
// Set up handlers on all buttons
async function setup_buttons() {
// Get all buttons
let create_buttons = document.querySelectorAll(".btn-success")
let modify_buttons = document.querySelectorAll(".btn-primary")
let delete_buttons = document.querySelectorAll(".btn-danger")
create_buttons.forEach(element => {
element.addEventListener("click", () => {
// Construct url from the input and trim all external slashes
name = document.querySelector(".form-control").value.replace(/(^\/+)|(\/+$)/g, "").split("/")[0]
let url = "/hook/" + name
let hooks = get_hooks(remote=true).then(hooks => {
// See if hook already exists
if (hooks.indexOf(name) > -1) {
// Placeholder for more elegant solution
alert("NO!")
} else {
// Deep copy
let new_init = JSON.parse(JSON.stringify(init))
new_init.method = "PUT"
//Create a new hook and redirect to its configuration page
fetch(url, new_init)
.then(location => {
window.location = url + "/configure"
})
}
})
}
)})
modify_buttons.forEach(element => {
element.addEventListener("click", () => {
// Set to configuration page
window.location = "/hook/" + element.id.split("-")[1] + "/configure"
})
})
delete_buttons.forEach(element => {
element.addEventListener("click", () => {
let url = "/hook/" + element.id.split("-")[1]
// Deep copy
let new_init = JSON.parse(JSON.stringify(init))
new_init.method = "DELETE"
//Create a new hook and redirect to its configuration page
fetch(url, new_init)
.then(location => {
// TODO make this better
window.location = "/"
})
})
})
}
async function main() {
await setup_buttons()
}
main()

48
src/server.go

@ -8,6 +8,7 @@ import (
"log"
"net/http"
"os"
"strings"
_ "github.com/go-sql-driver/mysql"
)
@ -67,16 +68,18 @@ func runHook(w http.ResponseWriter, r *http.Request, hook Hook) {
}
}
// Show the index
func index(w http.ResponseWriter, r *http.Request) {
func loadTemplate(w http.ResponseWriter, r *http.Request, path string, name string, arg interface{}) {
// Log request to this url
log.Println(r.URL.String(), r.Method)
if r.URL.String() == "/" {
if r.URL.String() == path {
// Serve index template
t := template.Must(template.New("index.html").ParseFiles("html/index.html"))
err := t.Execute(w, getHooks(w))
t := template.Must(template.New(name+".html").ParseFiles("html/"+name+".html"))
err := t.Execute(w, arg)
if err != nil {
logError(w, err)
// writeError(w, errorMessage{
// StatusCode: http.StatusInternalServerError,
// Msg: "Failed to Load Page",
// })
}
// Can't find the page
} else {
@ -87,6 +90,27 @@ func index(w http.ResponseWriter, r *http.Request) {
}
}
// Show the index
func index(w http.ResponseWriter, r *http.Request) {
u := r.URL.String()
// Some bad path to start
path := "/bad"
// In case people think this is actually static html
if u == "/" || u == "/index.html" || u == "/index.htm" || u == "/index" {
loadTemplate(w, r, u, "index", getHooks(w))
// Catch those trying to cheat and go to /bad
} else if u == "/bad" {
path = "/very_bad"
} else {
loadTemplate(w, r, path, "index", getHooks(w))
}
}
// Show the configuration page
func configureHook(w http.ResponseWriter, r *http.Request, hook Hook) {
loadTemplate(w, r, r.URL.String(),"configure", hook)
}
// Handles requests to /hook/
func hookHandler(w http.ResponseWriter, r *http.Request) {
// Log request to this url
@ -98,7 +122,6 @@ func hookHandler(w http.ResponseWriter, r *http.Request) {
showHooks(w)
// Method unsupported
default:
log.Println("y tho")
writeError(w, errorMessage{
StatusCode: http.StatusMethodNotAllowed,
Msg: "Method Unsupported",
@ -109,6 +132,8 @@ func hookHandler(w http.ResponseWriter, r *http.Request) {
// Hook name
name := r.URL.String()[len("/hook/"):]
nameSplit := strings.Split(name, "/")
name = nameSplit[0]
switch r.Method {
// Handle the hook
@ -132,8 +157,13 @@ func hookHandler(w http.ResponseWriter, r *http.Request) {
conditions: nil,
}
// Run the user's hook
runHook(w, r, hook)
// Check to see if it's configure web page instead of API endpoint
if len(nameSplit) == 2 && nameSplit[1] == "configure" {
configureHook(w, r, hook)
} else {
// Run the user's hook
runHook(w, r, hook)
}
// Create / Update the hook
case http.MethodPut:

Loading…
Cancel
Save