Added working plugin store prototype

- Added plugin install and remove api
This commit is contained in:
Toby Chui
2025-04-24 21:19:16 +08:00
parent 6750c7fe3d
commit ffc67ede12
6 changed files with 362 additions and 32 deletions

View File

@@ -43,6 +43,10 @@
<script src="../script/darktheme.js"></script>
<br>
<div class="ui container">
<div class="ui warning message">
<div class="header">Experimental Feature</div>
<p>The Plugin Store is an experimental feature. Use it at your own risk.</p>
</div>
<div class="ui fluid search">
<div class="ui fluid icon input">
<input id="searchInput" class="prompt" type="text" placeholder="Search plugins">
@@ -53,7 +57,7 @@
</div>
<button class="ui basic button" onclick="forceResyncPlugins();"><i class="ui green refresh icon"></i> Update Plugin List</button>
<div class="ui divider"></div>
<!-- <div class="ui divider"></div>
<div class="ui basic segment advanceoptions">
<div class="ui accordion advanceSettings">
<div class="title">
@@ -75,6 +79,7 @@
</div>
</div>
</div>
-->
<div class="ui divider"></div>
<div class="field" >
<button class="ui basic button" style="float: right;" onclick="closeThisWrapper();">Close</button>
@@ -126,7 +131,7 @@
const name = item.querySelector('.header').textContent.toLowerCase();
const description = item.querySelector('.description p').textContent.toLowerCase();
const author = item.querySelector('.meta span:nth-child(2)').textContent.toLowerCase();
const id = item.querySelector('.extra button').getAttribute('onclick').match(/'(.*?)'/)[1].toLowerCase();
const id = item.getAttribute('plugin_id').toLowerCase();
if (name.includes(query) || description.includes(query) || author.includes(query) || id.includes(query)) {
item.style.display = '';
@@ -145,6 +150,8 @@
});
function forceResyncPlugins() {
parent.msgbox("Updating plugin list...", true);
document.getElementById('searchInput').value = '';
$.cjax({
url: '/api/plugins/store/resync',
type: 'POST',
@@ -181,52 +188,58 @@
<div class="meta">
<span>Version: ${plugin.PluginIntroSpect.version_major}.${plugin.PluginIntroSpect.version_minor}.${plugin.PluginIntroSpect.version_patch}</span>
<span>${plugin.PluginIntroSpect.author}</span>
<span><a href="${plugin.PluginIntroSpect.url}">Website</a></span>
<span><a href="${plugin.PluginIntroSpect.url}" target="_blank">Website</a></span>
</div>
<div class="description">
<p>${plugin.PluginIntroSpect.description}</p>
</div>
<div class="action">
${thisPluginIsInstalled
? `<button class="ui basic circular red button" onclick="uninstallPlugin('${plugin.PluginIntroSpect.id}')"><i class="ui trash icon"></i> Remove</button>`
: `<button class="ui basic circular button" onclick="installPlugin('${plugin.PluginIntroSpect.id}')"><i class="ui download icon"></i> Install</button>`}
? `<button class="ui basic circular disabled button">Installed</button>`
: `<button class="ui basic circular button" onclick="installPlugin('${plugin.PluginIntroSpect.id}', this);",><i class="ui download icon"></i> Install</button>`}
</div>
</div>
</div>
`;
$('#pluginList').append(item);
});
// Reapply search filter if there's a query in the search bar
const searchQuery = document.getElementById('searchInput').value.toLowerCase();
if (searchQuery.trim() !== '') {
searchPlugins();
}
}
/* Plugin Actions */
function installPlugin(pluginId) {
function installPlugin(pluginId, btn=undefined) {
if (btn !== undefined) {
$(btn).addClass('loading').prop('disabled', true);
}
$.cjax({
url: '/api/plugins/store/install',
type: 'POST',
data: { pluginId },
data: { "pluginID": pluginId },
success: function(data) {
if (btn !== undefined) {
$(btn).removeClass('loading').prop('disabled', false);
}
if (data.error != undefined) {
parent.msgbox(data.error, false);
} else {
parent.msgbox("Plugin installed successfully", true);
initStoreList();
}
}
});
}
function uninstallPlugin(pluginId) {
$.cjax({
url: '/api/plugins/store/uninstall',
type: 'POST',
data: { pluginId },
success: function(data) {
if (data.error != undefined) {
parent.msgbox(data.error, false);
} else {
parent.msgbox("Plugin uninstalled successfully", true);
initStoreList();
//Also reload the parent plugin list
parent.initiatePluginList();
}
},
error: function() {
if (btn !== undefined) {
$(btn).removeClass('loading').prop('disabled', false);
}
parent.msgbox("An error occurred while installing the plugin", false);
}
});
}