lets add settings new to css
This commit is contained in:
@@ -2,72 +2,13 @@
|
||||
{% block title %}Create Warehouse Locations{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
/* Barcode label preview */
|
||||
#barcode-label-preview {
|
||||
width: 8cm;
|
||||
height: 4cm;
|
||||
border: 2px solid #333;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
#barcode-label-preview .location-text {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#barcode-label-preview #location-barcode {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 90%;
|
||||
max-height: 70%;
|
||||
}
|
||||
|
||||
#barcode-label-preview #barcode-placeholder {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.print-section {
|
||||
margin-top: 24px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.location-row.selected {
|
||||
background-color: #ffb300 !important; /* Accent color: Amber */
|
||||
color: #222 !important;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 8px rgba(255,179,0,0.12);
|
||||
border-left: 4px solid #ff9800;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.location-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.location-row:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/warehouse.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="scan-container">
|
||||
<!-- Add Warehouse Location Card -->
|
||||
<div class="card scan-form-card">
|
||||
<div class="warehouse-page-container">
|
||||
<!-- Container 1: Add Location (1 part width) -->
|
||||
<div class="warehouse-container-1">
|
||||
<h3>Add Warehouse Location</h3>
|
||||
{% if message %}
|
||||
<div class="form-message">{{ message }}</div>
|
||||
@@ -81,7 +22,7 @@
|
||||
<input type="text" name="description" maxlength="250"><br>
|
||||
<button type="submit" class="btn">Add Location</button>
|
||||
</form>
|
||||
<!-- Import from CSV content moved here -->
|
||||
<!-- Import from CSV section -->
|
||||
<div style="margin-top: 24px;">
|
||||
<h3 style="font-size: 1.1em;">Import Locations from CSV</h3>
|
||||
<div style="display: flex; flex-direction: row; gap: 16px; align-items: center;">
|
||||
@@ -89,11 +30,75 @@
|
||||
<a href="{{ url_for('warehouse.import_locations_csv') }}" class="btn" style="padding: 4px 12px; font-size: 0.95em;">Go to Import Page</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Print Barcode Section -->
|
||||
<div class="print-section">
|
||||
</div>
|
||||
|
||||
<!-- Container 2: Warehouse Locations Table (2 parts width) -->
|
||||
<div class="warehouse-container-2">
|
||||
<h3>Warehouse Locations</h3>
|
||||
<div id="location-selection-hint" style="margin-bottom: 10px; font-size: 11px; color: #666; text-align: center;">
|
||||
Click on a row to select a location for printing
|
||||
</div>
|
||||
<table class="scan-table" id="locations-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Location Code</th>
|
||||
<th>Size</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loc in locations %}
|
||||
<tr class="location-row" data-location-code="{{ loc[1] }}"
|
||||
data-location-id="{{ loc[0] }}"
|
||||
data-location-size="{{ loc[2] or '' }}"
|
||||
data-location-description="{{ loc[3] or '' }}">
|
||||
<td>{{ loc[0] }}</td>
|
||||
<td>{{ loc[1] }}</td>
|
||||
<td>{{ loc[2] or '' }}</td>
|
||||
<td>{{ loc[3] or '' }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Container 3: Edit/Delete and Print (1 part width) -->
|
||||
<div class="warehouse-container-3">
|
||||
<div class="edit-delete-card">
|
||||
<h3>Edit/Delete Selected Location</h3>
|
||||
<div id="no-selection-message" class="selection-message">
|
||||
Select a location from the table to edit or delete it.
|
||||
</div>
|
||||
<div id="selected-location-info" class="selection-info" style="display: none;">
|
||||
<strong>Selected:</strong> <span id="selected-location-display"></span>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button id="edit-location-btn" class="btn btn-info" disabled>
|
||||
✏️ Edit Selected Location
|
||||
</button>
|
||||
<button id="delete-location-btn" class="btn btn-danger" disabled>
|
||||
🗑️ Delete Selected Location
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% if session['role'] in ['administrator', 'management'] %}
|
||||
<div style="margin-top: 32px; padding: 12px; border-top: 1px solid #eee;">
|
||||
<label style="font-weight:bold;">Delete location from table</label>
|
||||
<div style="font-size:0.95em; margin-bottom:8px;">To delete a location, enter the ID of the location and press delete.<br>To delete 2 or multiple locations, enter the IDs separated by "," and then press delete.</div>
|
||||
<form method="POST" style="display:flex; gap:8px; align-items:center;" onsubmit="return confirmDeleteLocations();">
|
||||
<input type="text" name="delete_ids" placeholder="e.g. 5,7,12" style="width:160px;">
|
||||
<button type="submit" name="delete_locations" value="1" class="btn" style="padding:4px 16px;">Delete Locations</button>
|
||||
</form>
|
||||
<script>
|
||||
function confirmDeleteLocations() {
|
||||
return confirm('Do you really want to delete the selected locations?');
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
{% endif %}
|
||||
<hr style="margin: 32px 0 24px 0;">
|
||||
<h3 style="font-size: 1.1em; margin-bottom: 12px;">Print Location Barcode</h3>
|
||||
|
||||
<!-- Label Preview -->
|
||||
<div id="barcode-label-preview" style="display: flex; align-items: center; justify-content: center;">
|
||||
<div style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
@@ -104,7 +109,6 @@
|
||||
<div id="barcode-placeholder" style="color: #999; font-style: italic; text-align: center;">No location selected</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Print Controls -->
|
||||
<div style="text-align: center; margin-top: 15px;">
|
||||
<div style="margin-bottom: 10px;">
|
||||
@@ -121,51 +125,29 @@
|
||||
</button>
|
||||
<div id="print-status" style="margin-top: 8px; font-size: 11px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Location Area -->
|
||||
{% if session['role'] in ['administrator', 'management'] %}
|
||||
<div style="margin-top: 32px; padding: 12px; border-top: 1px solid #eee;">
|
||||
<label style="font-weight:bold;">Delete location from table</label>
|
||||
<div style="font-size:0.95em; margin-bottom:8px;">To delete a location, enter the ID of the location and press delete.<br>To delete 2 or multiple locations, enter the IDs separated by "," and then press delete.</div>
|
||||
<form method="POST" style="display:flex; gap:8px; align-items:center;" onsubmit="return confirmDeleteLocations();">
|
||||
<input type="text" name="delete_ids" placeholder="e.g. 5,7,12" style="width:160px;">
|
||||
<button type="submit" name="delete_locations" value="1" class="btn" style="padding:4px 16px;">Delete Locations</button>
|
||||
</form>
|
||||
<script>
|
||||
function confirmDeleteLocations() {
|
||||
return confirm('Do you really want to delete the selected locations?');
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- Locations Table Card -->
|
||||
<div class="card scan-table-card">
|
||||
<h3>Warehouse Locations</h3>
|
||||
<div id="location-selection-hint" style="margin-bottom: 10px; font-size: 11px; color: #666; text-align: center;">
|
||||
Click on a row to select a location for printing
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div id="delete-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Confirm Delete</h3>
|
||||
<span class="close" onclick="closeDeleteModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete the following location?</p>
|
||||
<table class="confirm-table">
|
||||
<tr><td><strong>ID:</strong></td><td id="delete-confirm-id"></td></tr>
|
||||
<tr><td><strong>Location Code:</strong></td><td id="delete-confirm-code"></td></tr>
|
||||
<tr><td><strong>Size:</strong></td><td id="delete-confirm-size"></td></tr>
|
||||
<tr><td><strong>Description:</strong></td><td id="delete-confirm-description"></td></tr>
|
||||
</table>
|
||||
<div class="modal-buttons">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" onclick="confirmDelete()">Delete Location</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="scan-table" id="locations-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Location Code</th>
|
||||
<th>Size</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loc in locations %}
|
||||
<tr class="location-row" data-location-code="{{ loc[1] }}">
|
||||
<td>{{ loc[0] }}</td>
|
||||
<td>{{ loc[1] }}</td>
|
||||
<td>{{ loc[2] }}</td>
|
||||
<td>{{ loc[3] }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -369,6 +351,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const locationRows = document.querySelectorAll('.location-row');
|
||||
const locationCodeDisplay = document.getElementById('location-code-display');
|
||||
const printButton = document.getElementById('print-barcode-btn');
|
||||
const editButton = document.getElementById('edit-location-btn');
|
||||
const deleteButton = document.getElementById('delete-location-btn');
|
||||
const noSelectionMessage = document.getElementById('no-selection-message');
|
||||
const selectedLocationInfo = document.getElementById('selected-location-info');
|
||||
const selectedLocationDisplay = document.getElementById('selected-location-display');
|
||||
|
||||
let selectedLocation = null;
|
||||
|
||||
locationRows.forEach(row => {
|
||||
row.addEventListener('click', function() {
|
||||
@@ -378,22 +367,49 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// Select this row
|
||||
this.classList.add('selected');
|
||||
|
||||
// Get location code
|
||||
// Get location data
|
||||
selectedLocationCode = this.dataset.locationCode;
|
||||
selectedLocation = {
|
||||
id: this.cells[0].textContent,
|
||||
code: this.cells[1].textContent,
|
||||
size: this.cells[2].textContent,
|
||||
description: this.cells[3].textContent
|
||||
};
|
||||
|
||||
// Update display
|
||||
locationCodeDisplay.textContent = selectedLocationCode;
|
||||
selectedLocationDisplay.textContent = `${selectedLocation.code} (ID: ${selectedLocation.id})`;
|
||||
|
||||
// Show/hide selection info
|
||||
noSelectionMessage.style.display = 'none';
|
||||
selectedLocationInfo.style.display = 'block';
|
||||
|
||||
// Generate barcode
|
||||
generateLocationBarcode(selectedLocationCode);
|
||||
|
||||
// Enable print button
|
||||
// Enable buttons
|
||||
printButton.disabled = false;
|
||||
editButton.disabled = false;
|
||||
deleteButton.disabled = false;
|
||||
|
||||
showNotification(`📍 Selected location: ${selectedLocationCode}`, 'info');
|
||||
});
|
||||
});
|
||||
|
||||
// Edit button functionality
|
||||
editButton.addEventListener('click', function() {
|
||||
if (selectedLocation) {
|
||||
openEditModal(selectedLocation);
|
||||
}
|
||||
});
|
||||
|
||||
// Delete button functionality
|
||||
deleteButton.addEventListener('click', function() {
|
||||
if (selectedLocation) {
|
||||
openDeleteModal(selectedLocation);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize QZ Tray
|
||||
initializeQZTray();
|
||||
});
|
||||
@@ -519,5 +535,111 @@ async function testQZConnection() {
|
||||
|
||||
// Add test button functionality (for debugging - can be removed in production)
|
||||
console.log('🔧 QZ Tray test function available: testQZConnection()');
|
||||
|
||||
// Modal Functions for Edit/Delete
|
||||
function openEditModal(location) {
|
||||
document.getElementById('edit-location-id').value = location.id;
|
||||
document.getElementById('edit-location-code').value = location.code;
|
||||
document.getElementById('edit-size').value = location.size || '';
|
||||
document.getElementById('edit-description').value = location.description || '';
|
||||
document.getElementById('edit-modal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
document.getElementById('edit-modal').style.display = 'none';
|
||||
}
|
||||
|
||||
function openDeleteModal(location) {
|
||||
document.getElementById('delete-confirm-id').textContent = location.id;
|
||||
document.getElementById('delete-confirm-code').textContent = location.code;
|
||||
document.getElementById('delete-confirm-size').textContent = location.size || '-';
|
||||
document.getElementById('delete-confirm-description').textContent = location.description || '-';
|
||||
document.getElementById('delete-modal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
document.getElementById('delete-modal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Handle edit form submission
|
||||
document.getElementById('edit-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(this);
|
||||
const data = {
|
||||
location_id: formData.get('location_id'),
|
||||
location_code: formData.get('location_code'),
|
||||
size: formData.get('size'),
|
||||
description: formData.get('description')
|
||||
};
|
||||
|
||||
// Send update request
|
||||
fetch('/update_location', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showNotification('✅ Location updated successfully!', 'success');
|
||||
closeEditModal();
|
||||
// Reload page to show changes
|
||||
setTimeout(() => window.location.reload(), 1000);
|
||||
} else {
|
||||
showNotification('❌ Error updating location: ' + result.error, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showNotification('❌ Error updating location: ' + error.message, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
// Handle delete confirmation
|
||||
function confirmDelete() {
|
||||
const locationId = document.getElementById('delete-confirm-id').textContent;
|
||||
|
||||
// Send delete request
|
||||
fetch('/delete_location', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ location_id: locationId })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showNotification('✅ Location deleted successfully!', 'success');
|
||||
closeDeleteModal();
|
||||
// Reload page to show changes
|
||||
setTimeout(() => window.location.reload(), 1000);
|
||||
} else {
|
||||
showNotification('❌ Error deleting location: ' + result.error, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showNotification('❌ Error deleting location: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
// Close modals when clicking outside
|
||||
window.addEventListener('click', function(event) {
|
||||
const editModal = document.getElementById('edit-modal');
|
||||
const deleteModal = document.getElementById('delete-modal');
|
||||
|
||||
if (event.target === editModal) {
|
||||
closeEditModal();
|
||||
}
|
||||
if (event.target === deleteModal) {
|
||||
closeDeleteModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user