chore: Rename Astroglobe -> Astrolabe
This commit is contained in:
Chris Coutinho
Vendored
+1332
File diff suppressed because it is too large
Load Diff
+244
@@ -0,0 +1,244 @@
|
||||
/**
|
||||
* Admin settings page JavaScript for Astrolabe.
|
||||
*
|
||||
* Handles:
|
||||
* - Loading webhook presets
|
||||
* - Enabling/disabling webhook presets
|
||||
* - Search settings form submission
|
||||
*/
|
||||
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import axios from '@nextcloud/axios'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize search settings form
|
||||
initSearchSettingsForm()
|
||||
|
||||
// Initialize webhook management (only if webhook section exists)
|
||||
if (document.getElementById('webhook-presets')) {
|
||||
initWebhookManagement()
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Initialize search settings form handling.
|
||||
*/
|
||||
function initSearchSettingsForm() {
|
||||
const form = document.getElementById('astrolabe-search-settings-form')
|
||||
if (!form) return
|
||||
|
||||
const scoreThresholdInput = document.getElementById('search-score-threshold')
|
||||
const scoreThresholdValue = document.getElementById('score-threshold-value')
|
||||
|
||||
// Update score threshold display when slider changes
|
||||
if (scoreThresholdInput && scoreThresholdValue) {
|
||||
scoreThresholdInput.addEventListener('input', (e) => {
|
||||
scoreThresholdValue.textContent = e.target.value + '%'
|
||||
})
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const formData = new FormData(form)
|
||||
const data = {
|
||||
algorithm: formData.get('algorithm'),
|
||||
fusion: formData.get('fusion'),
|
||||
scoreThreshold: parseInt(formData.get('scoreThreshold')),
|
||||
limit: parseInt(formData.get('limit')),
|
||||
}
|
||||
|
||||
const statusEl = document.getElementById('search-settings-status')
|
||||
if (statusEl) {
|
||||
statusEl.textContent = 'Saving...'
|
||||
statusEl.className = 'mcp-status-message'
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(
|
||||
generateUrl('/apps/astrolabe/api/admin/search-settings'),
|
||||
data,
|
||||
{ headers: { 'Content-Type': 'application/json' } },
|
||||
)
|
||||
|
||||
if (response.data.success) {
|
||||
if (statusEl) {
|
||||
statusEl.textContent = '✓ Settings saved'
|
||||
statusEl.className = 'mcp-status-message success'
|
||||
setTimeout(() => {
|
||||
statusEl.textContent = ''
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to save search settings:', error)
|
||||
if (statusEl) {
|
||||
statusEl.textContent = '✗ Failed to save'
|
||||
statusEl.className = 'mcp-status-message error'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize webhook management UI.
|
||||
*/
|
||||
async function initWebhookManagement() {
|
||||
const container = document.getElementById('webhook-presets-container')
|
||||
if (!container) return
|
||||
|
||||
try {
|
||||
// Load webhook presets from API
|
||||
const response = await axios.get(
|
||||
generateUrl('/apps/astrolabe/api/admin/webhooks/presets'),
|
||||
)
|
||||
|
||||
if (!response.data.success) {
|
||||
throw new Error(response.data.error || 'Failed to load presets')
|
||||
}
|
||||
|
||||
const presets = response.data.presets
|
||||
renderWebhookPresets(container, presets)
|
||||
} catch (error) {
|
||||
console.error('Failed to load webhook presets:', error)
|
||||
container.innerHTML = `
|
||||
<div class="notecard notecard-error">
|
||||
<p><strong>Error loading webhook presets:</strong></p>
|
||||
<p>${error.message || 'Unknown error'}</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render webhook preset cards.
|
||||
*
|
||||
* @param {HTMLElement} container Container element
|
||||
* @param {object} presets Preset configurations
|
||||
*/
|
||||
function renderWebhookPresets(container, presets) {
|
||||
const presetIds = Object.keys(presets)
|
||||
|
||||
if (presetIds.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="notecard notecard-info">
|
||||
<p>No webhook presets available. Install supported apps (Notes, Calendar, Tables, Forms) to enable webhooks.</p>
|
||||
</div>
|
||||
`
|
||||
return
|
||||
}
|
||||
|
||||
// Create preset cards grid
|
||||
const grid = document.createElement('div')
|
||||
grid.className = 'mcp-preset-grid'
|
||||
|
||||
presetIds.forEach(presetId => {
|
||||
const preset = presets[presetId]
|
||||
const card = createPresetCard(presetId, preset)
|
||||
grid.appendChild(card)
|
||||
})
|
||||
|
||||
container.innerHTML = ''
|
||||
container.appendChild(grid)
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a webhook preset card.
|
||||
*
|
||||
* @param {string} presetId Preset ID
|
||||
* @param {object} preset Preset configuration
|
||||
* @return {HTMLElement} Card element
|
||||
*/
|
||||
function createPresetCard(presetId, preset) {
|
||||
const card = document.createElement('div')
|
||||
card.className = 'mcp-preset-card'
|
||||
card.dataset.presetId = presetId
|
||||
|
||||
const statusClass = preset.enabled ? 'enabled' : 'disabled'
|
||||
const statusText = preset.enabled ? 'Enabled' : 'Disabled'
|
||||
const buttonText = preset.enabled ? 'Disable' : 'Enable'
|
||||
const buttonClass = preset.enabled ? 'secondary' : 'primary'
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="mcp-preset-header">
|
||||
<h4>${escapeHtml(preset.name)}</h4>
|
||||
<span class="mcp-preset-status mcp-status-${statusClass}">${statusText}</span>
|
||||
</div>
|
||||
<p class="mcp-preset-description">${escapeHtml(preset.description)}</p>
|
||||
<div class="mcp-preset-meta">
|
||||
<span class="mcp-preset-app">App: ${escapeHtml(preset.app)}</span>
|
||||
<span class="mcp-preset-events">${preset.events.length} events</span>
|
||||
</div>
|
||||
<div class="mcp-preset-actions">
|
||||
<button class="mcp-preset-toggle ${buttonClass}" data-preset-id="${presetId}">
|
||||
${buttonText}
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
|
||||
// Attach event listener to toggle button
|
||||
const toggleBtn = card.querySelector('.mcp-preset-toggle')
|
||||
toggleBtn.addEventListener('click', () => togglePreset(presetId, preset.enabled))
|
||||
|
||||
return card
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle a webhook preset (enable/disable).
|
||||
*
|
||||
* @param {string} presetId Preset ID
|
||||
* @param {boolean} currentlyEnabled Current enabled state
|
||||
*/
|
||||
async function togglePreset(presetId, currentlyEnabled) {
|
||||
const card = document.querySelector(`[data-preset-id="${presetId}"]`)
|
||||
if (!card) return
|
||||
|
||||
const toggleBtn = card.querySelector('.mcp-preset-toggle')
|
||||
const originalText = toggleBtn.textContent
|
||||
|
||||
// Disable button during request
|
||||
toggleBtn.disabled = true
|
||||
toggleBtn.textContent = currentlyEnabled ? 'Disabling...' : 'Enabling...'
|
||||
|
||||
try {
|
||||
const action = currentlyEnabled ? 'disable' : 'enable'
|
||||
const url = generateUrl(`/apps/astrolabe/api/admin/webhooks/presets/${presetId}/${action}`)
|
||||
|
||||
const response = await axios.post(url)
|
||||
|
||||
if (!response.data.success) {
|
||||
throw new Error(response.data.error || `Failed to ${action} preset`)
|
||||
}
|
||||
|
||||
// Reload presets to update UI
|
||||
await initWebhookManagement()
|
||||
|
||||
// Show success notification
|
||||
OC.Notification.showTemporary(response.data.message || `Preset ${action}d successfully`)
|
||||
} catch (error) {
|
||||
console.error(`Failed to toggle preset ${presetId}:`, error)
|
||||
|
||||
// Restore button state
|
||||
toggleBtn.disabled = false
|
||||
toggleBtn.textContent = originalText
|
||||
|
||||
// Show error notification
|
||||
OC.Notification.showTemporary(
|
||||
error.message || 'Failed to toggle webhook preset',
|
||||
{ type: 'error' },
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS.
|
||||
*
|
||||
* @param {string} text Text to escape
|
||||
* @return {string} Escaped text
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div')
|
||||
div.textContent = text
|
||||
return div.innerHTML
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div class="markdown-viewer" v-html="html" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarkdownIt from 'markdown-it'
|
||||
|
||||
export default {
|
||||
name: 'MarkdownViewer',
|
||||
|
||||
props: {
|
||||
content: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const md = new MarkdownIt({
|
||||
html: false, // Disable HTML for security
|
||||
linkify: true,
|
||||
breaks: true,
|
||||
typographer: true,
|
||||
})
|
||||
|
||||
return {
|
||||
html: '',
|
||||
md,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
content: {
|
||||
immediate: true,
|
||||
handler(newContent) {
|
||||
this.renderMarkdown(newContent)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderMarkdown(text) {
|
||||
if (!text) {
|
||||
this.html = ''
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
this.html = this.md.render(text)
|
||||
} catch (error) {
|
||||
console.error('Markdown rendering error:', error)
|
||||
// Fallback to escaped plain text
|
||||
this.html = `<pre>${this.escapeHtml(text)}</pre>`
|
||||
}
|
||||
},
|
||||
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div')
|
||||
div.textContent = text
|
||||
return div.innerHTML
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.markdown-viewer {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-main-text);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
// Typography
|
||||
:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
:deep(h1) { font-size: 2em; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
|
||||
:deep(h2) { font-size: 1.5em; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
|
||||
:deep(h3) { font-size: 1.25em; }
|
||||
:deep(h4) { font-size: 1em; }
|
||||
:deep(h5) { font-size: 0.875em; }
|
||||
:deep(h6) { font-size: 0.85em; color: var(--color-text-maxcontrast); }
|
||||
|
||||
// Paragraphs and spacing
|
||||
:deep(p) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// Lists
|
||||
:deep(ul), :deep(ol) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
:deep(li) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
// Code blocks
|
||||
:deep(code) {
|
||||
padding: 2px 6px;
|
||||
background: var(--color-background-dark);
|
||||
border-radius: var(--border-radius);
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
:deep(pre) {
|
||||
background: var(--color-background-dark);
|
||||
padding: 16px;
|
||||
border-radius: var(--border-radius);
|
||||
overflow-x: auto;
|
||||
margin-bottom: 16px;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
:deep(blockquote) {
|
||||
margin: 0 0 16px 0;
|
||||
padding: 0 16px;
|
||||
border-left: 4px solid var(--color-primary-element);
|
||||
color: var(--color-text-maxcontrast);
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
:deep(a) {
|
||||
color: var(--color-primary-element);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
:deep(table) {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(th), :deep(td) {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(th) {
|
||||
background: var(--color-background-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Horizontal rule
|
||||
:deep(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
// Images
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+228
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="pdf-viewer">
|
||||
<div v-if="loading" class="loading-indicator">
|
||||
<NcLoadingIcon :size="64" />
|
||||
<p>{{ t('astrolabe', 'Loading PDF...') }}</p>
|
||||
</div>
|
||||
<div v-else-if="error" class="error-message">
|
||||
<AlertCircle :size="48" />
|
||||
<p>{{ error }}</p>
|
||||
</div>
|
||||
<div v-else ref="container" class="pdf-canvas-container">
|
||||
<canvas ref="canvas" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as pdfjsLib from 'pdfjs-dist'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
|
||||
import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
|
||||
|
||||
export default {
|
||||
name: 'PDFViewer',
|
||||
components: {
|
||||
NcLoadingIcon,
|
||||
AlertCircle,
|
||||
},
|
||||
props: {
|
||||
filePath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
pageNumber: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
scale: {
|
||||
type: Number,
|
||||
default: 1.5,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pdfDoc: null,
|
||||
loading: true,
|
||||
error: null,
|
||||
totalPages: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pageNumber(newPage) {
|
||||
if (this.pdfDoc && newPage > 0 && newPage <= this.totalPages) {
|
||||
this.renderPage(newPage)
|
||||
}
|
||||
},
|
||||
filePath() {
|
||||
// Reload PDF if file path changes
|
||||
this.loadPDF()
|
||||
},
|
||||
async loading(newLoading) {
|
||||
// When loading completes, wait for canvas to be available and render
|
||||
if (!newLoading && this.pdfDoc && !this.error) {
|
||||
// Wait for Vue to update DOM
|
||||
await this.$nextTick()
|
||||
// Canvas should now be rendered (v-else condition)
|
||||
if (this.$refs.canvas) {
|
||||
await this.renderPage(this.pageNumber)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadPDF()
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.pdfDoc) {
|
||||
this.pdfDoc.destroy()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
t,
|
||||
async loadPDF() {
|
||||
this.loading = true
|
||||
this.error = null
|
||||
|
||||
try {
|
||||
// Clean and encode the file path
|
||||
const cleanPath = this.filePath.startsWith('/')
|
||||
? this.filePath.substring(1)
|
||||
: this.filePath
|
||||
const encodedPath = cleanPath.split('/').map(encodeURIComponent).join('/')
|
||||
const downloadUrl = generateUrl(`/remote.php/webdav/${encodedPath}`)
|
||||
|
||||
// Load PDF document
|
||||
const loadingTask = pdfjsLib.getDocument({
|
||||
url: downloadUrl,
|
||||
withCredentials: true,
|
||||
useWorkerFetch: false, // Disable worker fetch for CSP compliance
|
||||
isEvalSupported: false, // Disable eval for CSP
|
||||
})
|
||||
|
||||
this.pdfDoc = await loadingTask.promise
|
||||
this.totalPages = this.pdfDoc.numPages
|
||||
this.$emit('loaded', { totalPages: this.totalPages })
|
||||
|
||||
// Set loading to false - the watcher will handle rendering
|
||||
this.loading = false
|
||||
} catch (err) {
|
||||
console.error('PDF load error:', err)
|
||||
|
||||
// Provide user-friendly error messages
|
||||
if (err.name === 'MissingPDFException') {
|
||||
this.error = t('astrolabe', 'PDF file not found')
|
||||
} else if (err.name === 'InvalidPDFException') {
|
||||
this.error = t('astrolabe', 'Invalid or corrupted PDF file')
|
||||
} else if (err.message?.includes('NetworkError') || err.message?.includes('Network')) {
|
||||
this.error = t('astrolabe', 'Network error loading PDF')
|
||||
} else if (err.message?.includes('404')) {
|
||||
this.error = t('astrolabe', 'PDF file not found')
|
||||
} else {
|
||||
this.error = t('astrolabe', 'Unable to load PDF file')
|
||||
}
|
||||
|
||||
this.$emit('error', err)
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async renderPage(pageNum) {
|
||||
if (!this.pdfDoc) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const page = await this.pdfDoc.getPage(pageNum)
|
||||
const canvas = this.$refs.canvas
|
||||
|
||||
if (!canvas) {
|
||||
console.error('PDF canvas ref not found')
|
||||
this.error = t('astrolabe', 'Canvas element not available')
|
||||
return
|
||||
}
|
||||
|
||||
const context = canvas.getContext('2d')
|
||||
|
||||
// Use scale for better resolution on high-DPI screens
|
||||
const viewport = page.getViewport({ scale: this.scale })
|
||||
|
||||
canvas.height = viewport.height
|
||||
canvas.width = viewport.width
|
||||
|
||||
// Render page to canvas
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport,
|
||||
}
|
||||
|
||||
await page.render(renderContext).promise
|
||||
|
||||
this.$emit('page-rendered', { pageNumber: pageNum })
|
||||
} catch (err) {
|
||||
console.error('PDF render error:', err)
|
||||
this.error = t('astrolabe', 'Error rendering PDF page')
|
||||
this.$emit('error', err)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pdf-viewer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 48px;
|
||||
|
||||
p {
|
||||
color: var(--color-text-maxcontrast);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 48px;
|
||||
color: var(--color-error);
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-canvas-container {
|
||||
position: relative;
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background: var(--color-main-background);
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pdf-viewer {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
import Vue from 'vue'
|
||||
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.mixin({ methods: { t, n } })
|
||||
|
||||
const View = Vue.extend(App)
|
||||
new View().$mount('#astrolabe')
|
||||
Reference in New Issue
Block a user