cloudflare/static/index.html
2019-02-17 11:56:55 +01:00

106 lines
6.2 KiB
HTML

<html>
<head>
<title>Cloudflare Tool</title>
<script src="./static/jquery-3.2.1.min.js"></script>
<script src="./static/knockout-3.4.2.js"></script>
<script src="./static/bootstrap.min.js"></script>
<script src="./static/main.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="./static/bootstrap.min.css" rel="stylesheet">
<link href="./static/main.css" rel="stylesheet">
<meta charset="UTF-8">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Cloudflare Control</span>
</div>
</div>
</nav>
<div id="toast">Some text some message..</div>
<div id="mainContainer" class="container" role="main" style="margin-top: 5%;">
<!-- ko if: selectedZone() && selectedZone().deletePendingDomain() -->
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" style="display: none;" data-bind="with: selectedZone().deletePendingDomain()">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Record ?</h5>
</div>
<div class="modal-body">
<code data-bind="text: name" ></code>
</div>
<div class="modal-footer">
<button type="button" id="button-form" data-bind="click: modalDeleteClicked" name="delete" class="btn btn-danger btn-lg-submit">Delete</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /ko -->
<div class="jumbotron">
<div class="dropdown">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="text: selectedZone() == null ? 'Domain' : selectedZone().name">Domain</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" data-bind="foreach: zones">
<li><a href="#" data-bind="text: name, click: select"></a></li>
</ul>
</div>
<!-- ko if: selectedZone -->
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th width="100px">Typ</th>
<th width="">Name</th>
<th width="">Wert</th>
<th width="100px">TTL</th>
<th width="1%">Automatic TTL</th>
<th width="1%">Proxy</th>
<th width="1%">Speichern</th>
<th width="1%">Löschen</th>
</tr>
</thead>
<tbody>
<tr data-bind="with: selectedZone().createPendingDomain">
<td><select data-bind="options: $root.types, optionsCaption: 'Eintrags Typ', value: type, valueAllowUnset: false"></select></td>
<td><input type="text" data-bind="textInput: name"></input></td>
<td><input type="text" data-bind="textInput: content"></input></td>
<td><select data-bind="options: $root.ttls, optionsCaption: 'TTL', value: ttl, valueAllowUnset: false"></select></td>
<td><input type="checkbox" data-bind="checked: ttlAuto" ></input></td>
<td><input type="checkbox" data-bind="checked: proxied"></input></td>
<td><button type="button" class="btn btn-success" data-bind="click: saveButtonClicked, css: {disabled: !dirty()}"><i class="fa fa-floppy-o"></i> Erstellen</button></td>
<td><button type="button" class="btn btn-danger disabled"><i class="fa fa-trash"></i> Löschen</button></td>
</tr>
<!-- ko foreach: selectedZone().domains -->
<tr>
<td><input type="text" data-bind="textInput: type" disabled></input></td>
<td><input type="text" data-bind="textInput: name"></input></td>
<td><input type="text" data-bind="textInput: content"></input></td>
<td><select data-bind="options: $root.ttls, optionsCaption: 'TTL', value: ttl, valueAllowUnset: false"></select></td>
<td><input type="checkbox" data-bind="checked: ttlAuto" ></input></td>
<td><input type="checkbox" data-bind="checked: proxied"></input></td>
<td><button type="button" class="btn btn-primary" data-bind="click: saveButtonClicked, css: {disabled: !dirty()}"><i class="fa fa-floppy-o"></i> Speichern</button></td>
<td><button type="button" class="btn btn-danger" data-bind="click: deleteButtonClicked"><i class="fa fa-trash"></i> Löschen</button></td>
</tr>
<!-- /ko -->
</tbody>
</table>
<div style="text-align: center;" data-bind="with: selectedZone">
<div style="display:inline-block;">
<button class="btn btn-primary" data-bind="click: previousPage">Zurück</button>
<span data-bind="foreach: totalPagesArray()">
<button class="btn btn-primary" data-bind="text: $data, click: $parent.setPage(), css: {'btn-info': $parent.page() == $data}"></button>
</span>
<button class="btn btn-primary" data-bind="click: nextPage">Weiter</button>
</div>
</div>
<!-- /ko -->
</div>
</div>
</body>
</html>