108 lines
5.4 KiB
HTML
108 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|
<title>Workshop</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css" />
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="section">
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="row">
|
|
<div class="col s12 m9" style="background-color: whitesmoke;">
|
|
<p class="flow-text" style="text-align: center; padding: 10px;"> Welcome to you personalized workshop, this is where you can add/create/modify
|
|
alot of the items and functions in your site. These modals will walk you through what basic info you will need
|
|
in order to further expand on your site.</p>
|
|
</div>
|
|
<div class="col s12 m3" style="background-color: aliceblue;">
|
|
<div class="col s6 m6 m-2">
|
|
<a class="btn elevated green modal-trigger" href="#modal1" style="width: 100%;">Add Group</a>
|
|
</div>
|
|
<div class="col s6 m6 m-2">
|
|
<button class="btn elevated orange" style="width: 100%;">Add Item</button>
|
|
</div>
|
|
<div class="col s6 m6 m-2">
|
|
<button class="btn elevated blue" style="width: 100%;">Add Shopping List</button>
|
|
</div>
|
|
<div class="col s6 m6 m-2">
|
|
<button class="btn elevated purple" style="width: 100%;">Add Recipe</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal1" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Adding a Group...</h4>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="card-panel">
|
|
<span class="blue-text">Groups are internal "grouping" of items that can be of the same type, tag, process, etc. The point of them is that you
|
|
can keep track of all of one thing in a list for quick reference.</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m6 input-field outlined p-2">
|
|
<input id="group_name" type="text" placeholder=" " maxlength="64">
|
|
<label for="group_name">Group Name</label>
|
|
<!--<span class="supporting-text">Supporting Text</span>-->
|
|
</div>
|
|
<div class="input-field col s12 m6 p-2">
|
|
<select id="group_type">
|
|
<option value="plain" selected>Plain Group</option>
|
|
<option value="exclusive">Exclusive Group</option>
|
|
<option value="inclusive">Inclusive Group</option>
|
|
</select>
|
|
<label for="group_type">Group Type</label>
|
|
</div>
|
|
<div class="input-field col s12 p-2">
|
|
<textarea id="group_description" class="materialize-textarea" placeholder="A short description for what this group represents..."></textarea>
|
|
<label for="group_description">Group Description</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a onclick="addGroup()" class="waves-effect btn">Add</a>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var elems = document.querySelectorAll('.modal');
|
|
var instances = M.Modal.init(elems, {
|
|
// specify options here
|
|
});
|
|
});
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var elems = document.querySelectorAll('select');
|
|
var instances = M.FormSelect.init(elems, {
|
|
// specify options here
|
|
});
|
|
});
|
|
|
|
function addGroup(){
|
|
var name = document.getElementById("group_name").value
|
|
var description = document.getElementById("group_description").value
|
|
var type = document.getElementById("group_type").value
|
|
|
|
const url = new URL('/addGroup', window.location.origin);
|
|
url.searchParams.append('name', name);
|
|
url.searchParams.append('description', description);
|
|
url.searchParams.append('type', type);
|
|
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data)
|
|
})
|
|
}
|
|
|
|
</script>
|
|
</html> |