94 lines
3.5 KiB
HTML
94 lines
3.5 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Create Group{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="mb-4">Create a New Group</h1>
|
||
|
|
<form method="POST" enctype="multipart/form-data" id="createGroupForm">
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="name" class="form-label">Group Name</label>
|
||
|
|
<input type="text" class="form-control" id="name" name="name" required>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="description" class="form-label">Description</label>
|
||
|
|
<textarea class="form-control" id="description" name="description" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="vanity_url" class="form-label">Vanity URL</label>
|
||
|
|
<input type="text" class="form-control" id="vanity_url" name="vanity_url" required>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="visibility" class="form-label">Visibility</label>
|
||
|
|
<select class="form-select" id="visibility" name="visibility" required>
|
||
|
|
<option value="public">Public</option>
|
||
|
|
<option value="registered_only">Registered Only</option>
|
||
|
|
<option value="invite_only">Invite Only</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3 form-check" id="allow_requests_div" style="display: none;">
|
||
|
|
<input type="checkbox" class="form-check-input" id="allow_requests" name="allow_requests">
|
||
|
|
<label class="form-check-label" for="allow_requests">Allow Join Requests</label>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="image" class="form-label">Group Image</label>
|
||
|
|
<input type="file" class="form-control" id="image" name="image" accept="image/*">
|
||
|
|
</div>
|
||
|
|
<div id="cropperContainer" style="display: none;">
|
||
|
|
<img id="cropperImage" src="" alt="Group Image">
|
||
|
|
</div>
|
||
|
|
<input type="hidden" id="croppedData" name="cropped_data">
|
||
|
|
<button type="submit" class="btn btn-primary">Create Group</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block styles %}
|
||
|
|
{{ super() }}
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
{{ super() }}
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const imageInput = document.getElementById('image');
|
||
|
|
const cropperContainer = document.getElementById('cropperContainer');
|
||
|
|
const cropperImage = document.getElementById('cropperImage');
|
||
|
|
const croppedDataInput = document.getElementById('croppedData');
|
||
|
|
let cropper;
|
||
|
|
|
||
|
|
imageInput.addEventListener('change', function(e) {
|
||
|
|
const file = e.target.files[0];
|
||
|
|
const reader = new FileReader();
|
||
|
|
|
||
|
|
reader.onload = function(event) {
|
||
|
|
cropperImage.src = event.target.result;
|
||
|
|
cropperContainer.style.display = 'block';
|
||
|
|
|
||
|
|
if (cropper) {
|
||
|
|
cropper.destroy();
|
||
|
|
}
|
||
|
|
|
||
|
|
cropper = new Cropper(cropperImage, {
|
||
|
|
aspectRatio: 1,
|
||
|
|
viewMode: 1,
|
||
|
|
minCropBoxWidth: 200,
|
||
|
|
minCropBoxHeight: 200,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('createGroupForm').addEventListener('submit', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
if (cropper) {
|
||
|
|
croppedDataInput.value = cropper.getCroppedCanvas().toDataURL();
|
||
|
|
}
|
||
|
|
this.submit();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|