165 lines
7.1 KiB
HTML
165 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" id="main_html">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|
<title id="title"></title>
|
|
<!-- Material Icons -->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
<!-- Material Symbols - Outlined Set -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
|
<!-- Material Symbols - Rounded Set -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
|
|
<!-- Material Symbols - Sharp Set -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
|
|
|
|
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
|
|
</head>
|
|
<body>
|
|
<div class="uk-container uk-section">
|
|
<div uk-grid>
|
|
<div class="uk-width-1-1" >
|
|
<a href="/admin" class="uk-button uk-button-small"><span class="uk-flex material-symbols-outlined">arrow_back</span></a>
|
|
<a onclick="toggleDarkMode()" class="uk-button uk-button-small uk-align-right"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
|
|
</div>
|
|
<div class="uk-width-1-1">
|
|
<h3 class="uk-text-center">Role Form</h3>
|
|
</div>
|
|
<div class="uk-width-1-1">
|
|
<p>Roles exist to harness a users/devices access to a sites specific apps and inputs. You use roles to better define a groups permissions
|
|
within the app in order to control who has access to what. Specific User/Device permissions will overwrite any of their roles, permissions.</p>
|
|
</div>
|
|
<div class="uk-width-1-1">
|
|
<hr class="uk-divider-icon">
|
|
</div>
|
|
<div class="uk-width-1-1">
|
|
<div class="uk-margin">
|
|
<label class="uk-form-label" for="role_name">Role Name</label>
|
|
<div class="uk-form-controls">
|
|
<input id="role_name" class="uk-input" type="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-1-1">
|
|
<label class="uk-form-label" for="role_description">Role Description</label>
|
|
<div class="uk-margin">
|
|
<textarea id="role_description" class="uk-textarea" rows="5" aria-label="Textarea"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-1-1">
|
|
<div class="uk-margin">
|
|
<label class="uk-form-label" for="site_id">Select</label>
|
|
<div class="uk-form-controls">
|
|
<select id="site_id" class="uk-select">
|
|
{% for site in sites %}
|
|
<option value="{{site['id']}}">{{site['site_name']}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-1-1">
|
|
<hr class="uk-divider-icon">
|
|
</div>
|
|
<div class="uk-width-1-1">
|
|
<button id="SubmitButton" class="uk-button uk-button-primary uk-align-right">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
{% assets "js_all" %}
|
|
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
|
|
{% endassets %}
|
|
<script>
|
|
let role = {{role|tojson}}
|
|
const session = {{session|tojson}}
|
|
const path = window.location.pathname
|
|
console.log(role)
|
|
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
let mode = "edit"
|
|
if(path == "/admin/role/new"){
|
|
mode = "new"
|
|
}
|
|
await replenishForm(role, mode)
|
|
})
|
|
|
|
var mode = false
|
|
async function toggleDarkMode() {
|
|
let darkMode = document.getElementById("dark-mode");
|
|
darkMode.disabled = !darkMode.disabled;
|
|
mode = !mode;
|
|
if(mode){
|
|
document.getElementById('modeToggle').innerHTML = "light_mode"
|
|
document.getElementById('main_html').classList.add('uk-light')
|
|
} else {
|
|
document.getElementById('modeToggle').innerHTML = "dark_mode"
|
|
document.getElementById('main_html').classList.remove('uk-light')
|
|
}
|
|
}
|
|
|
|
if(session.user.flags.darkmode){
|
|
toggleDarkMode()
|
|
}
|
|
|
|
async function replenishForm(role, mode){
|
|
document.getElementById('role_name').value = role.role_name
|
|
document.getElementById('role_description').value = role.role_description
|
|
document.getElementById('site_id').value = role.site_id
|
|
|
|
if(mode=="new"){
|
|
document.getElementById('site_id').classList.remove('uk-disabled')
|
|
document.getElementById('SubmitButton').innerHTML = "Add Role"
|
|
document.getElementById('SubmitButton').onclick = async function(){
|
|
await postAddRole()
|
|
}
|
|
} else {
|
|
document.getElementById('site_id').classList.add('uk-disabled')
|
|
document.getElementById('SubmitButton').innerHTML = "Update Role"
|
|
document.getElementById('SubmitButton').onclick = async function(){
|
|
await postEditRole()
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
async function postAddRole(){
|
|
|
|
let payload = {
|
|
role_name: document.getElementById('role_name').value,
|
|
role_description: document.getElementById('role_description').value,
|
|
site_id: document.getElementById('site_id').value,
|
|
}
|
|
|
|
const response = await fetch(`/admin/role/postAddRole`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
payload: payload
|
|
}),
|
|
});
|
|
}
|
|
|
|
async function postEditRole(){
|
|
|
|
let payload = {
|
|
id: role.id,
|
|
update: {role_name: document.getElementById('role_name').value, role_description: document.getElementById('role_description').value}
|
|
}
|
|
|
|
const response = await fetch(`/admin/role/postEditRole`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
payload: payload
|
|
}),
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</html> |