KingMcDonalds
328 lines
8.0 KiB
HTML
328 lines
8.0 KiB
HTML
<html>
|
|
<head>
|
|
<title></title>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
|
|
}
|
|
|
|
#groups {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 20px;
|
|
width: 250px;
|
|
/*background-color: rgba(0, 0, 0, .5);*/
|
|
padding: 15px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#menu {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 250px;
|
|
/*background-color: rgba(0, 0, 0, .5);*/
|
|
padding: 15px;
|
|
}
|
|
|
|
.btn {
|
|
position: relative;
|
|
padding: 10px;
|
|
width: 225px;
|
|
border: 1px solid black;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
margin-bottom: 3px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.active {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.btn:active {
|
|
padding: 8px;
|
|
margin: 4px;
|
|
}
|
|
|
|
.btn.red {
|
|
background-color: rgba(200, 0, 0, 0.5);
|
|
}
|
|
|
|
.btn.red:hover {
|
|
background-color: rgba(200, 0, 0, 0.9);
|
|
}
|
|
|
|
.btn.green {
|
|
background-color: rgba(0, 100, 0, 0.5);
|
|
}
|
|
|
|
.btn.green:hover {
|
|
background-color: rgba(0, 100, 0, 0.9);
|
|
}
|
|
|
|
.btn.blue {
|
|
background-color: rgba(0, 0, 200, 0.5);
|
|
}
|
|
|
|
.btn.blue:hover {
|
|
background-color: rgba(0, 0, 200, 0.9);
|
|
}
|
|
|
|
#wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.confirmbox {
|
|
display: none;
|
|
width: 330px;
|
|
height: auto;
|
|
background: rgba(0,0,0,.7);
|
|
border: 2px solid white;
|
|
padding: 10px;
|
|
color: white;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
margin-left: 50%;
|
|
margin-top: 20%;
|
|
transform: translate(-50%,0);
|
|
box-shadow: rgba(0,0,0,.7) 0 0 10px;
|
|
}
|
|
|
|
.newbox {
|
|
width: 700px;
|
|
margin-top: 8%;
|
|
}
|
|
|
|
input {
|
|
border: 1px solid white;
|
|
width: 100%;
|
|
padding: 16px 10px 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
input .full {
|
|
width: 98%;
|
|
}
|
|
|
|
.col {
|
|
width: 47%;
|
|
margin: 0 1%;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.col-w {
|
|
width: 97%;
|
|
margin: 0 0% 0 1.5%;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.textlabel {
|
|
font-size: 8px;
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 10px;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
background: black;
|
|
border: 1px solid white;
|
|
padding: 10px;
|
|
color: white;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div id="wrapper">
|
|
<div id="groups"></div>
|
|
<div id="menu">
|
|
<div id="done" class="btn green" onclick="ExitMenu(true);">DONE</div>
|
|
<div id="new" class="btn" onclick="PreCreate(false);">CREATE NEW</div>
|
|
<div id="edit" class="btn" onclick="Edit();">EDIT</div>
|
|
<div id="clone" class="btn" onclick="PreCreate(true);">CLONE</div>
|
|
<div id="rename" class="btn" onclick="PreRename();">RENAME</div>
|
|
<div id="delete" class="btn red" onclick="PreDelete();">DELETE</div>
|
|
<div id="cancel" class="btn" onclick="ExitMenu(false);">CANCEL</div>
|
|
</div>
|
|
|
|
<div id="confirm" class="confirmbox">
|
|
Are you sure you want to completely delete this group forever?<br /><br />
|
|
<div onclick="Delete();" class="btn blue">Yes, delete it</div> <div onclick="$(this).parent().hide();" class="btn red">Oops, no don't</div>
|
|
</div>
|
|
|
|
<div id="renamebox" class="confirmbox">
|
|
Name<br />
|
|
<input type="text" id="namer" /><br />
|
|
<div onclick="Rename();" class="btn blue">CONTINUE</div>
|
|
<div onclick="$(this).parent().hide(); $('#namer').val('');" class="btn red">CANCEL</div>
|
|
</div>
|
|
|
|
<div id="newname" class="confirmbox newbox">
|
|
<form id="newform">
|
|
<div class="col">
|
|
<label class="textlabel" for="groupname">Group Name</label>
|
|
<input type="text" id="groupname" />
|
|
</div>
|
|
|
|
<br />
|
|
<br />
|
|
</form>
|
|
<div onclick="Create($('#isclone').val());" class="btn blue">CONTINUE</div>
|
|
<div onclick="$(this).parent().hide(); $('#newnamer').val('');" class="btn red">CANCEL</div>
|
|
</div>
|
|
|
|
</div>
|
|
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
|
<script type="text/html" id="buttonT">
|
|
<div class="btn character" onclick="PickOne({{id}})" data-id="{{id}}">{{name}}</div>
|
|
</script>
|
|
<script>
|
|
window.onload = function () {
|
|
var eventCallback = {
|
|
buildmenu: function (data) {
|
|
$('#characters').html('');
|
|
var jdata = '';
|
|
//if (data.data != '') {
|
|
// jdata = JSON.parse(data.data || "[]");
|
|
// for (i = 0; i < jdata.length; i++) {
|
|
// var b = $('#buttonT').html()
|
|
// b = b.replace('{{id}}', jdata[i].id);
|
|
// b = b.replace('{{id}}', jdata[i].id);
|
|
// b = b.replace('{{name}}', jdata[i].name);
|
|
// $('#characters').html($('#characters').html() + b);
|
|
// if (jdata[i].currentId == jdata[i].id) $('[data-id="' + jdata[i].currentId + '"]').addClass('active');
|
|
// }
|
|
//}
|
|
$('#wrapper').show();
|
|
},
|
|
hide: function (data) {
|
|
$('#wrapper').hide();
|
|
},
|
|
show: function (data) {
|
|
$('#wrapper').show();
|
|
},
|
|
};
|
|
|
|
window.addEventListener('message', (event) => {
|
|
eventCallback[event.data.action](event.data);
|
|
});
|
|
}
|
|
|
|
async function ExitMenu(save) {
|
|
$('#wrapper').hide();
|
|
try {
|
|
const response = await axios.post(`https://${GetParentResourceName()}/exitmenu`, {
|
|
saved:save,
|
|
});
|
|
console.log(response.data);
|
|
} catch (error) {
|
|
console.error(`Failed to call NUI callback: ${error}`);
|
|
}
|
|
}
|
|
|
|
async function PickOne(id) {
|
|
$('.btn').removeClass('active');
|
|
$('[data-id="' + id + '"]').addClass('active');
|
|
try {
|
|
const response = await axios.post(`https://${GetParentResourceName()}/pc`, {
|
|
id: id,
|
|
});
|
|
console.log(response.data);
|
|
} catch (error) {
|
|
console.error(`Failed to call NUI callback: ${error}`);
|
|
}
|
|
}
|
|
|
|
var isClone = false;
|
|
async function PreCreate(isclone) {
|
|
isClone = isclone;
|
|
$('#isclone').val(isclone);
|
|
$('#newname').show();
|
|
}
|
|
|
|
async function Create(isclone) {
|
|
// var j = { "Firstname": $('#newnamerFirst').val(), "Lastname": $('#newnamerLast').val(), "Address1": $('#address1').val(), "Postal": $('#postal').val(), "Weight": $('#weight').val(), "Height": $('#height').val(), "EyeColor": $('#eyes').find(":selected").val(), "HairColor": $('#hair').find(":selected").val(), "Gender": $('#gender').find(":selected").val(), "Ethnicity": $('#ethnicity').find(":selected").val(), "DOB": $('#dob').val() };
|
|
// //console.log(j);
|
|
// try {
|
|
// const response = await axios.post(`https://${GetParentResourceName()}/new`, {
|
|
// isclone: isClone,
|
|
// name: $('#newnamerFirst').val() + ' ' + $('#newnamerLast').val(),
|
|
// data: JSON.stringify(j)
|
|
// });
|
|
// console.log(response.data);
|
|
// } catch (error) {
|
|
// console.error(`Failed to call NUI callback: ${error}`);
|
|
// }
|
|
// $('#newname').hide();
|
|
// $('#newnamer').val('');
|
|
}
|
|
|
|
async function PreRename() {
|
|
$('#renamebox').show();
|
|
}
|
|
async function Rename() {
|
|
try {
|
|
const response = await axios.post(`https://${GetParentResourceName()}/rename`, {
|
|
name: $('#namer').val()
|
|
});
|
|
console.log(response.data);
|
|
} catch (error) {
|
|
console.error(`Failed to call NUI callback: ${error}`);
|
|
}
|
|
$('#renamebox').hide();
|
|
$('#renamer').val('');
|
|
}
|
|
|
|
async function Edit() {
|
|
try {
|
|
const response = await axios.post(`https://${GetParentResourceName()}/edit`, {
|
|
});
|
|
console.log(response.data);
|
|
} catch (error) {
|
|
console.error(`Failed to call NUI callback: ${error}`);
|
|
}
|
|
}
|
|
|
|
async function PreDelete() {
|
|
$('#confirm').show();
|
|
}
|
|
|
|
async function Delete() {
|
|
$('#confirm').hide();
|
|
var id = $('.active').attr('data-id')
|
|
try {
|
|
const response = await axios.post(`https://${GetParentResourceName()}/delete`, {
|
|
id: id
|
|
});
|
|
console.log(response.data);
|
|
} catch (error) {
|
|
console.error(`Failed to call NUI callback: ${error}`);
|
|
}
|
|
}
|
|
|
|
flatpickr("#dob", { dateFormat: "m/d/Y"});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |