Navigation Menu

Skip to content

Commit

Permalink
front-end
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattjfan
mattjfan committed Mar 25, 2018
1 parent 060c97c commit 9be8628
Show file tree
Hide file tree
Showing 4 changed files with 384 additions and 8 deletions.
60 changes: 55 additions & 5 deletions central-server/public/index.html
View file
@@ -1,12 +1,62 @@
<!DOCTYPE html>
<html>
<!DOCTYPE html >
<html lang='en'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hack.UVA 2018 | A Safer Smart Gun</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.css">
<link rel="stylesheet" href="styles.css">

<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io('http://localhost:4000');
var gun_list = {}
socket.on('connect', function () {

});
socket.on('update', function (data) {
gun_list = data;
console.log(gun_list)
});
</script>

</head>
<body>
<center><h1 style='margin:1rem'>Matt's Gun</h1>
<button class='button' id='disable'>Enabled</button>
<button class='button safetrek' id='safetrek'><b>Safe</b>trek</button>
</center>
<div class="ui container">
<ul id = "nearby_locations"> </ul>
<div id="map"></div>

</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.5/howler.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<script src="index.js"></script>


<script>
$('#disable').click(function(){
$(this).toggleClass('disabled');
$('body').toggleClass('disabled-bg');
if($(this).hasClass('disabled')){
$(this).html('<b>Disabled</b>');
/*TO-DO disable gun*/
}else{
$(this).text('Enabled');
/*TO-DO re-enable gun*/
}
})

<h1>My First Heading</h1>
<p>My first paragraph.</p>
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo-74AHF-BN-IGpWO1xTL5oHrs-EqZ088&callback=initMap">
</script>
</body>
</html>
</html>
139 changes: 139 additions & 0 deletions central-server/public/index.js
View file
@@ -0,0 +1,139 @@
var map;
$('#button').click(function() {
console.log("Pressed");

});
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.674, lng: -73.945},
zoom: 12,
styles: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
]
});
}

/*
$('a.make-alarm-request').on('click', function(e) {
e.preventDefault()
if (state.get('status') === 'active-alarm') {
log('Alarm status is currently active and will reset in 10s or less.')
} else if(state.get('status') !== 'processing') {
if(state.get('access_token')) {
$('.alarm').removeClass('alarm-red')
$('.alarm-status').text('Requesting...')
state.set('status', 'processing')
let url = SAFETREK_API_URL + '/alarms'
let data = $('code.alarm-request').text()
log('Requesting Alarm creation with data:\n', data)
$.ajax({
url: url,
type: 'post',
headers: {
'Authorization': `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik5FWTBPVVV3TVRSRU5qUTRSVUZDTkVJd01rUTBSVEUwUVRJMFF6ZzRSVGc1T0RBMFJEWXhOUSJ9.eyJodHRwOi8vY2xpZW50LW5hbWUiOiJIQUNLX1VWQSIsImlzcyI6Imh0dHBzOi8vbG9naW4tc2FuZGJveC5zYWZldHJlay5pby8iLCJzdWIiOiJzbXN8NWFiNzNmZjhhNjgwM2E5MTkxMWU3ZTk3IiwiYXVkIjpbImh0dHBzOi8vYXBpLXNhbmRib3guc2FmZXRyZWsuaW8iLCJodHRwczovL3NhZmV0cmVrLXNhbmRib3guYXV0aDAuY29tL3VzZXJpbmZvIl0sImlhdCI6MTUyMTk2MDUzMSwiZXhwIjoxNTIxOTk2NTMxLCJhenAiOiJtNXFYRjV6dE9kVDRjZFF0VWJaVDJnckJoRjE4N3Z3NiIsInNjb3BlIjoib3BlbmlkIHBob25lIG9mZmxpbmVfYWNjZXNzIn0.dSwNMz4r3DOM2ylb3Mn_czFy3pusMSaiMULF-dl1HjRZs1XD7_2YU1loJJZkuj1oOyqcIIt5s2P681Oly6RccMsWxPXmCWeJFpeP7F377mK-qCSHPATVotSFep0Igveo14_SdltbGCeDHRGoJYeE16fbiEz67yfpYHDZAsprLld0H4SSj5sqbggxkvyV_Ht_uC7Za-J3ohjbzhxYu8Y3Sm5x-28nE2LXJ7CkiBaji2TmlZ_aSP6WoZ2EfpMgC9Hjl89XN85TP3gPc0amh20f1suWXigQNuTVIKhDAkwbIKnyo7hbP51sWxosN583x54cVa2S-qs8_OUvts8z9MZDUA`
},
contentType: 'application/json',
dataType: 'json',
data: data,
success: (data) => {
log('Alarm created successfully! Server response:\n', JSON.stringify(data, null, 2), '\nAlarm status will reset in 10s.')
$('.alarm').addClass('alarm-red')
$('.alarm-status').text('Alarm created! Check console for JSON response.')
},
error: (xhr, status, err) => { logErr('Error:', err) },
complete: () => {
state.set('status', 'active-alarm')
setTimeout(() => {
state.set('status', 'connected')
$('.alarm').removeClass('alarm-red')
$('.alarm-status').text('')
log('Alarm status reset!')
}, 10000)
}
})
} else {
logErr('No valid access_token found! Connect to SafeTrek before requesting Alarm creation.')
}
}
})
*/
139 changes: 139 additions & 0 deletions central-server/public/script.js
View file
@@ -0,0 +1,139 @@
var pageIndex = 0;

