location editor (MVP - can only add locations)

master
Marek Baczynski 6 years ago
parent d131bcede6
commit 00a2d6f070

@ -9,6 +9,8 @@ from flask import Flask
from flask import render_template, send_from_directory, request, Response, send_file from flask import render_template, send_from_directory, request, Response, send_file
from PIL import Image, ImageDraw from PIL import Image, ImageDraw
from io import BytesIO from io import BytesIO
from os import listdir
from os.path import isfile, join
from werkzeug.utils import secure_filename from werkzeug.utils import secure_filename
app = Flask(__name__) app = Flask(__name__)
@ -67,6 +69,41 @@ def get_locationURL(locationID):
r.close() r.close()
return l[0][0] return l[0][0]
@app.route('/parts/locationEditor')
def locationEditor():
query = 'select * from locations order by name;'
r = db_engine.execute(text(query))
locations = []
for row in r:
locations.append(dict(row))
r.close()
know_not_map_files = ['here.png', '404.png', '.DS_Store']
mapfiles = [f for f in listdir('maps') if isfile(join('maps', f)) and f not in know_not_map_files]
return render_template('locationEditor.html', locations=locations, mapfiles=mapfiles, defaultMapfile="elab.png")
@app.route('/parts/alterLocation/<locationID>', methods=['POST'])
# @requires_auth
def alterLocation(locationID):
locationID = int(locationID)
s = ''
if locationID < 0:
# New entry
s = 'insert into locations (name, map) '
s += 'values (:name, :map);'
s = text(s)
r = db_engine.execute(s,name=request.form['name'],map=request.form['map']);
r.close()
return '{"status":"ok"}'
else:
# Modify entry
s = 'update locations '
s += 'set name=:name, map=:map, '
s += 'where id=:locationID;'
s = text(s)
r = db_engine.execute(s, name=request.form['name'],map=request.form['map'],locationID=locationID);
r.close()
return '{"status":"ok"}'
@app.route('/parts/getpartinfo/<partID>') @app.route('/parts/getpartinfo/<partID>')
def get_part_info(partID): def get_part_info(partID):
s = 'select * from parts as p inner join locations as l on p.location_id=l.id where p.id = :id;' s = 'select * from parts as p inner join locations as l on p.location_id=l.id where p.id = :id;'
@ -196,8 +233,6 @@ def alter(partID):
description=request.form['description'], description=request.form['description'],
datasheet=datasheet_filename, datasheet=datasheet_filename,
location_id=request.form['location_id']) location_id=request.form['location_id'])
return '{"status":"ok"}' return '{"status":"ok"}'
@app.route('/parts/delete/<partID>') @app.route('/parts/delete/<partID>')

@ -0,0 +1,67 @@
function new_location_entry() {
$('#location-name-input').text('');
$('#location-name-input').show();
$('#mapfile-input').show();
init_Location_edit(-1);
overlay_in();
}
function init_Location_edit(locationID) {
$('table#details tr#datasheet td input').show();
var newButton = '<div class="round-button-left"><a href="#" onclick="saveLocation(' + locationID + ')"><i class="fa fa-check" aria-hidden="true"></i></a></div>';
$('.round-button-left').replaceWith(newButton);
}
function update_clickable_map() {
var selected_map_file = $('#mapfile-input').val();
$('#clickablemap').attr('src', 'map/' + selected_map_file);
}
function saveLocation(locationID) {
var map_v = $('#clickablemap').attr('src').substring(4);
var name_v = $('#location-name-input').val();
if(name_v.length > 100) {
alert('Name too long (max 100 characters).')
return;
}
var data = new FormData();
data.append('map', map_v);
data.append('name', name_v)
$.ajax({
url: rootURL + 'alterLocation/' + locationID,
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
success: function(data) {
alert("k.");
},
error: function() {
alert("Couldn't update the part information. Please retry.");
}
});
end_edit();
$('#edit-button').click(function() {
init_edit(partID);
});
}
function placeMarker(locationID){
var $img = $('#clickablemap');
var currentClickPosX = event.pageX - $img.offset().left;
var currentClickPosY = event.pageY - $img.offset().top;
var correctX = (($img.prop('naturalWidth') / $img.width()) * currentClickPosX).toFixed(0);
var correctY = (($img.prop('naturalHeight') / $img.height()) * currentClickPosY).toFixed(0);
// $("#mapURL").html("elab.png?x=" + correctX + "&y=" + correctY);
$("#clickablemap").attr("src", "map/" + $("#mapfile-input").val() + "?x=" + correctX + "&y=" + correctY);
}

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ELAB Part Search Engine</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script src="https://use.fontawesome.com/2fef7be393.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='common.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='locationEditorScript.js') }}"></script>
</head>
<body>
<h1>ELAB Part Search Engine - LOCATION EDITOR</h1>
<p>Looking for a place to store your obsolete ICs discontinued years ago? Just toss them anywhere and mark that location here!</p>
<table id="results">
<tr>
<th id="id">ID</th>
<th id="location">Location name</th>
<th id="mapURL">Map URL</th>
</tr>
{% for location in locations %}
<tr>
<td>{{location['id']}}</td>
<td>{{location['name']}}</td>
<td>{{location['map']}}</td>
</tr>
{% endfor %}
</table>
<div class="bottom-spacer"></div>
<div class="overlay">
<h2>Part Details</h2>
<table id="details">
<tr><td>Name</td></tr>
<tr><td><p></p><input type="text" name="location-name-input" id="location-name-input" placeholder="Location name" class="pinfo-input"/></td></tr>
<tr><td>MAP</td></tr>
<tr><td>
<select class="pinfo-input" onchange="update_clickable_map()" name="mapfile-input" id="mapfile-input">
{% for mapfile in mapfiles %}
<option value="{{mapfile}}" {% if mapfile==defaultMapfile %}selected="true"{% endif %}>{{mapfile}}</option>
{% endfor %}
</select>
</td></tr>
<tr><td>And click on the map to place the marker</td></tr>
</table>
<img src="map/{{defaultMapfile}}" id="clickablemap" class="map" onclick="placeMarker()"/>
<div class="round-button-left"><a href="#" id="edit-button"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>
<div class="round-button"><a href="#" id="delete-button"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
<div class="small-square-button"><a href="#" onclick="overlay_out()"><i class="fa fa-times" aria-hidden="true"></i></a></div>
</div>
<div class="round-floating-button"><a href="#" onclick="new_location_entry()"><i class="fa fa-plus" aria-hidden="true"></i></a></div>
</body>
</html>
Loading…
Cancel
Save