3 <title> Cloudron Surfer
</title>
5 <link rel=
"stylesheet" href=
"/_admin/css/font-awesome.min.css">
6 <link rel=
"stylesheet" href=
"/_admin/css/bootstrap.min.css">
7 <link rel=
"stylesheet" href=
"/_admin/css/style.css">
9 <link href=
"/_admin/img/logo.png" rel=
"icon" type=
"image/png">
12 <body id=
"app" @
drop=
"drop" @
dragover=
"dragOver">
14 <nav class=
"navbar navbar-default" v-cloak
>
15 <div class=
"container-fluid">
16 <!-- Brand and toggle get grouped for better mobile display -->
17 <div class=
"navbar-header">
18 <button type=
"button" class=
"navbar-toggle collapsed" data-toggle=
"collapse" data-target=
"#bs-example-navbar-collapse-1" aria-expanded=
"false">
19 <span class=
"sr-only">Toggle navigation
</span>
20 <span class=
"icon-bar"></span>
21 <span class=
"icon-bar"></span>
22 <span class=
"icon-bar"></span>
24 <a class=
"navbar-brand" href=
"#">Surfer
</a>
27 <!-- Collect the nav links, forms, and other content for toggling -->
28 <div class=
"collapse navbar-collapse" id=
"bs-example-navbar-collapse-1">
29 <ul class=
"nav navbar-nav navbar-right">
30 <li v-show=
"session.valid"><a href=
"#" v-on:
click=
"logout()" id=
"logoutButton">Logout
</a></li>
36 <div class=
"modal fade" tabindex=
"-1" role=
"dialog" id=
"modalDelete" v-cloak
>
37 <div class=
"modal-dialog">
38 <div class=
"modal-content">
39 <div class=
"modal-header">
40 <button type=
"button" class=
"close" data-dismiss=
"modal" aria-label=
"Close"><span aria-hidden=
"true">×</span></button>
42 <div class=
"modal-body">
43 <h5 v-show=
"deleteData.isFile">Really delete
<span style=
"font-weight: bold;">{{ deleteData.filePath }}
</span>?
</h5>
44 <h5 v-show=
"deleteData.isDirectory">Really delete folder
<span style=
"font-weight: bold;">{{ deleteData.filePath }}
</span> and all its content?
</h5>
46 <div class=
"modal-footer">
47 <button type=
"button" class=
"btn btn-default" data-dismiss=
"modal">No
</button>
48 <button type=
"button" class=
"btn btn-danger" v-on:
click=
"del(deleteData)">Yes
</button>
54 <div class=
"modal fade" tabindex=
"-1" role=
"dialog" id=
"modalRename" v-cloak
>
55 <div class=
"modal-dialog">
56 <div class=
"modal-content">
57 <div class=
"modal-header">
58 <button type=
"button" class=
"close" data-dismiss=
"modal" aria-label=
"Close"><span aria-hidden=
"true">×</span></button>
59 <h4 class=
"modal-title">Rename {{ renameData.entry.filePath }}
</h4>
61 <div class=
"modal-body">
62 <form v-on:submit.
prevent=
"rename(renameData)">
63 <div class=
"form-group" v-bind:
class=
"{ 'has-error': renameData.error }">
64 <input type=
"text" class=
"form-control" v-model=
"renameData.newFilePath" placeholder=
"Name" autofocus=
"true">
65 <label class=
"control-label">{{ renameData.error }}
</label>
67 <button type=
"submit" style=
"display: none;"></button>
70 <div class=
"modal-footer">
71 <button type=
"button" class=
"btn btn-default" data-dismiss=
"modal">No
</button>
72 <button type=
"button" class=
"btn btn-success" v-on:
click=
"rename(renameData)">Yes
</button>
78 <div class=
"modal fade" tabindex=
"-1" role=
"dialog" id=
"modalcreateDirectory" v-cloak
>
79 <div class=
"modal-dialog">
80 <div class=
"modal-content">
81 <div class=
"modal-header">
82 <button type=
"button" class=
"close" data-dismiss=
"modal" aria-label=
"Close"><span aria-hidden=
"true">×</span></button>
83 <h4 class=
"modal-title">New directory name
</h4>
85 <div class=
"modal-body">
86 <form v-on:submit.
prevent=
"createDirectory(createDirectoryData)">
87 <div class=
"form-group" v-bind:
class=
"{ 'has-error': createDirectoryError }">
88 <input type=
"text" class=
"form-control" v-model=
"createDirectoryData" id=
"inputDirectoryName" placeholder=
"Name" autofocus=
"true">
89 <label class=
"control-label" for=
"inputDirectoryName">{{ createDirectoryError }}
</label>
91 <button type=
"submit" style=
"display: none;"></button>
94 <div class=
"modal-footer">
95 <button type=
"button" class=
"btn btn-default" data-dismiss=
"modal">Close
</button>
96 <button type=
"button" class=
"btn btn-primary" v-on:
click=
"createDirectory(createDirectoryData)">Create
</button>
102 <div class=
"container" v-show=
"uploadStatus.busy" v-cloak
>
104 <div class=
"col-lg-12">
105 <p>Uploading... ({{ uploadStatus.done }} / {{ uploadStatus.count }})
</p>
107 <div class=
"progress">
108 <div class=
"progress-bar progress-bar-striped" role=
"progressbar" v-bind:
style=
"{ width: uploadStatus.percentDone + '%' }">
109 <span class=
"sr-only">{{ uploadStatus.percentDone }}% Complete
</span>
117 <div class=
"container" v-show=
"!session.valid && !busy" v-cloak
>
119 <div class=
"col-lg-6 col-lg-offset-3">
120 <form id=
"loginForm" v-on:submit.
prevent=
"login()">
121 <div class=
"form-group">
122 <label for=
"inputUsername">Username
</label>
123 <input type=
"text" class=
"form-control" id=
"inputUsername" v-model=
"loginData.username" placeholder=
"Username">
125 <div class=
"form-group">
126 <label for=
"inputPassword">Password
</label>
127 <input type=
"password" class=
"form-control" id=
"inputPassword" v-model=
"loginData.password" placeholder=
"Password">
129 <button type=
"submit" class=
"btn btn-default">Submit
</button>
135 <div class=
"container main" v-show=
"session.valid" v-cloak
>
137 <div class=
"col-lg-12">
138 <center v-show=
"!uploadStatus.busy">
139 <form id=
"fileUploadForm">
140 <input type=
"file" v-el:upload
style=
"display: none" id=
"uploadInput" multiple
/>
141 <button class=
"btn btn-primary" v-on:click.stop.
prevent=
"upload()" id=
"uploadButton">Upload
</button>
145 <div class=
"col-lg-12">
146 <ol class=
"breadcrumb">
147 <li><a href=
"#/"><i class=
"fa fa-home"></i></a></li>
148 <li v-for=
"part in pathParts.slice(0, -1)">
149 <a href=
"{{ part.link }}">{{ part.name }}
</a>
151 <li>{{ pathParts.slice(-
1)[
0].name }}
</li>
152 <button class=
"btn btn-default btn-sm pull-right" v-on:
click=
"createDirectoryAsk()">Create Folder
</button>
155 <div class=
"col-lg-12" v-show=
"busy">
159 <i class=
"fa fa-refresh fa-4x fa-spin"></i>
162 <div class=
"col-lg-12" v-show=
"!busy">
163 <table class=
"table table-hover table-condensed">
174 <tr v-show=
"entries.length === 0">
175 <th colspan=
"5"><i>Empty folder
</i></th>
177 <tr v-for=
"entry in entries" v-on:
click=
"open(entry)" class=
"hand">
179 <img v-bind:
src=
"entry.previewUrl" height=
"48px" width=
"48px"/>
181 <th>{{ entry.filePath }}
</th>
182 <th>{{ entry.size | prettyFileSize }}
</th>
183 <th><span v-my-tooltip=
"foobar" data-toggle=
"tooltip" title=
"{{ entry.mtime }}">{{ entry.mtime | prettyDate }}
</span></th>
184 <th style=
"text-align: right;">
185 <span class=
"entry-toolbar">
186 <button class=
"btn btn-sm btn-default" v-on:click.
stop=
"renameAsk(entry)" title=
"Rename"><i class=
"fa fa-pencil"></i></button>
187 <button class=
"btn btn-sm btn-danger" v-on:click.
stop=
"delAsk(entry)" title=
"Delete"><i class=
"fa fa-trash"></i></button>
198 <footer class=
"text-center">
199 <span class=
"text-muted">Created by the
<a href=
"https://cloudron.io" target=
"_blank">Cloudron
</a> team
<a href=
"https://github.com/nebulade/surfer" target=
"_blank">hosted on Github
</a></span>
202 <script src=
"/_admin/js/jquery-1.12.1.min.js"></script>
203 <script src=
"/_admin/js/bootstrap.min.js"></script>
204 <script src=
"/_admin/js/vue.min.js"></script>
205 <script src=
"/_admin/js/filesize.min.js"></script>
206 <script src=
"/_admin/js/superagent.js"></script>
207 <script src=
"/_admin/js/app.js"></script>