1e commit
This commit is contained in:
113
templates/form_template.html
Normal file
113
templates/form_template.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!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>
|
||||
<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: '',
|
||||
monitoring: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
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>
|
||||
|
||||
113
templates/form_template_radios.html
Normal file
113
templates/form_template_radios.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!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>
|
||||
|
||||
Reference in New Issue
Block a user