-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #51 from acidlemon/htmx
use HTMX!
- Loading branch information
Showing
6 changed files
with
121 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,70 @@ | ||
| {{ template "header" }} | ||
|
|
||
| <h1>Launch Container</h1> | ||
|
|
||
| <div class="col-md-12"> | ||
| <form id="launcher" method="POST" action="/launch"> | ||
| <label for="subdomain" class="col-md-2 text-right">subdomain </label> | ||
| <input type="text" name="subdomain" value="" id="subdomain" | ||
| class="col-md-5" placeholder="mybranch"> | ||
| <p class="col-md-5">*Required</p> | ||
|
|
||
| {{ range $param := .Parameters }} | ||
|
|
||
| <label for="{{ $param.Name }}" class="col-md-2 text-right">{{ $param.Name }} </label> | ||
| {{ if $param.Options }} | ||
| <select name="{{ $param.Name }}" id="{{ $param.Name }}" class="col-md-5"> | ||
| {{ range $option := $param.Options }} | ||
| <option value="{{ $option.Value }}" {{ if eq $option.Value $param.Default }}selected{{ end }}>{{ or $option.Label | ||
| $option.Value }}</option> | ||
| <div class="modal-dialog modal-dialog-centered"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title">Launch New Task</h5> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <form id="launcher-form" method="POST" action="/launch"> | ||
| <div class="mb-3"> | ||
| <label for="subdomain" class="form-label">subdomain</label> | ||
| <input class="form-control" type="text" name="subdomain" value="" id="subdomain" placeholder="mybranch" required | ||
| pattern="[a-zA-Z-][a-zA-Z0-9-]+"> | ||
| <div class="form-text">*Required</div> | ||
| </div> | ||
| {{ range $param := .Parameters }} | ||
| <div class="mb-3"> | ||
| <label for="{{ $param.Name }}" class="form-label">{{ $param.Name }}</label> | ||
| {{ if $param.Options }} | ||
| <select class="form-control" name="{{ $param.Name }}" id="{{ $param.Name }}"> | ||
| {{ range $option := $param.Options }} | ||
| <option value="{{ $option.Value }}" {{ if eq $option.Value $param.Default }}selected{{ end }}>{{ or $option.Label | ||
| $option.Value }}</option> | ||
| {{ end }} | ||
| </select> | ||
| {{ else }} | ||
| <input class="form-control" type="text" name="{{ $param.Name }}" value="{{ $param.Default }}" id="{{ $param.Name }}" | ||
| placeholder="your {{ $param.Name }}" {{ if $param.Required }}required{{ end }} /> | ||
| {{ end }} | ||
| <div class="form-text"> | ||
| {{ if $param.Required }}*Required{{ else }}(Optional){{ end }} | ||
| </div> | ||
| <div class="form-text"> | ||
| {{ $param.Description }} | ||
| </div> | ||
| </div> | ||
| {{ end }} | ||
| </select> | ||
| {{ else }} | ||
| <input type="text" name="{{ $param.Name }}" value="{{ $param.Default }}" id="{{ $param.Name }}" class="col-md-5" | ||
| placeholder="your {{ $param.Name }}" /> | ||
| {{ end }} | ||
| <p class="col-md-5">{{ if $param.Required }}*Required {{ else }} (optional) {{ end }}</p> | ||
|
|
||
| {{ if $param.Description }} | ||
| <span class="col-md-2"></span> | ||
| <div class="col-md-10"> | ||
| <p>{{ $param.Description }}</p> | ||
| {{ range $i, $taskdef := .DefaultTaskDefinitions }} | ||
| {{ if eq $i 0 }} | ||
| <div class="mb-3"> | ||
| <label for="taskdef" class="col-md-3 text-right">Task Definitions</label> | ||
| {{ end }} | ||
| <input class="form-control" type="text" name="taskdef" value="{{ $taskdef }}" id="taskdef" | ||
| placeholder="arn:aws:ecs:ap-northeast-1:123456789012:task-definition/myapp" | ||
| required> | ||
| <div class="form-text">*Required</div> | ||
| </div> | ||
| {{ end }} | ||
| <div class="mb-3"> | ||
| <input type="submit" class="btn btn-primary" value="Launch" hx-post="/launch" id="launch-submit"> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button id="close-button" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | ||
| </div> | ||
| </div> | ||
| {{ end }} | ||
|
|
||
| {{ end }} | ||
|
|
||
| {{ range $i, $taskdef := .DefaultTaskDefinitions }} | ||
|
|
||
| {{ if eq $i 0 }} | ||
|
|
||
| <label for="taskdef" class="col-md-2 text-right">Task Definitions</label> | ||
|
|
||
| {{ else }} | ||
|
|
||
| <div class="col-md-2"></div> | ||
|
|
||
| {{ end }} | ||
|
|
||
| <input type="text" name="taskdef" value="{{ $taskdef }}" id="taskdef" | ||
| class="col-md-5" placeholder="arn:aws:ecs:ap-northeast-1:123456789012:task-definition/myapp"> | ||
| <p class="col-md-5">*Required</p> | ||
|
|
||
| {{ end }} | ||
|
|
||
| <p class="col-md-7"></p> | ||
| <p class="col-md-5 text-left"> | ||
| <input type="submit" class="btn btn-primary"> | ||
| </p> | ||
| </form> | ||
| </div> | ||
|
|
||
| {{ template "footer" . }} | ||
| <script> | ||
| document.body.addEventListener('htmx:afterRequest', function (event) { | ||
| console.log(event.detail); | ||
| if (event.detail.pathInfo.requestPath == '/launch') { | ||
| if (event.detail.xhr.status >= 400) { | ||
| var responseBody = event.detail.xhr.responseText; | ||
| alert('エラーが発生しました: ' + responseBody); | ||
| } else { | ||
| // success | ||
| location.reload(); | ||
| } | ||
| } | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,43 @@ | ||
| {{ define "header" }} | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <title>Mirage-ECS Dashboard</title> | ||
| <style> | ||
| body { | ||
| padding-top: 60px; | ||
| } | ||
| </style> | ||
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> | ||
|
|
||
| <style type="text/css"> | ||
| .glyphicon-refresh-animate { | ||
| -animation: spin .7s infinite linear; | ||
| } | ||
|
|
||
| @keyframes spin2 { | ||
| from { | ||
| -webkit-transform: rotate(0deg); | ||
| } | ||
|
|
||
| to { | ||
| -webkit-transform: rotate(360deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes spin { | ||
| from { | ||
| transform: scale(1) rotate(0deg); | ||
| } | ||
|
|
||
| to { | ||
| transform: scale(1) rotate(360deg); | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div class="navbar navbar-default navbar-fixed-top" role="navigation"> | ||
| <div class="container"> | ||
| <div class="navbar-header"> | ||
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | ||
| <span class="sr-only">Toggle navigation</span> | ||
| <span class="icon-bar"></span> | ||
| <span class="icon-bar"></span> | ||
| <span class="icon-bar"></span> | ||
| </button> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Mirage-ECS Dashboard</title> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" | ||
| integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> | ||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> | ||
| <script src="https://unpkg.com/htmx.org@1.9.8"></script> | ||
| </head> | ||
| <body> | ||
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | ||
| <div class="container"> | ||
| <a class="navbar-brand" href="/">Mirage-ECS</a> | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" | ||
| aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="row col-1"> | ||
| <button id="refresh-button" class="btn btn-secondary" hx-get="/list" hx-target="#list-content">refresh</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="container"> | ||
| <div class="row"> | ||
| {{ end }} | ||
|
|
||
| {{ define "footer" }} | ||
| </nav> | ||
| <div class="container"> | ||
| <h1>Current Task List</h1> | ||
| <button hx-get="/launcher" hx-target="#launcher" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#launcher" | ||
| class="col-2 btn btn-primary">Launch New Task</button> | ||
| <div id="list-content" class="row" hx-trigger="load" hx-get="/list"></div> | ||
| <div id="launcher" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1"> | ||
| <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> | ||
| <div class="modal-content"></div> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <p>version: {{ .Version }}</p> | ||
| <p>mirage-ecs {{ .Version }}</p> | ||
| </footer> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | ||
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | ||
| <script type="text/javascript"> | ||
| function terminate(subdomain) { | ||
| $("#terminate-subdomain").attr("value", subdomain); | ||
| $(".terminate-" + subdomain).html( | ||
| '<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>' + | ||
| ' Terminating...') | ||
| $("#termination").submit(); | ||
| } | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> | ||
| {{ end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters