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 PIL import Image, ImageDraw
from io import BytesIO
from os import listdir
from os.path import isfile, join
from werkzeug.utils import secure_filename
app = Flask(__name__)
@ -67,6 +69,41 @@ def get_locationURL(locationID):
r.close()
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>')
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;'
@ -196,8 +233,6 @@ def alter(partID):
description=request.form['description'],
datasheet=datasheet_filename,
location_id=request.form['location_id'])
return '{"status":"ok"}'
@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