Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 20, 2017 21:26
Show Gist options
  • Save anonymous/a0e719d46b6a2292945a4b2b2f776ea6 to your computer and use it in GitHub Desktop.
Save anonymous/a0e719d46b6a2292945a4b2b2f776ea6 to your computer and use it in GitHub Desktop.
Download ZIP
OxheyHall Job Permissions Permissions for users to access jobs and buildings // source https://jsbin.com/kucorun
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Permissions for users to access jobs and buildings">
<meta charset="utf-8">
<title>OxheyHall Job Permissions</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400|Source+Code+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style id="jsbin-css">
body {
background: #f5f5f5;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
.header {
margin: 10% auto 15px auto;
text-align: center;
}
.logo {
font-size: 2.4em;
font-weight: 300;
}
.form-control {
margin: 15px auto;
display: block;
color: #333;
box-sizing: border-box;
}
.output {
margin: 0 auto 15px auto;
padding: 10px;
border: 1px solid #dadada;
background: white;
white-space: pre;
font-family: 'Source Code Pro', monospace;
color: #112299;
overflow: auto;
box-sizing: border-box;
border-radius: 3px;
}
.text-blue { color: #2196F3 }
.text-green { color: #4CAF50 }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="header">
<div class="logo">
<span class="text-blue">Oxhey</span><span class="text-green">Hall</span>
</div>
</div>
<p>A simple permissions system for users to access jobs and buildings. To view the underlying data, please see your browsers console. Otherwise, select a user to see there respective permissions.</p>
<div class="form">
<select class="form-control" name="user" id="select-user" onchange="showJobs(this)">
<option value="">Please select an account</option>
<option value="karlbateman">karlbateman</option>
<option value="nialldunne">nialldunne</option>
<option value="greigdendor">greigdendor</option>
</select>
</div>
<div id="data"></div>
</div>
</div>
</div>
<script id="jsbin-javascript">
var dom = document.querySelector('#data')
var data = {}
data.permissions = {
karlbateman: [
{
number: 'J130',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J132',
buildings: [
'A building'
]
}
],
nialldunne: [
{
number: 'J130',
buildings: [
'A building'
]
}
],
greigdendor: [
{
number: 'J130',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J131',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J132',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J133',
buildings: [
'A building',
'Another building'
]
}
]
}
data.jobs = []
data.jobs[0] = {}
data.jobs[0].number = 'J130'
data.jobs[0].title = 'A job title'
data.jobs[0].description = 'A job we should do.'
data.jobs[0].buildings = []
data.jobs[0].buildings[0] = 'A building'
data.jobs[0].buildings[1] = 'Another building'
data.jobs[1] = {}
data.jobs[1].number = 'J131'
data.jobs[1].title = 'Another job title'
data.jobs[1].description = 'Another job we should do.'
data.jobs[1].buildings = []
data.jobs[1].buildings[0] = 'A building'
data.jobs[1].buildings[1] = 'Another building'
data.jobs[2] = {}
data.jobs[2].number = 'J132'
data.jobs[2].title = 'Yet another job title'
data.jobs[2].description = 'Yet another job we should do.'
data.jobs[2].buildings = []
data.jobs[2].buildings[0] = 'A building'
data.jobs[2].buildings[1] = 'Another building'
data.jobs[3] = {}
data.jobs[3].number = 'J133'
data.jobs[3].title = 'We have another job title'
data.jobs[3].description = 'We have another job we should do.'
data.jobs[3].buildings = []
data.jobs[3].buildings[0] = 'A building'
data.jobs[3].buildings[1] = 'Another building'
function getPermissions(username) {
if (data.permissions[username]) {
return Promise.resolve(data.permissions[username])
} else {
return Promise.reject(username + ' does not exist!')
}
}
function getJobs(input, permissions) {
var jobs = []
for (var i = 0; i < input.length; i++) {
for (var ii = 0; ii < permissions.length; ii++) {
if (input[i].number === permissions[ii].number) {
var job = input[i]
var buildings = []
for (var building in input[i].buildings) {
if (permissions[ii].buildings[building] === input[i].buildings[building]) {
buildings.push(input[i].buildings[building])
}
}
job.buildings = buildings
jobs.push(job)
}
}
}
return Promise.resolve(jobs)
}
function showJobs(event) {
if (event.value !== '') {
return output(event.value)
}
}
function output(user) {
getPermissions(user)
.then(result => getJobs(data.jobs, result))
.then(result => dom.innerHTML = '<div class="output">' + JSON.stringify(result, null, 3) + '</div>')
.catch(error => alert(error))
}
// inspect underlying data
console.log(data)
</script>
<script id="jsbin-source-css" type="text/css">body {
background: #f5f5f5;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
.header {
margin: 10% auto 15px auto;
text-align: center;
}
.logo {
font-size: 2.4em;
font-weight: 300;
}
.form-control {
margin: 15px auto;
display: block;
color: #333;
box-sizing: border-box;
}
.output {
margin: 0 auto 15px auto;
padding: 10px;
border: 1px solid #dadada;
background: white;
white-space: pre;
font-family: 'Source Code Pro', monospace;
color: #112299;
overflow: auto;
box-sizing: border-box;
border-radius: 3px;
}
.text-blue { color: #2196F3 }
.text-green { color: #4CAF50 }
</script>
<script id="jsbin-source-javascript" type="text/javascript">var dom = document.querySelector('#data')
var data = {}
data.permissions = {
karlbateman: [
{
number: 'J130',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J132',
buildings: [
'A building'
]
}
],
nialldunne: [
{
number: 'J130',
buildings: [
'A building'
]
}
],
greigdendor: [
{
number: 'J130',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J131',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J132',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J133',
buildings: [
'A building',
'Another building'
]
}
]
}
data.jobs = []
data.jobs[0] = {}
data.jobs[0].number = 'J130'
data.jobs[0].title = 'A job title'
data.jobs[0].description = 'A job we should do.'
data.jobs[0].buildings = []
data.jobs[0].buildings[0] = 'A building'
data.jobs[0].buildings[1] = 'Another building'
data.jobs[1] = {}
data.jobs[1].number = 'J131'
data.jobs[1].title = 'Another job title'
data.jobs[1].description = 'Another job we should do.'
data.jobs[1].buildings = []
data.jobs[1].buildings[0] = 'A building'
data.jobs[1].buildings[1] = 'Another building'
data.jobs[2] = {}
data.jobs[2].number = 'J132'
data.jobs[2].title = 'Yet another job title'
data.jobs[2].description = 'Yet another job we should do.'
data.jobs[2].buildings = []
data.jobs[2].buildings[0] = 'A building'
data.jobs[2].buildings[1] = 'Another building'
data.jobs[3] = {}
data.jobs[3].number = 'J133'
data.jobs[3].title = 'We have another job title'
data.jobs[3].description = 'We have another job we should do.'
data.jobs[3].buildings = []
data.jobs[3].buildings[0] = 'A building'
data.jobs[3].buildings[1] = 'Another building'
function getPermissions(username) {
if (data.permissions[username]) {
return Promise.resolve(data.permissions[username])
} else {
return Promise.reject(username + ' does not exist!')
}
}
function getJobs(input, permissions) {
var jobs = []
for (var i = 0; i < input.length; i++) {
for (var ii = 0; ii < permissions.length; ii++) {
if (input[i].number === permissions[ii].number) {
var job = input[i]
var buildings = []
for (var building in input[i].buildings) {
if (permissions[ii].buildings[building] === input[i].buildings[building]) {
buildings.push(input[i].buildings[building])
}
}
job.buildings = buildings
jobs.push(job)
}
}
}
return Promise.resolve(jobs)
}
function showJobs(event) {
if (event.value !== '') {
return output(event.value)
}
}
function output(user) {
getPermissions(user)
.then(result => getJobs(data.jobs, result))
.then(result => dom.innerHTML = '<div class="output">' + JSON.stringify(result, null, 3) + '</div>')
.catch(error => alert(error))
}
// inspect underlying data
console.log(data)</script></body>
</html>
Raw
jsbin.kucorun.css
body {
background: #f5f5f5;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
.header {
margin: 10% auto 15px auto;
text-align: center;
}
.logo {
font-size: 2.4em;
font-weight: 300;
}
.form-control {
margin: 15px auto;
display: block;
color: #333;
box-sizing: border-box;
}
.output {
margin: 0 auto 15px auto;
padding: 10px;
border: 1px solid #dadada;
background: white;
white-space: pre;
font-family: 'Source Code Pro', monospace;
color: #112299;
overflow: auto;
box-sizing: border-box;
border-radius: 3px;
}
.text-blue { color: #2196F3 }
.text-green { color: #4CAF50 }
Raw
jsbin.kucorun.js
var dom = document.querySelector('#data')
var data = {}
data.permissions = {
karlbateman: [
{
number: 'J130',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J132',
buildings: [
'A building'
]
}
],
nialldunne: [
{
number: 'J130',
buildings: [
'A building'
]
}
],
greigdendor: [
{
number: 'J130',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J131',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J132',
buildings: [
'A building',
'Another building'
]
},
{
number: 'J133',
buildings: [
'A building',
'Another building'
]
}
]
}
data.jobs = []
data.jobs[0] = {}
data.jobs[0].number = 'J130'
data.jobs[0].title = 'A job title'
data.jobs[0].description = 'A job we should do.'
data.jobs[0].buildings = []
data.jobs[0].buildings[0] = 'A building'
data.jobs[0].buildings[1] = 'Another building'
data.jobs[1] = {}
data.jobs[1].number = 'J131'
data.jobs[1].title = 'Another job title'
data.jobs[1].description = 'Another job we should do.'
data.jobs[1].buildings = []
data.jobs[1].buildings[0] = 'A building'
data.jobs[1].buildings[1] = 'Another building'
data.jobs[2] = {}
data.jobs[2].number = 'J132'
data.jobs[2].title = 'Yet another job title'
data.jobs[2].description = 'Yet another job we should do.'
data.jobs[2].buildings = []
data.jobs[2].buildings[0] = 'A building'
data.jobs[2].buildings[1] = 'Another building'
data.jobs[3] = {}
data.jobs[3].number = 'J133'
data.jobs[3].title = 'We have another job title'
data.jobs[3].description = 'We have another job we should do.'
data.jobs[3].buildings = []
data.jobs[3].buildings[0] = 'A building'
data.jobs[3].buildings[1] = 'Another building'
function getPermissions(username) {
if (data.permissions[username]) {
return Promise.resolve(data.permissions[username])
} else {
return Promise.reject(username + ' does not exist!')
}
}
function getJobs(input, permissions) {
var jobs = []
for (var i = 0; i < input.length; i++) {
for (var ii = 0; ii < permissions.length; ii++) {
if (input[i].number === permissions[ii].number) {
var job = input[i]
var buildings = []
for (var building in input[i].buildings) {
if (permissions[ii].buildings[building] === input[i].buildings[building]) {
buildings.push(input[i].buildings[building])
}
}
job.buildings = buildings
jobs.push(job)
}
}
}
return Promise.resolve(jobs)
}
function showJobs(event) {
if (event.value !== '') {
return output(event.value)
}
}
function output(user) {
getPermissions(user)
.then(result => getJobs(data.jobs, result))
.then(result => dom.innerHTML = '<div class="output">' + JSON.stringify(result, null, 3) + '</div>')
.catch(error => alert(error))
}
// inspect underlying data
console.log(data)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment