349 lines
16 KiB
PHTML
349 lines
16 KiB
PHTML
<header class="clear" data-version>
|
|
<a href="/console" class="logo pull-start">
|
|
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" loading="lazy" />
|
|
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" loading="lazy" />
|
|
</a>
|
|
|
|
<div class="change-project pull-start desktops-only">
|
|
<div class="list project-only margin-end-small">
|
|
<label class="margin-bottom-no">
|
|
<select class="margin-bottom-no"
|
|
data-xanalytics-event="change"
|
|
data-xanalytics-category="console/header"
|
|
data-xanalytics-label="Project Switch"
|
|
data-switch
|
|
data-ls-bind="{{router.params.project}}"
|
|
data-unsync="1"
|
|
data-ls-loop="projects.projects" data-ls-as="option" aria-label="Switch Project">
|
|
<option data-ls-attrs="value={{option.$id}}" data-ls-bind="{{option.name}}"></option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<button style="overflow: visible;" class="project-only setup-new tooltip round down pull-end" aria-label="Quick Start" data-tooltip="Create a new project"><i class="icon-plus"></i></button>
|
|
</div>
|
|
|
|
<div class="account-box pull-end"
|
|
data-service="account.get"
|
|
data-name="account"
|
|
data-scope="console"
|
|
data-event="load"
|
|
data-success="trigger"
|
|
data-success-param-trigger-events="account.get"
|
|
data-failure="trigger"
|
|
data-failure-param-trigger-events="account.deleteSession">
|
|
|
|
<div class="console-back">
|
|
<a href="/console" class="link-return-animation--end">Back to Console <i class="icon-right-open"></i></a>
|
|
</div>
|
|
|
|
<div class="account link pull-end clear">
|
|
<img src="" data-ls-attrs="src={{account|avatar}}" alt="User Avatar" class="avatar margin-start pull-end" />
|
|
<span class="name pull-end desktops-only" data-ls-bind="{{account.name}}"></span>
|
|
</div>
|
|
|
|
<div class="console-index drop-list bottom end" data-ls-ui-open="" data-button-text="" data-button-aria="Account Options" data-button-icon="" data-button-selector="[data-toggler]" data-button-class="account-button" data-blur="1">
|
|
<ul class="margin-top-large arrow-end">
|
|
<li>
|
|
<a href="/console/account"><i class="icon-user"></i> Your Account</a>
|
|
</li>
|
|
<li>
|
|
<span class="link"><i class="icon-sun-inv force-dark pull-start"></i><i class="icon-moon-inv force-light pull-start"></i> Change Theme
|
|
<div class="pull-end switch-theme">
|
|
<button data-general-theme
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/header"
|
|
data-analytics-label="Switch Theme">
|
|
<i class="icon-sun-inv force-light"></i>
|
|
<i class="icon-moon-inv force-dark"></i>
|
|
</button>
|
|
</div>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<nav class="project-only" data-ls-ui-open="" data-button-class="round icon-btn phones-only tablets-only" data-button-aria="Navigation" data-button-icon="icon-dot-3">
|
|
<a class="logo" href="/console"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="Logo Link">
|
|
<img src="/images/appwrite-nav.svg" loading="lazy" alt="Appwrite Logo" class="nav" />
|
|
|
|
<img src="/images/appwrite.svg" loading="lazy" alt="Appwrite Light Logo" class="top force-light" loading="lazy" />
|
|
<img src="/images/appwrite-footer-dark.svg" loading="lazy" alt="Appwrite Dark Logo" class="top force-dark" loading="lazy" />
|
|
</a>
|
|
|
|
<div data-ui-highlight class="container">
|
|
|
|
<ul class="links">
|
|
<li>
|
|
<a data-ls-attrs="href=/console/home?project={{router.params.project}}"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="Home Link">
|
|
<i class="icon-home"></i>
|
|
Home
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<b class="subtitle">DEVELOP</b>
|
|
|
|
<ul class="links">
|
|
<li>
|
|
<a data-ls-attrs="href=/console/database?project={{router.params.project}}"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="Database Link">
|
|
<i class="icon-database"></i>
|
|
Database
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-ls-attrs="href=/console/storage?project={{router.params.project}}"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="Storage Link">
|
|
<i class="icon-folder"></i>
|
|
Storage
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-ls-attrs="href=/console/users?project={{router.params.project}}"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="Users Link">
|
|
<i class="icon-users"></i>
|
|
Users
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-ls-attrs="href=/console/functions?project={{router.params.project}}"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="Functions Link"
|
|
class="link-animation-disabled">
|
|
<i class="icon-lightning"></i>
|
|
Functions
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<b class="subtitle">MANAGE</b>
|
|
|
|
<ul class="links">
|
|
<li>
|
|
<a data-ls-attrs="href=/console/webhooks?project={{router.params.project}}"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="Webhooks Links">
|
|
<i class="icon-link"></i>
|
|
Webhooks
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-ls-attrs="href=/console/keys?project={{router.params.project}}"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="API Keys Link">
|
|
<i class="icon-key-inv"></i>
|
|
API Keys
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<ul class="links bottom">
|
|
<li>
|
|
<a data-ls-attrs="href=/console/settings?project={{router.params.project}}"
|
|
data-analytics
|
|
data-analytics-event="click"
|
|
data-analytics-category="console/navigation"
|
|
data-analytics-label="Settings Link">
|
|
<i class="icon-cog"></i> Settings</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class=""
|
|
data-service="projects.list"
|
|
data-event="load,projects.update"
|
|
data-name="projects"
|
|
data-scope="console"></div>
|
|
|
|
<div class="load-screen" data-ls-ui-loader>
|
|
<div class="animation"><div></div><div></div><div></div><div></div></div>
|
|
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" loading="lazy" />
|
|
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" loading="lazy" />
|
|
</div>
|
|
|
|
<div data-ui-modal class="modal box close sticky-footer" data-button-alias=".setup-new" data-button-icon="icon-plus" data-button-class="project-only" data-open-event="create-project">
|
|
<h1>Create Project</h1>
|
|
|
|
<form
|
|
data-setup
|
|
data-analytics
|
|
data-analytics-activity
|
|
data-analytics-event="submit"
|
|
data-analytics-category="console"
|
|
data-analytics-label="Create Project">
|
|
<p>Appwrite projects are containers for your resources and apps across different platforms.</p>
|
|
|
|
<label>Project ID</label>
|
|
<input
|
|
type="hidden"
|
|
data-custom-id
|
|
data-id-type="auto"
|
|
data-validator="projects.get"
|
|
required
|
|
maxlength="36"
|
|
class=""
|
|
pattern="^[a-zA-Z0-9][a-zA-Z0-9_.-]{1,36}$"
|
|
name="projectId" />
|
|
|
|
<label>Name</label>
|
|
<input type="text" class="full-width margin-bottom-xl" name="name" required autocomplete="off" maxlength="128" />
|
|
|
|
<footer>
|
|
<button type="submit">Create</button> <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
|
|
</footer>
|
|
</form>
|
|
</div>
|
|
|
|
<section class="upload-box" x-data x-show="$store.uploader.files.length > 0">
|
|
<div class="upload-box-header">
|
|
<h4 class="upload-box-title">
|
|
<span class="text">Uploading files</span>
|
|
<span class="amount" x-text="$store.uploader.files.length"></span>
|
|
</h4>
|
|
<button class="icon-button" :class="$store.uploader.isOpen ? '' : 'is-open'" aria-label="toggle upload box" @click="$store.uploader.toggle()"><span class="icon-down-open" aria-hidden="true"></span></button>
|
|
<button class="icon-button" aria-label="close upload box"><span class="icon-cancel" aria-hidden="true"></span></button>
|
|
</div>
|
|
<div class="upload-box-content" :class="$store.uploader.isOpen ? 'is-open' : ''">
|
|
<ul class="upload-box-list">
|
|
<template x-if="$store.uploader.files.length > 0">
|
|
<template x-for="file in $store.uploader.files" :key="file.id">
|
|
<li class="upload-box-item">
|
|
<div class="upload-image u-margin-inline-end-16" :class="file.completed ? 'is-finished' : ''">
|
|
<div class="progress"
|
|
:style="'--progress-value:' + file.progress"
|
|
:aria-valuenow="file.progress"
|
|
role="progressbar"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
<span class="icon" x-text="file.progress"></span>
|
|
</div>
|
|
<label for="file1" class="file-name" x-text="file.name"></label>
|
|
<button x-show="file.completed" class="icon-button is-success" aria-label="Uploading"><span class="icon-ok"></span></button>
|
|
<button x-show="!file.completed" class="icon-button" aria-label="Uploading" @click="$store.uploader.removeFile(file.id)"><span class="icon-cancel"></span></button>
|
|
</li>
|
|
</template>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.store('uploader', {
|
|
files: [],
|
|
isOpen: true,
|
|
init() {
|
|
window.addEventListener('beforeunload', (event) => {
|
|
this.files.forEach((file) => {
|
|
if(!file.completed && !file.failed) {
|
|
let confirmationMessage = "There are incomplete uploads, are you sure you want to leave?";
|
|
event.returnValue = confirmationMessage;
|
|
return confirmationMessage;
|
|
}
|
|
});
|
|
});
|
|
},
|
|
toggle() {
|
|
this.isOpen = !this.isOpen;
|
|
},
|
|
addFile(file) {
|
|
this.files.push(file);
|
|
},
|
|
updateFile(id, file) {
|
|
this.files = this.files.map((oldFile) => id == oldFile.id ? {...oldFile, ...file} : oldFile);
|
|
},
|
|
removeFile(id) {
|
|
this.files = this.files.filter((file) => file.id !== id);
|
|
},
|
|
async uploadFile(target) {
|
|
const formData = new FormData(target);
|
|
const sdk = window.ls.container.get('sdk');
|
|
const file = formData.get('file');
|
|
const fileId = formData.get('fileId');
|
|
const id = fileId === 'unique()' ? performance.now() : fileId;
|
|
let read = formData.get('read');
|
|
if(read) {
|
|
read = JSON.parse(read);
|
|
}
|
|
let write = formData.get('write');
|
|
if(write) {
|
|
write = JSON.parse(wirte);
|
|
}
|
|
|
|
this.addFile({
|
|
id: id,
|
|
name: file.name,
|
|
progress: 0,
|
|
completed: false,
|
|
failed: false,
|
|
isCancelled: false,
|
|
});
|
|
target.reset();
|
|
try {
|
|
const response = await sdk.storage.createFile(
|
|
formData.get('bucketId'),
|
|
fileId,
|
|
file,
|
|
read,
|
|
write,
|
|
(progress) => {
|
|
/*if cancelled
|
|
throw something
|
|
- When cancelled we need to delete the file
|
|
- but we don't yet have the id of the file,
|
|
- after resumable upload change, we will have the id
|
|
*/
|
|
this.updateFile(id, {
|
|
id: id,
|
|
progress: Math.round(progress),
|
|
});
|
|
});
|
|
this.updateFile(id,{
|
|
id: response.$id,
|
|
name: response.name,
|
|
progress: 100,
|
|
completed: true,
|
|
failed: false,
|
|
});
|
|
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
|
} catch(error) {
|
|
this.updateFile(id, {
|
|
id: id,
|
|
failed: true,
|
|
});
|
|
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
|
}
|
|
}
|
|
|
|
});
|
|
})
|
|
</script>
|