114 lines
5.1 KiB
HTML
114 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Form</title>
|
|
<script src="https://unpkg.com/vue@next"></script>
|
|
</head>
|
|
<body>
|
|
<h1>SIDN VM host_vars creation form</h1>
|
|
<div id="app">
|
|
<form @submit.prevent="submitForm">
|
|
<label for="hostname">Hostname:</label>
|
|
<input type="text" id="hostname" v-model="formData.hostname" required>
|
|
<br><br>
|
|
<label for="motd">Message of the day:</label><br>
|
|
<textarea id="motd" v-model="formData.motd" required></textarea>
|
|
<br><br>
|
|
<label for="location">Location:</label><br>
|
|
{% for location in config_content.locations %}
|
|
<input type="radio" id="location{{ loop.index }}" value="{{ location }}" v-model="formData.location" {% if loop.first %}required{% endif %}>
|
|
<label for="location{{loop.index}}">{{ location }}</label><br>
|
|
{% endfor %}
|
|
<p v-if="!formData.location" style="color: red;">Please select an option.</p>
|
|
<br>
|
|
<label for="cluster">Cluster:</label><br>
|
|
{% for cluster in config_content.clusters %}
|
|
<input type="radio" id="cluster{{ loop.index }}" value="{{ cluster }}" v-model="formData.cluster" {% if loop.first %}required{% endif %}>
|
|
<label for="cluster{{loop.index}}">{{ cluster }}</label><br>
|
|
{% endfor %}
|
|
<p v-if="!formData.cluster" style="color: red;">Please select an option.</p>
|
|
<br>
|
|
<label for="folder">Folder:</label><br>
|
|
{% for folder in config_content.folders %}
|
|
<input type="radio" id="folder{{ loop.index }}" value="{{ folder }}" v-model="formData.folder" {% if loop.first %}required{% endif %}>
|
|
<label for="folder{{loop.index}}">{{ folder }}</label><br>
|
|
{% endfor %}
|
|
<p v-if="!formData.folder" style="color: red;">Please select an option.</p>
|
|
<label for="vmconfig">VM config:</label><br>
|
|
{% for vmconfig in config_content.vm_configs %}
|
|
<input type="radio" id="vmconfig{{ loop.index }}" value="{{ vmconfig.name }}" v-model="formData.vmconfig" {% if loop.first %}required{% endif %}>
|
|
<label for="vmconfig{{loop.index}}">{{ vmconfig.name}}:<br>  CPU: {{ vmconfig.cpu }}<br>  Memory: {{ vmconfig.memory }}MB</label><br><br>
|
|
{% endfor %}
|
|
<p v-if="!formData.vmconfig" style="color: red;">Please select an option.</p>
|
|
<br>
|
|
<label for="interfaces">Interface(s):</label><br>
|
|
{% for interfaces in config_content.interfaces %}
|
|
<input type="radio" id="interfaces{{ loop.index }}" value="{{ interfaces.name }}" v-model="formData.interfaces" {% if loop.first %}required{% endif %}>
|
|
<label for="interfaces{{loop.index}}">{{ interfaces.descr }}</label><br>
|
|
{% endfor %}
|
|
<p v-if="!formData.interfaces" style="color: red;">Please select an option.</p>
|
|
|
|
|
|
<label for="monitoring">Monitoring profile:</label><br>
|
|
<select v-model="!formData.monitoring">
|
|
<option disabled value="">Please select one</option>
|
|
{% for monitoring in config_content.monitoring %}
|
|
<option>{{ monitoring }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p v-if="!formData.monitoring" style="color: red;">Please select an option.</p>
|
|
<br>
|
|
<input type="submit" value="Generate YAML">
|
|
<div v-if="formData.location !== ''">
|
|
<p>You selected: {{ '{{ formData.location }}' }}</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
formData: {
|
|
hostname: '',
|
|
motd: '',
|
|
location: '',
|
|
cluster: '',
|
|
folder: '',
|
|
interfaces: ''
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
submitForm() {
|
|
// Convert the formData object to JSON
|
|
const jsonData = JSON.stringify(this.formData);
|
|
// Send the JSON data to the server
|
|
fetch('/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: jsonData
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
alert('YAML file generated successfully!');
|
|
} else {
|
|
alert('Error generating YAML file.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Error generating YAML file.');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|