167 lines
8.2 KiB
HTML
167 lines
8.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<h2>{% if resource %}Edit {{ resource.name }}{% else %}Add New Resource{% endif %}</h2>
|
|
<form method="POST">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Resource Name</label>
|
|
<input type="text" class="form-control" id="name" name="name"
|
|
value="{% if resource %}{{ resource.name }}{% endif %}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Description</label>
|
|
<textarea class="form-control" id="description" name="description"
|
|
rows="3" required>{% if resource %}{{ resource.description }}{% endif %}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="resource_type" class="form-label">Resource Type</label>
|
|
<select class="form-select" id="resource_type" name="resource_type">
|
|
<option value="workoffice" {% if resource and resource.resource_type == 'workoffice' %}selected{% endif %}>Work Office</option>
|
|
<option value="meeting_room" {% if resource and resource.resource_type == 'meeting_room' %}selected{% endif %}>Meeting Room</option>
|
|
</select>
|
|
<small class="text-muted">Only 1 booking per type allowed at a time (can book multiple different types)</small>
|
|
</div>
|
|
|
|
<!-- Image upload -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Resource Image (optional)</label>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<input type="file" class="form-control" id="image" name="image" accept=".png,.jpg,.jpeg,.gif,.webp">
|
|
<small class="text-muted">Upload an image of the resource (optional)</small>
|
|
{% if resource and resource.image_url %}
|
|
<div class="mt-2">
|
|
<img src="{{ url_for('static', filename=resource.image_url) }}" alt="Current image" class="img-thumbnail">
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body text-center text-muted">
|
|
<i class="fas fa-cloud-upload-alt fa-3x mb-2"></i>
|
|
<p>Upload image of the resource</p>
|
|
<small>Supported formats: PNG, JPG, GIF, WEBP</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<h5>Permissions</h5>
|
|
<div class="mb-3">
|
|
<label class="form-label">Floor Map Position (optional)</label>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="position_x" class="form-label">X Coordinate</label>
|
|
<input type="number" class="form-control" id="position_x" name="position_x"
|
|
value="{% if resource and resource.position_x %}{{ resource.position_x }}{% endif %}"
|
|
placeholder="Enter X position">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="position_y" class="form-label">Y Coordinate</label>
|
|
<input type="number" class="form-control" id="position_y" name="position_y"
|
|
value="{% if resource and resource.position_y %}{{ resource.position_y }}{% endif %}"
|
|
placeholder="Enter Y position">
|
|
</div>
|
|
</div>
|
|
<small class="text-muted">Click on the floor map in Company Admin to get coordinates</small>
|
|
</div>
|
|
|
|
<hr>
|
|
<h5>Permissions</h5>
|
|
<div class="mb-3">
|
|
<label for="permission_type" class="form-label">Who can use this resource?</label>
|
|
<select class="form-select" id="permission_type" name="permission_type" required>
|
|
<!-- New resource - no permission yet -->
|
|
{% if not resource %}
|
|
<option value="everyone" selected>Anyone in the company</option>
|
|
<option value="group">Specific group only</option>
|
|
<option value="users">Specific users only</option>
|
|
{% else %}
|
|
<!-- Existing resource - load permission from database -->
|
|
{% if permission %}
|
|
<option value="everyone" {% if permission.permission_type == 'everyone' %}selected{% endif %}>Anyone in the company</option>
|
|
<option value="group" {% if permission.permission_type == 'group' %}selected{% endif %}>Specific group only</option>
|
|
<option value="users" {% if permission.permission_type == 'users' %}selected{% endif %}>Specific users only</option>
|
|
{% else %}
|
|
<option value="everyone" selected>Anyone in the company</option>
|
|
<option value="group">Specific group only</option>
|
|
<option value="users">Specific users only</option>
|
|
{% endif %}
|
|
{% endif %}
|
|
</select>
|
|
<small class="text-muted">Select who should be able to book this resource</small>
|
|
</div>
|
|
|
|
<!-- Group selection -->
|
|
<div class="mb-3" id="group_section" style="display: {% if permission and permission.permission_type == 'group' %}block{% else %}none{% endif %};">
|
|
<label for="group_id" class="form-label">Select Group</label>
|
|
<select class="form-select" id="group_id" name="group_id">
|
|
<option value="">-- Select a group --</option>
|
|
{% for group in groups %}
|
|
<option value="{{ group.id }}" {% if permission and permission.group_id == group.id %}selected{% endif %}>{{ group.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- User IDs selection -->
|
|
<div class="mb-3" id="users_section" style="display: {% if permission and permission.permission_type == 'users' %}block{% else %}none{% endif %};">
|
|
<label for="user_ids" class="form-label">Select Users (comma-separated IDs)</label>
|
|
<input type="text" class="form-control" id="user_ids" name="user_ids"
|
|
value="{% if permission and permission.user_ids %}{{ permission.user_ids }}{% endif %}"
|
|
placeholder="1,2,3">
|
|
<small class="text-muted">Enter user IDs to grant access (comma-separated)</small>
|
|
<br><br>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="loadUserIds()">
|
|
Load User IDs
|
|
</button>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
<a href="{{ url_for('company_admin') }}" class="btn btn-secondary">Cancel</a>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function loadUserIds() {
|
|
fetch('/api/get-users')
|
|
.then(response => response.json())
|
|
.then(userIds => {
|
|
// Convert to string with commas
|
|
const idsStr = userIds.join(',');
|
|
document.getElementById('user_ids').value = idsStr;
|
|
})
|
|
.catch(error => console.error('Error loading user IDs:', error));
|
|
}
|
|
|
|
// Toggle sections based on permission type
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const permissionType = document.getElementById('permission_type');
|
|
const groupSection = document.getElementById('group_section');
|
|
const usersSection = document.getElementById('users_section');
|
|
|
|
function updateVisibility() {
|
|
const type = permissionType.value;
|
|
if (type === 'group') {
|
|
groupSection.style.display = 'block';
|
|
usersSection.style.display = 'none';
|
|
} else if (type === 'users') {
|
|
groupSection.style.display = 'none';
|
|
usersSection.style.display = 'block';
|
|
} else {
|
|
groupSection.style.display = 'none';
|
|
usersSection.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
permissionType.addEventListener('change', updateVisibility);
|
|
updateVisibility(); // Initial call
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |