This commit is contained in:
2025-06-24 09:52:09 +02:00
parent 875e20304b
commit 6412d9f01a
3 changed files with 164 additions and 88 deletions

View File

@@ -1,6 +1,6 @@
from flask import Blueprint, jsonify
from flask import Blueprint, jsonify, request
from flask_login import login_required, current_user
from models import db, Room, RoomFile, User, DocuPulseSettings
from models import db, Room, RoomFile, User, DocuPulseSettings, HelpArticle
import os
from datetime import datetime
@@ -253,9 +253,9 @@ def get_usage_stats():
stats = DocuPulseSettings.get_usage_stats()
return jsonify(stats)
except Exception as e:
return jsonify({'error': str(e)}), 500
@admin.route('/help-articles/<int:article_id>', methods=['PUT'])
return jsonify({'error': str(e)}), 500
@admin.route('/api/admin/help-articles/<int:article_id>', methods=['PUT'])
@login_required
def update_help_article(article_id):
"""Update a help article"""
@@ -307,7 +307,7 @@ def update_help_article(article_id):
db.session.rollback()
return jsonify({'error': str(e)}), 500
@admin.route('/help-articles/<int:article_id>', methods=['DELETE'])
@admin.route('/api/admin/help-articles/<int:article_id>', methods=['DELETE'])
@login_required
def delete_help_article(article_id):
"""Delete a help article"""
@@ -339,7 +339,7 @@ def delete_help_article(article_id):
return jsonify({'error': str(e)}), 500
# Help Articles API endpoints
@admin.route('/help-articles', methods=['GET'])
@admin.route('/api/admin/help-articles', methods=['GET'])
@login_required
def get_help_articles():
"""Get all help articles"""
@@ -364,7 +364,7 @@ def get_help_articles():
return jsonify({'articles': articles_data})
@admin.route('/help-articles', methods=['POST'])
@admin.route('/api/admin/help-articles', methods=['POST'])
@login_required
def create_help_article():
"""Create a new help article"""
@@ -417,7 +417,7 @@ def create_help_article():
db.session.rollback()
return jsonify({'error': str(e)}), 500
@admin.route('/help-articles/<int:article_id>', methods=['GET'])
@admin.route('/api/admin/help-articles/<int:article_id>', methods=['GET'])
@login_required
def get_help_article(article_id):
"""Get a specific help article"""

View File

