santorju_gui/templates/index.html

152 lines
6.4 KiB
HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Santorju SMPPClient GUI</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4">Santorju GUI SMPPClient</h1>
<p id="ip-address">Fetching IP address...</p>
<p>The IP address to white-list is 141.8.24.212</p>
<form id="settings-form">
<div class="form-group">
<label for="Hostname">Hostname (IP or Domain):</label>
<input type="text" class="form-control" id="Hostname" name="Hostname" required>
</div>
<div class="form-group">
<label for="Port">Port (Int):</label>
<input type="number" class="form-control" id="Port" name="Port" required>
</div>
<div class="form-group">
<label for="Username">SMPP Bind Username:</label>
<input type="text" class="form-control" id="Username" name="Username" required>
</div>
<div class="form-group">
<label for="Password">SMPP Bind Password:</label>
<input type="password" class="form-control" id="Password" name="Password" required>
</div>
<div class="form-group">
<label for="SSL">SSL: (1 or 0):</label>
<input type="number" class="form-control" id="SSL" name="SSL" required>
</div>
<div class="form-group">
<label for="Source">Source:</label>
<input type="text" class="form-control" id="Source" name="Source" required>
</div>
<div class="form-group">
<label for="Destination">Destination number (int):</label>
<input type="text" class="form-control" id="Destination" name="Destination" required>
</div>
<div class="form-group">
<label for="Content">SMS Content:</label>
<input type="text" class="form-control" id="Content" name="Content" required>
</div>
<div class="form-group">
<label for="Count">Number of messages to send (int):</label>
<input type="number" class="form-control" id="Count" name="Count" required>
</div>
<div class="form-group">
<label for="Validityperiod">Validityperiod (Optional):</label>
<input type="text" class="form-control" id="Validityperiod" name="Validityperiod">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="loading" class="mt-3" style="display: none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<h2 class="mt-5">Output</h2>
<pre id="output" class="bg-light p-3 border rounded"></pre>
<pre id="error" class="bg-light p-3 border rounded text-danger"></pre>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Function to make HTTP GET request
function getIPAddress() {
fetch('https://api64.ipify.org?format=json')
.then(response => response.json())
.then(data => {
// Update the placeholder element with the IP address
document.getElementById('ip-address').textContent = 'Your IP address is: ' + data.ip;
})
.catch(error => {
console.error('Error:', error);
});
}
// Call the function to get the IP address when the page loads
getIPAddress();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('settings-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
submitForm();
});
function submitForm() {
// Clear the output and error fields
document.getElementById('output').textContent = '';
document.getElementById('error').textContent = '';
// Show the loading indicator
document.getElementById('loading').style.display = 'block';
const formData = new FormData(form);
const settings = {};
formData.forEach((value, key) => { settings[key] = value });
fetch('/run_script', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache',
'Pragma': 'no-cache'
},
body: JSON.stringify(settings)
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => {
// Hide the loading indicator
document.getElementById('loading').style.display = 'none';
// Display the output or error
if (data.output) {
document.getElementById('output').textContent = data.output;
}
if (data.error) {
document.getElementById('error').textContent = data.error;
}
})
.catch(error => {
// Hide the loading indicator
document.getElementById('loading').style.display = 'none';
// Display the error
document.getElementById('error').textContent = 'An error occurred: ' + error.message;
console.error('Error:', error);
});
}
});
</script>
</body>
</html>