rusefi
/
msqur
mirror of https://github.com/rusefi/msqur.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

upload front good enough

This commit is contained in:
nearwood 2014-10-13 12:32:22 -04:00
parent 066a7b0e1c
commit 04c7ca9c68
6 changed files with 145 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
README.md Normal file
View File

@ -0,0 +1,48 @@
# MSQur #
'Masker' for lack of better name.
MegaSquirt MSQ file sharing and viewing site.
# TODO #
1. Upload file
1. Store files in DB instead of FS? Store gzipped
1. Parse File, show basic info
1. Show Fuel Table
1. Show Timing Table
1. Add Ads
1. Show extended info (warmup, etc.)
1. Allow download
1. Allow export of just fuel/spark tables (msqpart, .table)
1. Sign-in?
1. Updating/Versioning/Differential MSQ info
Uploader (user)/Manager (admin)
Parser
Displayer
### What is this repository for? ###
* Quick summary
* Version
* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
### How do I get set up? ###
* Summary of set up
* Configuration
* Dependencies
* Database configuration
* How to run tests
* Deployment instructions
### Contribution guidelines ###
* Writing tests
* Code review
* Other guidelines
### Who do I talk to? ###
* Repo owner or admin
* Other community or team contact

5
footer.php Normal file
View File

@ -0,0 +1,5 @@
<div class="footer">
Apache PHP AngularJS
</div>
</body>
</html>

20
header.php Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>TuneShare</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="msqur.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="msqur.js"></script>
</head>
<body>
<div id="navigation"><button id="btnUpload">Upload</button></div>
<div id="upload" style="display:none;">
<div id="fileDropZone">Drop files here
<input type="file" id="fileSelect" name="files[]" multiple />
</div>
<output id="fileList"></output>
</div>

114
index.php
View File

@ -1,112 +1,6 @@
<!DOCTYPE html>
<html ng-app="TuneShare">
<head>
<title>TuneShare</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="header">
TuneShare - Upload your tunes
</div>
<br/>
<div id='upload' ng-controller='UploadController'>
<form id="fileupload" action="/" method="POST" enctype="multipart/form-data" data-ng-controller="UploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
<a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
<a data-ng-switch-default data-ng-href="server/php/view.php?tune={{file.name}}" title="{{file.name}}">View</a>
</span>
<span data-ng-switch-default>{{file.name}}</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</form>
<br/>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Upload Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>The maximum file size for uploads in this demo is <strong>X MB</strong>.</li>
<li>Only MegaTune/TunerStudio (<strong>MSQ</strong>) files are allowed.</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
<li>Please refer to the <a>help</a> for more information.</li>
</ul>
</div>
</div>
</div>
<?php require('header.php'); ?>
<div id='content'>
Recent Tunes
Bleh
</div>
<div class="footer">
Apache PHP AngularJS<br/>
Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.
</div>
</body>
</html>
<?php require('footer.php'); ?>

9
msqur.css Normal file
View File

@ -0,0 +1,9 @@
#fileDropZone {
width: 320px;
border: 2px dashed #bbb;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold 'Vollkorn';
color: #bbb;
}

59
msqur.js Normal file
View File

@ -0,0 +1,59 @@
$(function() {
$('div#upload').dialog({
modal: true,
autoOpen: false,
title: "Upload Tune Files",
width: "450px",
buttons: {
Upload: function() {},
Cancel: function() { $(this).dialog('close'); }
}
});
$('#btnUpload').click(function(e) {
if (window.File && window.FileReader && window.FileList && window.Blob)
{
$('div#upload').dialog('open');
} else {
alert('The File APIs are not fully supported in this browser.');
//TODO no ajax file upload
}
});
function uploadAdd(e)
{
e.stopPropagation();
e.preventDefault();
var files = e.target.files || e.dataTransfer.files
//TODO type check
var output = [];
for (var i = 0, f; f = files[i]; ++i)
{
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
$('output#fileList').html('<ul>' + output.join('') + '</ul>');
}
function uploadDragOver(e)
{
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
function upload(files)
{
}
$('input#fileSelect').change(uploadAdd);
var dropZone = document.getElementById('fileDropZone');
dropZone.addEventListener('dragover', uploadDragOver);
dropZone.addEventListener('drop', uploadAdd);
});