3 <title> Cloudron Surfer
</title>
5 <meta name=
"viewport" content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <link rel=
"icon" type=
"image/png" href=
"/_admin/img/logo.png">
9 <link rel=
"stylesheet" href=
"/_admin/css/theme-chalk.css">
10 <link rel=
"stylesheet" href=
"/_admin/css/style.css">
12 <script src=
"/_admin/js/jquery-1.12.1.min.js"></script>
13 <script src=
"/_admin/js/vue.js"></script>
14 <script src=
"/_admin/js/element-ui.js"></script>
15 <script src=
"/_admin/js/filesize.min.js"></script>
16 <script src=
"/_admin/js/superagent.js"></script>
17 <script src=
"/_admin/js/sorttable.js"></script>
22 <el-container id=
"app" @
drop=
"drop" @
dragover=
"dragOver">
23 <input type=
"file" ref=
"upload" style=
"display: none" id=
"uploadInput" multiple
/>
25 <el-dialog title=
"Login" :visible.
sync=
"ready && !session.valid" width=
"30%" :
close-on-press-escape=
"false" :
show-close=
"false">
26 <el-form :
model=
"loginData" label-position=
"top" @submit.native.prevent
>
27 <el-form-item label=
"Username"><el-input v-model=
"loginData.username" required autofocus
></el-input></el-form-item>
28 <el-form-item label=
"Password"><el-input v-model=
"loginData.password" type=
"password" required
></el-input></el-form-item>
29 <input type=
"submit" @
click=
"onLogin" v-show=
"false"/>
31 <span slot=
"footer" class=
"dialog-footer">
32 <el-button type=
"primary" @
click=
"onLogin"><i class=
"el-icon-loading" v-show=
"busy"></i><span v-show=
"!busy">Login
</span></el-button>
37 <el-row type=
"flex" justify=
"space-between">
38 <div style=
"padding: 7px;">
41 <div style=
"flex-grow: 2; padding: 0 7px;" v-show=
"session.valid">
42 <el-breadcrumb separator-class=
"el-icon-arrow-right">
43 <el-breadcrumb-item><a href=
"#/">Path /
</a></el-breadcrumb-item>
44 <el-breadcrumb-item v-for=
"part in pathParts.slice(0, -1)"><a :
href=
"part.link">{{ part.name }}
</a></el-breadcrumb-item>
45 <el-breadcrumb-item v-show=
"pathParts.slice(-1).length">{{ pathParts.slice(-
1).length ? pathParts.slice(-
1)[
0].name : '' }}
</el-breadcrumb-item>
48 <div align=
"right" v-show=
"session.valid">
50 <el-button type=
"primary" icon=
"el-icon-upload" size=
"small" @
click=
"onUpload">Upload
</el-button>
51 <el-button type=
"primary" icon=
"el-icon-plus" size=
"small" @
click=
"onNewFolder">New Folder
</el-button>
54 <el-dropdown @
command=
"onOptionsMenu">
55 <el-button size=
"small" icon=
"el-icon-more"></el-button>
56 <el-dropdown-menu slot=
"dropdown">
57 <el-dropdown-item disabled
>Public Folder Listing
</el-dropdown-item>
58 <el-dropdown-item command=
"folderListing">
59 <el-switch v-model=
"folderListingEnabled" active-text=
"Enabled" inactive-text=
"Disabled">
62 <el-dropdown-item command=
"about" divided
><i class=
"el-icon-info"></i> About
</el-dropdown-item>
63 <el-dropdown-item command=
"logout"><i class=
"el-icon-circle-close"></i> Logout
</el-dropdown-item>
71 <!-- <div class="container" v-show="uploadStatus.busy" v-cloak>
73 <div class="col-lg-12">
74 <p>Uploading... ({{ uploadStatus.done }} / {{ uploadStatus.count }}) </p>
76 <div class="progress">
77 <div class="progress-bar progress-bar-striped" role="progressbar" v-bind:style="{ width: uploadStatus.percentDone + '%' }">
78 <span class="sr-only">{{ uploadStatus.percentDone }}% Complete</span>
87 <center><h1><i class=
"el-icon-loading"></i></h1></center>
90 <div v-show=
"!busy && session.valid" v-cloak
>
91 <el-table :
data=
"entries" style=
"width: 100%" height=
"100%" empty-text=
"Folder is emtpy" :
default-sort=
"{ prop: 'filePath', order: 'descending' }" @
row-click=
"open">
92 <el-table-column prop=
"previewUrl" label=
"Type" width=
"100px" sortable
>
93 <template slot-scope=
"scope">
94 <img v-bind:
src=
"scope.row.previewUrl" height=
"48px" width=
"48px"/>
97 <el-table-column prop=
"filePath" label=
"Name" sortable
></el-table-column>
98 <el-table-column prop=
"size" label=
"Size" width=
"150px" sortable :
formatter=
"prettyFileSize"></el-table-column>
99 <el-table-column prop=
"mtime" label=
"Modified" width=
"150px" sortable :
formatter=
"prettyDate"></el-table-column>
100 <el-table-column label=
"Actions" align=
"right" width=
"200px" class-name=
"list-actions">
101 <template slot-scope=
"scope">
102 <el-button size=
"small" icon=
"el-icon-download" circle
v-show=
"scope.row.isFile" @click.
stop=
"onDownload(scope.row)"></el-button>
103 <el-button size=
"small" icon=
"el-icon-edit" circle @click.
stop=
"onRename(scope.row)"></el-button>
104 <el-button size=
"small" icon=
"el-icon-delete" circle @click.
stop=
"onDelete(scope.row)"></el-button>
111 <el-footer style=
"height: 24px">Built by the
<a href=
"https://cloudron.io" target=
"_blank">Cloudron.io
</a> team.
<a href=
"https://git.cloudron.io/cloudron/surfer" target=
"_blank">Get the code
</a></el-footer>
114 <script src=
"/_admin/js/app.js"></script>