Add USB, Notifications, Network plugins and reusable EmployeeSearch component
New Plugins: - USB plugin: Device checkout/checkin with employee lookup, checkout history - Notifications plugin: Announcements with types, scheduling, shopfloor display - Network plugin: Network device management with subnets and VLANs - Equipment and Computers plugins: Asset type separation Frontend: - EmployeeSearch component: Reusable employee lookup with autocomplete - USB views: List, detail, checkout/checkin modals - Notifications views: List, form with recognition mode - Network views: Device list, detail, form - Calendar view with FullCalendar integration - Shopfloor and TV dashboard views - Reports index page - Map editor for asset positioning - Light/dark mode fixes for map tooltips Backend: - Employee search API with external lookup service - Collector API for PowerShell data collection - Reports API endpoints - Slides API for TV dashboard - Fixed AppVersion model (removed BaseModel inheritance) - Added checkout_name column to usbcheckouts table Styling: - Unified detail page styles - Improved pagination (page numbers instead of prev/next) - Dark/light mode theme improvements Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
407
frontend/src/views/MapEditor.vue
Normal file
407
frontend/src/views/MapEditor.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="map-editor">
|
||||
<div class="page-header">
|
||||
<h2>Map Editor</h2>
|
||||
<div class="header-actions">
|
||||
<router-link to="/map" class="btn btn-secondary">Back to Map</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-layout">
|
||||
<!-- Asset List Panel -->
|
||||
<div class="asset-panel">
|
||||
<div class="panel-header">
|
||||
<h3>Assets</h3>
|
||||
<select v-model="filterType" class="form-control">
|
||||
<option value="">All Types</option>
|
||||
<option value="equipment">Equipment</option>
|
||||
<option value="computer">Computers</option>
|
||||
<option value="printer">Printers</option>
|
||||
<option value="network_device">Network Devices</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="asset-filter">
|
||||
<label class="filter-checkbox">
|
||||
<input type="checkbox" v-model="showUnplacedOnly" />
|
||||
Show unplaced only
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="asset-list">
|
||||
<div
|
||||
v-for="asset in filteredAssets"
|
||||
:key="asset.assetid"
|
||||
class="asset-item"
|
||||
:class="{
|
||||
selected: selectedAsset?.assetid === asset.assetid,
|
||||
placed: asset.mapleft && asset.maptop,
|
||||
unplaced: !asset.mapleft || !asset.maptop
|
||||
}"
|
||||
@click="selectAsset(asset)"
|
||||
>
|
||||
<span class="asset-icon">{{ getTypeIcon(asset.assettype) }}</span>
|
||||
<div class="asset-info">
|
||||
<div class="asset-name">{{ asset.name || asset.assetnumber }}</div>
|
||||
<div class="asset-meta">
|
||||
<span class="badge badge-sm">{{ asset.assettype }}</span>
|
||||
<span v-if="asset.mapleft && asset.maptop" class="placed-indicator" title="Placed on map">📍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredAssets.length === 0" class="empty">
|
||||
No assets found.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Panel -->
|
||||
<div class="map-panel">
|
||||
<div class="map-toolbar" v-if="selectedAsset">
|
||||
<span class="selected-info">
|
||||
<strong>Selected:</strong> {{ selectedAsset.name || selectedAsset.assetnumber }}
|
||||
</span>
|
||||
<span class="position-info" v-if="pickedPosition">
|
||||
Position: ({{ Math.round(pickedPosition.left) }}, {{ Math.round(pickedPosition.top) }})
|
||||
</span>
|
||||
<div class="toolbar-actions">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="!pickedPosition"
|
||||
@click="savePosition"
|
||||
>
|
||||
Save Position
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
v-if="selectedAsset.mapleft && selectedAsset.maptop"
|
||||
@click="clearPosition"
|
||||
>
|
||||
Remove from Map
|
||||
</button>
|
||||
<button class="btn btn-secondary" @click="cancelEdit">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map-toolbar" v-else>
|
||||
<span class="instruction">Select an asset from the list to place it on the map</span>
|
||||
</div>
|
||||
|
||||
<ShopFloorMap
|
||||
ref="mapRef"
|
||||
:machines="placedAssets"
|
||||
:assetTypeMode="true"
|
||||
:theme="currentTheme"
|
||||
:pickerMode="!!selectedAsset"
|
||||
:initialPosition="selectedAsset ? { left: selectedAsset.mapleft, top: selectedAsset.maptop } : null"
|
||||
@positionPicked="handlePositionPicked"
|
||||
@markerClick="handleMarkerClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import ShopFloorMap from '../components/ShopFloorMap.vue'
|
||||
import { assetsApi } from '../api'
|
||||
import { currentTheme } from '../stores/theme'
|
||||
|
||||
const assets = ref([])
|
||||
const loading = ref(true)
|
||||
const selectedAsset = ref(null)
|
||||
const pickedPosition = ref(null)
|
||||
const filterType = ref('')
|
||||
const showUnplacedOnly = ref(false)
|
||||
|
||||
const filteredAssets = computed(() => {
|
||||
let result = assets.value
|
||||
|
||||
if (filterType.value) {
|
||||
result = result.filter(a => a.assettype === filterType.value)
|
||||
}
|
||||
|
||||
if (showUnplacedOnly.value) {
|
||||
result = result.filter(a => !a.mapleft || !a.maptop)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
const placedAssets = computed(() => {
|
||||
return assets.value.filter(a => a.mapleft && a.maptop)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await loadAssets()
|
||||
})
|
||||
|
||||
async function loadAssets() {
|
||||
loading.value = true
|
||||
try {
|
||||
const response = await assetsApi.getMap()
|
||||
assets.value = response.data.data?.assets || []
|
||||
} catch (error) {
|
||||
console.error('Failed to load assets:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function getTypeIcon(assettype) {
|
||||
const icons = {
|
||||
'equipment': '⚙',
|
||||
'computer': '💻',
|
||||
'printer': '🖨',
|
||||
'network_device': '🌐'
|
||||
}
|
||||
return icons[assettype] || '📦'
|
||||
}
|
||||
|
||||
function selectAsset(asset) {
|
||||
selectedAsset.value = asset
|
||||
pickedPosition.value = asset.mapleft && asset.maptop
|
||||
? { left: asset.mapleft, top: asset.maptop }
|
||||
: null
|
||||
}
|
||||
|
||||
function handlePositionPicked(position) {
|
||||
pickedPosition.value = position
|
||||
}
|
||||
|
||||
function handleMarkerClick(asset) {
|
||||
selectAsset(asset)
|
||||
}
|
||||
|
||||
async function savePosition() {
|
||||
if (!selectedAsset.value || !pickedPosition.value) return
|
||||
|
||||
try {
|
||||
await assetsApi.update(selectedAsset.value.assetid, {
|
||||
mapleft: Math.round(pickedPosition.value.left),
|
||||
maptop: Math.round(pickedPosition.value.top)
|
||||
})
|
||||
|
||||
// Update local state
|
||||
const asset = assets.value.find(a => a.assetid === selectedAsset.value.assetid)
|
||||
if (asset) {
|
||||
asset.mapleft = Math.round(pickedPosition.value.left)
|
||||
asset.maptop = Math.round(pickedPosition.value.top)
|
||||
}
|
||||
|
||||
selectedAsset.value = null
|
||||
pickedPosition.value = null
|
||||
} catch (error) {
|
||||
console.error('Failed to save position:', error)
|
||||
alert('Failed to save position')
|
||||
}
|
||||
}
|
||||
|
||||
async function clearPosition() {
|
||||
if (!selectedAsset.value) return
|
||||
|
||||
if (!confirm(`Remove ${selectedAsset.value.name || selectedAsset.value.assetnumber} from the map?`)) return
|
||||
|
||||
try {
|
||||
await assetsApi.update(selectedAsset.value.assetid, {
|
||||
mapleft: null,
|
||||
maptop: null
|
||||
})
|
||||
|
||||
// Update local state
|
||||
const asset = assets.value.find(a => a.assetid === selectedAsset.value.assetid)
|
||||
if (asset) {
|
||||
asset.mapleft = null
|
||||
asset.maptop = null
|
||||
}
|
||||
|
||||
selectedAsset.value = null
|
||||
pickedPosition.value = null
|
||||
} catch (error) {
|
||||
console.error('Failed to clear position:', error)
|
||||
alert('Failed to clear position')
|
||||
}
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
selectedAsset.value = null
|
||||
pickedPosition.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.editor-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 1rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.asset-panel {
|
||||
width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.panel-header select {
|
||||
width: auto;
|
||||
padding: 0.375rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.asset-filter {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.filter-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.asset-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.asset-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.asset-item:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.asset-item.selected {
|
||||
background: rgba(65, 129, 255, 0.2);
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.asset-item.unplaced {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.asset-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.asset-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.asset-name {
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.asset-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.badge-sm {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
}
|
||||
|
||||
.placed-indicator {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.map-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.map-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.position-info {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-light);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
color: var(--text-light);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.map-panel :deep(.shopfloor-map) {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--text-light);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user