function renderPage(){
if (pageIndex==pages.length-1){$('#downarrow').hide();}else{$('#downarrow').show();}
$('#viewbox').hide().fadeIn(750);
$('#main').html(pages[pageIndex]['html']);
$(('#title_'+pageIndex)).toggleClass('active');
if(pages[pageIndex].hasOwnProperty('color')){
renderColor(pages[pageIndex]['color']);
}else{
renderColor('primary');
}
}

function createLinks(){
for (var i= 0; i < pages.length; i++){
if (pages[i].hasOwnProperty('title')){
$('#header').append("<a class='head-link' href='#' id='title_"+i+"' >"+pages[i]['title']+"</a>");
}
}
}
$(window).ready(function(){
$('#downarrow').on("click",function(){
renderNextPage();
});
});

$(window).ready(function(){
$('.head-link').on("click",function(){
renderPageByIndex($(this).attr('id').split('_')[1]);
});
});
function renderPageByIndex(index){
$(('#title_'+pageIndex)).toggleClass('active');
pageIndex=index;
renderPage();
}
function renderNextPage(){
if (pageIndex<pages.length-1){
$(('#title_'+pageIndex)).toggleClass('active');
pageIndex++;
renderPage();
}
}

function renderPrevPage(){
if (pageIndex>0){
$(('#title_'+pageIndex)).toggleClass('active');
pageIndex--;
renderPage();
}
}

function removeColors(){
$('#container').removeClass('primary');
$('#container').removeClass('default');
$('#container').removeClass('info');
$('#container').removeClass('warning');
$('#container').removeClass('danger');
$('#container').removeClass('secondary');
$('#container').removeClass('dark');
$('#container').removeClass('light');
}

function renderPrimary(){
removeColors();
$('#container').addClass('primary');
}

function renderSecondary(){
removeColors();
$('#container').addClass('secondary');
}

function renderSuccess(){
removeColors();
$('#container').addClass('success');
}

function renderInfo(){
removeColors();
$('#container').addClass('info');
}

function renderWarning(){
removeColors();
$('#container').addClass('warning');
}

function renderDanger(){
removeColors();
$('#container').addClass('danger');
}

function renderDark(){
removeColors();
$('#container').addClass('dark');
}

function renderLight(){
removeColors();
$('#container').addClass('light');
}

function renderRandom(){
var colorStates=['default','primary','warning','danger','info','secondary','dark','light'];
removeColors();
$('#container').addClass(colorStates[Math.floor(Math.random()*colorStates.length)]);
}
function renderColor(color){
var colorStates=['default','primary','warning','danger','info','secondary','dark','light'];
removeColors();
if (colorStates.includes(color)){
$('#container').addClass(color);
}else{
$('#container').addClass('primary');
}
}

$(window).ready(function(){
$(window).bind('wheel', function(e){
if(e.originalEvent.deltaY > 0){
renderNextPage();
}
else{
renderPrevPage();
}
})
$(window).delay(200);
});

/*
$(document).ready(function(){
$('#downarrow').on('click',renderNextPage());
});
*/

createLinks();
renderPage();//Render the first page

0 comments on commit 9be8628

Please sign in to comment.