@@ -30,6 +30,37 @@
.note-editor .note-editing-area {
background-color: var(--white);
}
.note-editor .note-toolbar {
background-color: var(--bg-color);
border-bottom: 1px solid var(--border-color);
border-radius: 0.375rem 0.375rem 0 0;
}
.note-editor .note-btn {
border: 1px solid var(--border-color);
background-color: var(--white);
color: var(--text-dark);
}
.note-editor .note-btn:hover {
background-color: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
}
.note-editor .note-btn.active {
background-color: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
}
.note-editor .note-editing-area .note-editable {
color: var(--text-dark);
font-family: inherit;
line-height: 1.6;
padding: 15px;
}
.note-editor .note-status-output {
background-color: var(--bg-color);
border-top: 1px solid var(--border-color);
color: var(--text-muted);
}
</style>
{% endblock %}
@@ -207,70 +238,83 @@
{% endblock %}
{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
$(document).ready(function() {
document.addEventListener('DOMContentLoaded', function() {
// Initialize Summernote for rich text editing
$('#articleBody, #editArticleBody').summernote({
height: 300,
height: 400,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'italic', 'clear']],
['font', ['bold', 'underline', 'italic', 'strikethrough', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['fullscreen', 'codeview', 'help']]
['insert', ['link', 'picture', 'video', 'hr']],
['view', ['fullscreen', 'codeview', 'help']],
['undo', ['undo', 'redo']]
],
styleTags: [
'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
]
],
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36'],
callbacks: {
onInit: function() {
// Ensure proper styling when modal opens
$('.note-editor').css('border-color', 'var(--border-color)');
$('.note-editing-area').css('background-color', 'var(--white)');
}
}
});
// Load articles on page load
loadArticles();
// Handle create article form submission
$('#createArticleForm').on('submit', function(e) {
document.getElementById('createArticleForm').addEventListener('submit', function(e) {
e.preventDefault();
createArticle();
});
// Handle edit article form submission
$('#editArticleForm').on('submit', function(e) {
document.getElementById('editArticleForm').addEventListener('submit', function(e) {
e.preventDefault();
updateArticle();
});
// Handle delete confirmation
$('#confirmDelete').on('click', function() {
document.getElementById('confirmDelete').addEventListener('click', function() {
deleteArticle();
});
});
function loadArticles() {
$.get('/api/admin/help-articles', function(data) {
const articlesList = $('#articlesList');
articlesList.empty();
if (data.articles.length === 0) {
articlesList.html(`
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-body text-center py-5">
<i class="fas fa-file-alt text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
<h4 class="text-muted mt-3">No Articles Yet</h4>
<p class="text-muted">Create your first help article to get started.</p>
fetch('/api/admin/help-articles')
.then(response => response.json())
.then(data => {
const articlesList = document.getElementById('articlesList');
articlesList.innerHTML = '';
if (data.articles.length === 0) {
articlesList.innerHTML = `
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-body text-center py-5">
<i class="fas fa-file-alt text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
<h4 class="text-muted mt-3">No Articles Yet</h4>
<p class="text-muted">Create your first help article to get started.</p>
</div>
</div>
</div>
</div>
`);
return;
}
`;
return;
}
data.articles.forEach(article => {
const categoryNames = {
'getting-started': 'Getting Started',
'user-management': 'User Management',
@@ -280,8 +324,10 @@ function loadArticles() {
'administration': 'Administration'
};
const card = $(`
<div class="col-lg-6 col-xl-4 mb-4">
data.articles.forEach(article => {
const card = document.createElement('div');
card.className = 'col-lg-6 col-xl-4 mb-4';
card.innerHTML = `
<div class="card article-card border-0 shadow-sm h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
@@ -311,91 +357,120 @@ function loadArticles() {
</div>
</div>
</div>
</div>
`);
articlesList.append(card);
`;
articlesList.appendChild(card);
});
})
.catch(error => {
console.error('Error loading articles:', error);
showAlert('Error loading articles: ' + error.message, 'danger');
});
});
}
function createArticle() {
const formData = new FormData($('#createArticleForm')[0]);
const form = document.getElementById('createArticleForm');
const formData = new FormData(form);
formData.set('body', $('#articleBody').summernote('code'));
formData.set('is_published', $('#isPublished').is(':checked'));
formData.set('is_published', document.getElementById('isPublished').checked);
$.ajax({
url: '/api/admin/help-articles',
fetch('/api/admin/help-articles', {
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#createArticleModal').modal('hide');
$('#createArticleForm')[0].reset();
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
const modal = bootstrap.Modal.getInstance(document.getElementById('createArticleModal'));
modal.hide();
form.reset();
$('#articleBody').summernote('code', '');
loadArticles();
showAlert('Article created successfully!', 'success');
},
error: function(xhr) {
showAlert('Error creating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
} else {
throw new Error(data.error || 'Unknown error');
}
})
.catch(error => {
console.error('Error creating article:', error);
showAlert('Error creating article: ' + error.message, 'danger');
});
}
function editArticle(articleId) {
$.get(`/api/admin/help-articles/${articleId}`, function(data) {
$('#editArticleId').val(data.article.id);
$('#editArticleTitle').val(data.article.title);
$('#editArticleCategory').val(data.article.category);
$('#editArticleBody').summernote('code', data.article.body);
$('#editOrderIndex').val(data.article.order_index);
$('#editIsPublished').prop('checked', data.article.is_published);
$('#editArticleModal').modal('show');
});
fetch(`/api/admin/help-articles/${articleId}`)
.then(response => response.json())
.then(data => {
document.getElementById('editArticleId').value = data.article.id;
document.getElementById('editArticleTitle').value = data.article.title;
document.getElementById('editArticleCategory').value = data.article.category;
$('#editArticleBody').summernote('code', data.article.body);
document.getElementById('editOrderIndex').value = data.article.order_index;
document.getElementById('editIsPublished').checked = data.article.is_published;
const modal = new bootstrap.Modal(document.getElementById('editArticleModal'));
modal.show();
})
.catch(error => {
console.error('Error loading article:', error);
showAlert('Error loading article: ' + error.message, 'danger');
});
}
function updateArticle() {
const formData = new FormData($('#editArticleForm')[0]);
const form = document.getElementById('editArticleForm');
const formData = new FormData(form);
formData.set('body', $('#editArticleBody').summernote('code'));
formData.set('is_published', $('#editIsPublished').is(':checked'));
formData.set('is_published', document.getElementById('editIsPublished').checked);
$.ajax({
url: `/api/admin/help-articles/${$('#editArticleId').val()}`,
fetch(`/api/admin/help-articles/${document.getElementById('editArticleId').value}`, {
method: 'PUT',
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#editArticleModal').modal('hide');
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
const modal = bootstrap.Modal.getInstance(document.getElementById('editArticleModal'));
modal.hide();
loadArticles();
showAlert('Article updated successfully!', 'success');
},
error: function(xhr) {
showAlert('Error updating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
} else {
throw new Error(data.error || 'Unknown error');
}
})
.catch(error => {
console.error('Error updating article:', error);
showAlert('Error updating article: ' + error.message, 'danger');
});
}
function confirmDelete(articleId, title) {
$('#deleteArticleId').val(articleId);
$('#deleteArticleTitle').text(title);
$('#deleteArticleModal').modal('show');
document.getElementById('deleteArticleId').value = articleId;
document.getElementById('deleteArticleTitle').textContent = title;
const modal = new bootstrap.Modal(document.getElementById('deleteArticleModal'));
modal.show();
}
function deleteArticle() {
const articleId = $('#deleteArticleId').val();
const articleId = document.getElementById('deleteArticleId').value;
$.ajax({
url: `/api/admin/help-articles/${articleId}`,
method: 'DELETE',
success: function(response) {
$('#deleteArticleModal').modal('hide');
fetch(`/api/admin/help-articles/${articleId}`, {
method: 'DELETE'
})
.then(response => response.json())
.then(data => {
if (data.success) {
const modal = bootstrap.Modal.getInstance(document.getElementById('deleteArticleModal'));
modal.hide();
loadArticles();
showAlert('Article deleted successfully!', 'success');
},
error: function(xhr) {
showAlert('Error deleting article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
} else {
throw new Error(data.error || 'Unknown error');
}
})
.catch(error => {
console.error('Error deleting article:', error);
showAlert('Error deleting article: ' + error.message, 'danger');
});
}
@@ -407,7 +482,8 @@ function showAlert(message, type) {
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`;
$('.container-fluid').prepend(alertHtml);
const container = document.querySelector('.container-fluid');
container.insertAdjacentHTML('afterbegin', alertHtml);
}
</script>
{% endblock %}