mirror of
https://github.com/sstent/node.git
synced 2026-01-26 07:02:31 +00:00
added file upload, editing activities, parsing xml to json, autocomplete on exercise field from exercise db
This commit is contained in:
266
app/index.html
266
app/index.html
@@ -12,14 +12,16 @@
|
||||
<script src="/static/form2js/jquery.toObject.js"></script>
|
||||
<script src="/static/form2js/json2.js"></script>
|
||||
<link rel="stylesheet" href="/static/stylesheets/smoothness/jquery-ui-1.8.20.custom.css"/>
|
||||
<link rel="stylesheet" href="/static/stylesheets/jui_style.css"/>
|
||||
<link rel="stylesheet" href="/static/stylesheets/style.css"/>
|
||||
<script id="movieTemplate1" type="text/x-jsrender">
|
||||
<h3>{{:activity.date}} - {{:activity.name}}</h3>
|
||||
<h3>{{:Activities.Activity.date}} - {{:Activities.Activity.name}}</h3>
|
||||
<div class="workoutdata">
|
||||
<h4>{{:activity.date}} - {{:activity.name}}</h4>
|
||||
<h4>{{:Activities.Activity.date}} - {{:Activities.Activity.name}}</h4>
|
||||
<a href=# class="activitydelete" title="{{:_id}}" >Delete</a>
|
||||
{{if activity.lap}}
|
||||
{{for activity.lap}}
|
||||
<a href=# class="activityedit" title="{{:_id}}" >Edit</a>
|
||||
{{if Activities.Activity.Lap}}
|
||||
{{for Activities.Activity.Lap}}
|
||||
<p>LAP {{:#index+1}} -
|
||||
{{if run}} Run - {{:run.name}} - {{:run.distance}}KM in {{:run.time}}{{/if}}
|
||||
{{if bike}} Bike - {{:bike.name}} - {{:bike.distance}} x {{:bike.time}}{{/if}}
|
||||
@@ -36,8 +38,13 @@
|
||||
<script type='text/javascript'>
|
||||
$(document).ready(function() {
|
||||
var socket = io.connect();
|
||||
exercise_autocompletedata = "unset";
|
||||
bike_autocompletedata = "unset";
|
||||
|
||||
socket.emit('getactivites', 'please');
|
||||
socket.emit('getexercises', 'please');
|
||||
socket.emit('getexpresso', 'please');
|
||||
|
||||
|
||||
socket.on('populateactivities', function(json) {
|
||||
console.log('#poulate recieved');
|
||||
@@ -55,23 +62,94 @@
|
||||
});
|
||||
|
||||
});
|
||||
////populate exercise sortable
|
||||
//poulate activity by id
|
||||
socket.on('populateactivitybyid', function(json) {
|
||||
//set document id
|
||||
$('span.ActivityID').attr('docid',json._id);
|
||||
//poulate name
|
||||
$('input[name="Activities.Activity.name"]').attr('value', json.Activities.Activity.name)
|
||||
//poulate date
|
||||
$('input[name="Activities.Activity.date"]').attr('value', json.Activities.Activity.date)
|
||||
// Activities.Activity.date
|
||||
// for each lap
|
||||
if ("Lap" in json.Activities.Activity) {
|
||||
var array = json.Activities.Activity.Lap;
|
||||
$.each(array, function(index, value) {
|
||||
////if run
|
||||
if ("run" in value) { AddPopulatedLap("Run", value.run.name, value.run.time, value.run.distance, "", "" , "")};
|
||||
////if bike
|
||||
if ("bike" in value) { AddPopulatedLap("Bike", value.bike.name, value.bike.time, value.bike.distance, "", "" , "")};
|
||||
////if cardio
|
||||
if ("cardio" in value) { AddPopulatedLap("Cardio", value.cardio.name, value.cardio.time, value.cardio.distance, "", "" , "")};
|
||||
////if exercise
|
||||
if ("exercise" in value) { AddPopulatedLap("Exercise", value.exercise.name, "", "", value.exercise.sets, value.exercise.reps , value.exercise.weight)};
|
||||
////if rest
|
||||
if ("rest" in value) { AddPopulatedLap("Rest", "", "", "", "", "" , "")};
|
||||
});
|
||||
|
||||
};
|
||||
///refresh tabvle
|
||||
|
||||
$('#sortable').trigger('sortupdate');
|
||||
|
||||
//switch to tab
|
||||
$( "#tabs" ).tabs( "select" , 1 )
|
||||
|
||||
});
|
||||
function AddPopulatedLap(type, name, time, distance, set, reps, weight) {
|
||||
var newElem = $('.new-lap').clone(true).attr('style', 'display: block');
|
||||
$(newElem).removeClass('new-lap');
|
||||
$(newElem).appendTo('#sortable');
|
||||
$(newElem).children('.laptype').val(type).trigger('change');
|
||||
$(newElem).children('input').attr('disabled',false);
|
||||
$(newElem).find('.lapname').attr('value', name);
|
||||
$(newElem).find('.lapdistance').attr('value', distance);
|
||||
$(newElem).find('.laptime').attr('value', time);
|
||||
$(newElem).sortable( "refresh" );
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
var addtype = $(this).attr('value');
|
||||
var newElem = $('.new-' + addtype).clone(true).attr('style', 'display: block');
|
||||
$(newElem).removeClass("new-" + addtype);
|
||||
$(newElem).children('input').attr('disabled',false);
|
||||
$(newElem).appendTo('#sortable');
|
||||
$(newElem).sortable( "refresh" );
|
||||
$('#sortable').trigger('sortupdate');
|
||||
|
||||
|
||||
|
||||
////populate exercise sortable
|
||||
socket.on('populateexercises', function(json) {
|
||||
console.log('#exercises recieved' + JSON.stringify(json, null, ' '));
|
||||
var content = "";
|
||||
$('ul#sortableexercises li').remove();
|
||||
$( "ul#sortableexercises" ).append('<li style="display: none"><input type="text" name="_id" value="'+ json[0]._id + '"></li>')
|
||||
$('span.ExerciseID').attr('docid',json[0]._id);
|
||||
//$( "ul#sortableexercises" ).append('<li style="display: none"><input type="text" name="_id" value="'+ json[0]._id + '"></li>')
|
||||
///// for loop
|
||||
var array = json[0].exercise.name;
|
||||
console.log('#exercises recieved' + array );
|
||||
exercise_autocompletedata = array;
|
||||
$('#sortable').trigger('sortupdate');
|
||||
$.each(array, function(index, value) {
|
||||
console.log('beep' + value );
|
||||
console.log('index-' + index);
|
||||
console.log('value-' + value);
|
||||
$( "ul#sortableexercises" ).append('<li class=ui-state-default><input type="text" name="exercise.name[]" value="'+ value + '"></li>')
|
||||
});
|
||||
//end for
|
||||
//create sortable
|
||||
|
||||
////populate expresso sortable
|
||||
socket.on('populateexpresso', function(json) {
|
||||
console.log('#tracks recieved' + JSON.stringify(json, null, ' '));
|
||||
var content = "";
|
||||
$('ul#sortableexpresso li').remove();
|
||||
$('span.ExpressoID').attr('docid',json[0]._id);
|
||||
var barray = json[0].track.name;
|
||||
bike_autocompletedata = barray;
|
||||
$('#sortable').trigger('sortupdate');
|
||||
$.each(barray, function(index, value) {
|
||||
$( "ul#sortableexpresso" ).append('<li class=ui-state-default><input type="text" name="track.name[]" value="'+ value + '"></li>')
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -81,6 +159,7 @@ $( "#tabs" ).tabs('select' , 0);
|
||||
$("button").button();
|
||||
//sets datepickers
|
||||
$( "#datepicker" ).datepicker();
|
||||
|
||||
|
||||
|
||||
$( "#tabs" ).bind( "tabsselect", function(event, ui) {
|
||||
@@ -109,7 +188,11 @@ $('#ActivityList').delegate('a.activitydelete', 'click', function() {
|
||||
socket.emit('delactivity', $(this).attr('title'));
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$('#ActivityList').delegate('a.activityedit', 'click', function() {
|
||||
socket.emit('getactivitybyid', $(this).attr('title'));
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$("#sortable").sortable({
|
||||
@@ -122,20 +205,26 @@ $('#ActivityList').delegate('a.activitydelete', 'click', function() {
|
||||
});
|
||||
|
||||
$("#sortable").bind('sortupdate', function(event, ui) {
|
||||
$('#sortable li').each(function(){
|
||||
$('#sortable li').each(function(){
|
||||
var itemindex= $(this).index()
|
||||
$(this).children('label.uiindex').html((itemindex +1));
|
||||
$(this).children('input').each(function(){
|
||||
$(this).children('label.uiindex').html('Lap '+ itemindex );
|
||||
$(this).find('input').each(function(){
|
||||
var newname = $(this).attr('name').replace(/\[[0-9]*\]/,'[' + itemindex + ']');
|
||||
console.log('newname' + newname );
|
||||
$(this).attr("name",newname);
|
||||
});
|
||||
});
|
||||
});
|
||||
$(this).find('input.exertags').autocomplete({source: exercise_autocompletedata});
|
||||
//select: function(event, ui) { ... }
|
||||
//$(this).find('input.biketags').autocomplete({source: bike_autocompletedata})
|
||||
console.log('exercise_autocompletedata' + JSON.stringify(exercise_autocompletedata, null, ' ') );
|
||||
console.log('bike_autocompletedata' + JSON.stringify(bike_autocompletedata, null, ' ') );
|
||||
});
|
||||
});
|
||||
|
||||
$("#sortableexercises").sortable({
|
||||
placeholder: "ui-state-highlight",
|
||||
revert: true,
|
||||
});
|
||||
$("#sortableexercises").sortable({
|
||||
placeholder: "ui-state-highlight",
|
||||
revert: true,
|
||||
});
|
||||
|
||||
|
||||
//Removes slectable element
|
||||
@@ -144,40 +233,50 @@ $('ul').on('click', '.delete',function() {
|
||||
$('#sortable').trigger('sortupdate')
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("button").button();
|
||||
$("button").button();
|
||||
|
||||
//adds selectable element
|
||||
$("button").click(function() {
|
||||
var addtype = $(this).attr('value');
|
||||
console.log('click');
|
||||
var newElem = $('.new-' + addtype).clone(true).attr('style', 'display: block');
|
||||
$(newElem).removeClass("new-" + addtype);
|
||||
$(newElem).children('input').attr('disabled',false);
|
||||
$(newElem).appendTo('#sortable');
|
||||
$(newElem).sortable( "refresh" );
|
||||
$('#sortable').trigger('sortupdate');
|
||||
var addtype = $(this).attr('value');
|
||||
var newElem = $('.new-' + addtype).clone(true).attr('style', 'display: block');
|
||||
$(newElem).removeClass("new-" + addtype);
|
||||
$(newElem).children('input').attr('disabled',false);
|
||||
$(newElem).appendTo('#sortable');
|
||||
$(newElem).sortable( "refresh" );
|
||||
$('#sortable').trigger('sortupdate');
|
||||
});
|
||||
|
||||
$("button.AddExercise").click(function() {
|
||||
$( "ul#sortableexercises" ).append('<li class=ui-state-default><input type="text" name="exercise.name[]" hint="Name" placeholder="Exercise Name"></li>')
|
||||
});
|
||||
|
||||
$('#Activity').find('input.datepicker').datepicker();
|
||||
$('#Activity').find('input.datepicker').datepicker('setDate', new Date());
|
||||
$("button.AddExercise").click(function() {
|
||||
$( "ul#sortableexercises" ).append('<li class=ui-state-default><input type="text" name="exercise.name[]" hint="Name" placeholder="Exercise Name"></li>')
|
||||
});
|
||||
$("button.AddExpresso").click(function() {
|
||||
$( "ul#sortableexpresso" ).append('<li class=ui-state-default><input type="text" name="track.name[]" hint="Name" placeholder="Track Name"><input type="text" name="track.distance[]" hint="Name" placeholder="Distance"><input type="text" name="track.peak[]" hint="Name" placeholder="Peak"></li>')
|
||||
});
|
||||
$('#Activity').find('input.datepicker').datepicker();
|
||||
$('#Activity').find('input.datepicker').datepicker('setDate', new Date());
|
||||
|
||||
|
||||
|
||||
$('#save').click(function() {
|
||||
var docid =$(this).closest('span').attr('docid');
|
||||
var selector= "#myForm"
|
||||
//var formDataFirst = $(selector).toObject({mode: 'first'});
|
||||
var formDataAll = $(selector).toObject({mode: 'all'});
|
||||
socket.emit('addactivity', formDataAll);
|
||||
|
||||
console.log('All ', JSON.stringify(formDataAll, null, ' '));
|
||||
// to prevent the page from changing
|
||||
$('ul#sortable li').remove();
|
||||
socket.emit('addactivity', formDataAll[0], docid);
|
||||
//console.log('All ', JSON.stringify(formDataAll[0], null, ' '));
|
||||
$('ul#sortable li').remove('.removable');
|
||||
$('#Activity').find('input').attr('value','');
|
||||
$( "#tabs" ).tabs( "select" , 0 )
|
||||
$('#Activity').find('input.datepicker').datepicker();
|
||||
$('#Activity').find('input.datepicker').datepicker('setDate', new Date());
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#savecopy').click(function() {
|
||||
var selector= "#myForm"
|
||||
var formDataAll = $(selector).toObject({mode: 'all'});
|
||||
socket.emit('addactivity', formDataAll[0]);
|
||||
//console.log('All ', JSON.stringify(formDataAll[0], null, ' '));
|
||||
$('ul#sortable li').remove('.removable');
|
||||
$('#Activity').find('input').attr('value','');
|
||||
$( "#tabs" ).tabs( "select" , 0 )
|
||||
$('#Activity').find('input.datepicker').datepicker();
|
||||
@@ -186,22 +285,37 @@ $( "ul#sortableexercises" ).append('<li class=ui-state-default><input type="text
|
||||
});
|
||||
|
||||
$('#saveexercises').click(function() {
|
||||
var docid =$(this).closest('span').attr('docid');
|
||||
var selector= "#ExerciseForm"
|
||||
//var formDataFirst = $(selector).toObject({mode: 'first'});
|
||||
var formDataAll = $(selector).toObject({mode: 'all'});
|
||||
socket.emit('updateexercises', formDataAll);
|
||||
socket.emit('updateexercises', formDataAll[0], docid);
|
||||
|
||||
console.log('All ', JSON.stringify(formDataAll, null, ' '));
|
||||
// to prevent the page from changing
|
||||
$('ul#sortableexercises li').remove();
|
||||
$( "#tabs" ).tabs( "select" , 0 )
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#saveexpresso').click(function() {
|
||||
var docid =$(this).closest('span').attr('docid');
|
||||
var selector= "#ExpressoForm"
|
||||
var formDataAll = $(selector).toObject({mode: 'all'});
|
||||
socket.emit('updateexpresso', formDataAll[0], docid);
|
||||
|
||||
console.log('All ', JSON.stringify(formDataAll, null, ' '));
|
||||
// to prevent the page from changing
|
||||
$('ul#sortableexpresso li').remove();
|
||||
$( "#tabs" ).tabs( "select" , 0 )
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$('#cancelform').click(function() {
|
||||
$('ul#sortable li').remove();
|
||||
$('ul#sortable li').remove('.removable');
|
||||
$('#Activity').find('input').attr('value','');
|
||||
$('#Activity').find('input.datepicker').datepicker();
|
||||
$('#Activity').find('input.datepicker').datepicker('setDate', new Date());
|
||||
return false;
|
||||
});
|
||||
|
||||
@@ -215,22 +329,22 @@ $('ul').on('change', '.laptype',function() {
|
||||
console.log ('value= ' + $(this).val() );
|
||||
switch($(this).val()) {
|
||||
case "Run":
|
||||
$(this).siblings('span').html('<input type="text" name="activity.lap[0].run.name" placeholder="Location"><input type="text" name="activity.lap[0].run.time" placeholder="hh:mm:ss"><a href=# class=delete>delete</a>');
|
||||
$(this).siblings('span').html('<input type="text" class="lapname" name="Activities.Activity.Lap[0].run.name" placeholder="Location"><input type="text" class="lapdistance" name="Activities.Activity.Lap[0].run.distance" placeholder="distance"><input type="text" class="laptime" name="Activities.Activity.Lap[0].run.time" placeholder="hh:mm:ss"><a href=# class=delete>delete</a>');
|
||||
break;
|
||||
case "Bike":
|
||||
$(this).siblings('span').html('<input type="text" name="activity.lap[0].bike.name" hint="Name" placeholder="Track Name"><input type="text" name="activity.lap[0].bike.distance" placeholder="Distance"> <input type="text" name="activity.lap[0].bike.time" placeholder="hh:mm:ss"><a href=# class=delete>delete</a>');
|
||||
$(this).siblings('span').html('<input type="text" class="lapname biketags" name="Activities.Activity.Lap[0].bike.name" hint="Name" placeholder="Track Name"><input type="text" class="lapdistance" name="Activities.Activity.Lap[0].bike.distance" placeholder="Distance"> <input type="text" class="laptime" name="Activities.Activity.Lap[0].bike.time" placeholder="hh:mm:ss"><a href=# class=delete>delete</a>');
|
||||
break;
|
||||
case "Cardio":
|
||||
$(this).siblings('span').html('<input type="text" name="activity.lap[0].cardio.name" placeholder="Machine"><input type="text" name="activity.lap[0].cardio.distance" placeholder="Distance"><input type="text" name="activity.lap[0].cardio.time" placeholder="hh:mm:ss"><a href=# class=delete>delete</a>');
|
||||
$(this).siblings('span').html('<input type="text" class="lapname" name="Activities.Activity.Lap[0].cardio.name" placeholder="Machine"><input type="text" class="lapdistance" name="Activities.Activity.Lap[0].cardio.distance" placeholder="Distance"><input type="text" class="laptime" name="Activities.Activity.Lap[0].cardio.time" placeholder="hh:mm:ss"><a href=# class=delete>delete</a>');
|
||||
break;
|
||||
case "Exercise":
|
||||
$(this).siblings('span').html('<input type="text" name="activity.lap[0].exercise.name" placeholder="Exercise Name"> <input type="text" name="activity.lap[0].exercise.sets" placeholder="Sets"><input type="text" name="activity.lap[0].exercise.sets" placeholder="Reps"><a href=# class=delete>delete</a>');
|
||||
$(this).siblings('span').html('<input type="text" class="lapname exertags" name="Activities.Activity.Lap[0].exercise.name" placeholder="Exercise Name"><input type="text" name="Activities.Activity.Lap[0].exercise.sets" placeholder="Sets"><input type="text" name="Activities.Activity.Lap[0].exercise.sets" placeholder="Reps"><a href=# class=delete>delete</a>');
|
||||
break;
|
||||
case "Rest":
|
||||
$(this).siblings('span').html('<input type="text" name="activity.lap[0].rest[0]" placeholder="Rest"><a href=# class=delete>delete</a>');
|
||||
$(this).siblings('span').html('<input type="text" class="lapname" name="Activities.Activity.Lap[0].rest[0]" placeholder="Rest"><a href=# class=delete>delete</a>');
|
||||
break;
|
||||
};
|
||||
|
||||
$('#sortable').trigger('sortupdate')
|
||||
});
|
||||
|
||||
|
||||
@@ -244,8 +358,7 @@ $('ul').on('change', '.laptype',function() {
|
||||
<div id="logo"><H1>Workout Tracker</h1></div>
|
||||
<div id="display">
|
||||
<ul>
|
||||
<li style="display: none" class="new-lap ui-state-highlight">
|
||||
<!-- <label class="uiindex">-->
|
||||
<li style="display: none" class="new-lap ui-state-default removable">
|
||||
<label class="uiindex"></label>
|
||||
<select class="laptype">
|
||||
<option value="">Select...</option>
|
||||
@@ -255,7 +368,7 @@ $('ul').on('change', '.laptype',function() {
|
||||
<option value="Exercise">Exercise</option>
|
||||
<option value="Rest">Rest</option>
|
||||
</select>
|
||||
<span></span>
|
||||
<span><a href=# class=delete>delete</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -265,39 +378,58 @@ $('ul').on('change', '.laptype',function() {
|
||||
<li><a href="#Activity">Add Activity</a></li>
|
||||
<li><a href="#ExerciseEditor">Edit Exercises</a></li>
|
||||
<li><a href="#ExpressoEditor">Edit Expresso Tracks</a></li>
|
||||
<li><a href="#GarminDataUpload">Upload Garmin Data</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="Activity">
|
||||
<span class="ActivityID">
|
||||
<button class="Add" value="lap">Add Lap</button>
|
||||
<form id="myForm">
|
||||
<ul id="activityheader">
|
||||
<li><label>Activity Name</label><input type="text" name="activity.name" placeholder="Location"><label>Date</label><input type="text" class="datepicker" name="activity.date"></li>
|
||||
</ul>
|
||||
<ul id="sortable">
|
||||
<ul id="sortable" class="Activities">
|
||||
<li class="ui-state-default"><label>Activity Name</label><input type="text" name="Activities.Activity.name" placeholder="Location"><label>Date</label><input type="text" class="datepicker" name="Activities.Activity.date"></li>
|
||||
</ul>
|
||||
<button type="submit" id="save" value="Save">Save</button>
|
||||
<button type="submit" id="savecopy" value="Savecopy">Save Copy</button>
|
||||
<button type="button" id="cancelform" value="Cancel"/>Cancel</button>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="ExerciseEditor" >
|
||||
<span class="ExerciseID">
|
||||
<button class="AddExercise">Add Exercise</button>
|
||||
<button type="button" class="cancel" value="Cancel"/>Cancel</button>
|
||||
CODE FOR EDITING EXERCISES
|
||||
<form id="ExerciseForm">
|
||||
<ul id="sortableexercises">
|
||||
</ul>
|
||||
<button type="submit" id="saveexercises" value="Save">Save</button>
|
||||
<button type="button" id="cancelexerciseform" value="Cancel"/>Cancel</button>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="ExpressoEditor" >
|
||||
<span class="ExpressoID">
|
||||
<button class="AddExpresso">Add Track</button>
|
||||
<button type="button" class="cancel" value="Cancel"/>Cancel</button>
|
||||
CODE FOR EDITING EXPRESSO TRACKS
|
||||
<ul id="sortableexpresso">
|
||||
<form id="ExpressoForm">
|
||||
<ul id="sortableexpresso">
|
||||
</ul>
|
||||
<button type="submit" id="saveexpresso" value="Save">Save</button>
|
||||
<button type="button" id="cancelexpressoform" value="Cancel"/>Cancel</button>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="GarminDataUpload" >
|
||||
<button type="button" class="cancel" value="Cancel"/>Cancel</button>
|
||||
<form action="/upload" enctype="multipart/form-data" method="post">
|
||||
<input type="text" name="title"><br>
|
||||
<input type="file" name="upload" multiple="multiple"><br>
|
||||
<input type="submit" value="Upload">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="Activities">
|
||||
|
||||
Reference in New Issue
Block a user