herrhase
/
urban-filehub
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

adding

master
Björn 3 years ago
parent
5891a5a505
commit
0314031fb7
14 changed files with 201 additions and 38 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +13
    -0
      app/Http/Controllers/Api/FileController.php
  2. +1
    -1
      public/css/bootstrap.css
  3. +2
    -2
      public/js/bootstrap.js
  4. +1
    -1
      public/js/bucket-single.js
  5. +1
    -1
      public/js/bucket.js
  6. +1
    -1
      public/symbol-defs.svg
  7. +5
    -0
      resources/icons/checkbox.svg
  8. +5
    -0
      resources/icons/checkbox_checked.svg
  9. +25
    -1
      resources/js/bootstrap.js
  10. +19
    -21
      resources/js/components/filemanager/actions.riot
  11. +35
    -10
      resources/js/components/filemanager/filemanager.riot
  12. +59
    -0
      resources/js/components/filemanager/upload.riot
  13. +33
    -0
      resources/scss/components/_file-table.scss
  14. +1
    -0
      routes/api.php

+ 13
- 0
app/Http/Controllers/Api/FileController.php View File

@ -35,4 +35,17 @@ class FileController extends BaseController
'files' => $files 'files' => $files
]); ]);
} }
/**
*
*
* @param Request $request [description]
* @param [type] $id [description]
* @return [type] [description]
*/
public function upload(Request $request, $id)
{
// create bucket
$bucket = Bucket::find($id);
}
} }

+ 1
- 1
public/css/bootstrap.css
File diff suppressed because it is too large
View File


+ 2
- 2
public/js/bootstrap.js
File diff suppressed because it is too large
View File


+ 1
- 1
public/js/bucket-single.js
File diff suppressed because it is too large
View File


+ 1
- 1
public/js/bucket.js
File diff suppressed because it is too large
View File


+ 1
- 1
public/symbol-defs.svg View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-add-circle" viewBox="0 0 30 30"><title>add-circle</title><path d="M21.27 16.23v-2.461h-5.039V8.73H13.77v5.039H8.731v2.461h5.039v5.039h2.461V16.23h5.039zM15 2.52q5.156 0 8.818 3.662T27.48 15t-3.662 8.818T15 27.48t-8.818-3.662T2.52 15t3.662-8.818T15 2.52z"/></symbol><symbol id="icon-back" viewBox="0 0 30 30"><title>back</title><path d="M12.48 11.25q6.094.879 9.404 4.658t4.365 9.111q-4.512-6.387-13.77-6.387v5.098L3.749 15l8.73-8.73v4.98z"/></symbol><symbol id="icon-build" viewBox="0 0 30 30"><title>build</title><path d="M28.359 23.73q.41.234.381.791t-.498.967l-2.871 2.871q-.879.879-1.758 0L12.246 16.992q-2.109.879-4.482.381t-4.131-2.256q-1.875-1.875-2.344-4.453t.703-4.805L7.5 11.25l3.75-3.75-5.391-5.391q2.227-1.055 4.805-.645t4.453 2.285q1.758 1.758 2.256 4.131t-.381 4.482z"/></symbol><symbol id="icon-delete" viewBox="0 0 30 30"><title>delete</title><path d="M23.73 4.98V7.5H6.269V4.98h4.336l1.289-1.23h6.211l1.289 1.23h4.336zM7.5 23.73v-15h15v15q0 .996-.762 1.758t-1.758.762h-9.961q-.996 0-1.758-.762t-.762-1.758z"/></symbol><symbol id="icon-download" viewBox="0 0 30 30"><title>download</title><path d="M6.27 22.5h17.461v2.52H6.27V22.5zm17.46-11.25L15 19.98l-8.73-8.73h4.98v-7.5h7.5v7.5h4.98z"/></symbol><symbol id="icon-email" viewBox="0 0 30 30"><title>email</title><path d="M25.02 10.02V7.5L15 13.77 4.98 7.5v2.52L15 16.231zm0-5.04q.996 0 1.729.762t.732 1.758v15q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762H25.02z"/></symbol><symbol id="icon-eye" viewBox="0 0 30 30"><title>eye</title><path d="M15 11.25q1.523 0 2.637 1.113T18.75 15t-1.113 2.637T15 18.75t-2.637-1.113T11.25 15t1.113-2.637T15 11.25zm0 10.02q2.578 0 4.424-1.846T21.27 15t-1.846-4.424T15 8.73t-4.424 1.846T8.73 15t1.846 4.424T15 21.27zm0-15.645q4.629 0 8.379 2.578T28.77 15q-1.641 4.219-5.391 6.797T15 24.375t-8.379-2.578T1.23 15q1.641-4.219 5.391-6.797T15 5.625z"/></symbol><symbol id="icon-folder" viewBox="0 0 30 30"><title>folder</title><path d="M12.48 4.98L15 7.5h10.02q.996 0 1.729.762t.732 1.758V22.5q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762h7.5z"/></symbol><symbol id="icon-move" viewBox="0 0 30 30"><title>move</title><path d="M15 11.25l4.98 5.039-4.98 4.98-1.816-1.758 1.992-1.992H10.02v-2.52h5.156l-1.934-1.992zM25.02 22.5V10.02H4.981V22.5H25.02zm0-15q.996 0 1.729.762t.732 1.758V22.5q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762h7.5l2.52 2.52h10.02z"/></symbol><symbol id="icon-secret" viewBox="0 0 30 30"><title>secret</title><path d="M8.73 17.52q.996 0 1.758-.762T11.25 15t-.762-1.758-1.758-.762-1.729.762T6.269 15t.732 1.758 1.729.762zm7.09-5.04h12.949v5.039h-2.52v4.98h-4.98v-4.98H15.82q-.762 2.051-2.842 3.516T8.73 22.5q-3.105 0-5.303-2.197T1.23 15t2.197-5.303T8.73 7.5q2.168 0 4.248 1.465t2.842 3.516z"/></symbol><symbol id="icon-tag" viewBox="0 0 30 30"><title>tag</title><path d="M6.855 8.73q.762 0 1.318-.557t.557-1.318-.557-1.318-1.318-.557-1.318.557-.557 1.318.557 1.318 1.318.557zm19.922 5.743q.703.703.703 1.758t-.703 1.758l-8.789 8.789q-.703.703-1.758.703t-1.758-.703l-11.25-11.25q-.703-.703-.703-1.758V4.981q0-.996.732-1.729T4.98 2.52h8.789q1.055 0 1.758.703z"/></symbol><symbol id="icon-upload" viewBox="0 0 30 30"><title>upload</title><path d="M6.27 22.5h17.461v2.52H6.27V22.5zm4.98-2.52v-7.5H6.27L15 3.75l8.73 8.73h-4.98v7.5h-7.5z"/></symbol></svg>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-add-circle" viewBox="0 0 30 30"><title>add-circle</title><path d="M21.27 16.23v-2.461h-5.039V8.73H13.77v5.039H8.731v2.461h5.039v5.039h2.461V16.23h5.039zM15 2.52q5.156 0 8.818 3.662T27.48 15t-3.662 8.818T15 27.48t-8.818-3.662T2.52 15t3.662-8.818T15 2.52z"/></symbol><symbol id="icon-back" viewBox="0 0 30 30"><title>back</title><path d="M12.48 11.25q6.094.879 9.404 4.658t4.365 9.111q-4.512-6.387-13.77-6.387v5.098L3.749 15l8.73-8.73v4.98z"/></symbol><symbol id="icon-build" viewBox="0 0 30 30"><title>build</title><path d="M28.359 23.73q.41.234.381.791t-.498.967l-2.871 2.871q-.879.879-1.758 0L12.246 16.992q-2.109.879-4.482.381t-4.131-2.256q-1.875-1.875-2.344-4.453t.703-4.805L7.5 11.25l3.75-3.75-5.391-5.391q2.227-1.055 4.805-.645t4.453 2.285q1.758 1.758 2.256 4.131t-.381 4.482z"/></symbol><symbol id="icon-checkbox_checked" viewBox="0 0 30 30"><title>checkbox_checked</title><path d="M12.48 21.27l11.25-11.25-1.758-1.816-9.492 9.492-4.453-4.453-1.758 1.758zM23.73 3.75q1.055 0 1.787.732t.732 1.787V23.73q0 1.055-.732 1.787t-1.787.732H6.269q-1.055 0-1.787-.732T3.75 23.73V6.269q0-1.055.732-1.787t1.787-.732H23.73z"/></symbol><symbol id="icon-checkbox" viewBox="0 0 30 30"><title>checkbox</title><path d="M23.73 3.75q.996 0 1.758.762t.762 1.758v17.461q0 .996-.762 1.758t-1.758.762H6.269q-.996 0-1.758-.762t-.762-1.758V6.27q0-.996.762-1.758t1.758-.762H23.73zm0 2.52H6.269v17.461H23.73V6.27z"/></symbol><symbol id="icon-delete" viewBox="0 0 30 30"><title>delete</title><path d="M23.73 4.98V7.5H6.269V4.98h4.336l1.289-1.23h6.211l1.289 1.23h4.336zM7.5 23.73v-15h15v15q0 .996-.762 1.758t-1.758.762h-9.961q-.996 0-1.758-.762t-.762-1.758z"/></symbol><symbol id="icon-download" viewBox="0 0 30 30"><title>download</title><path d="M6.27 22.5h17.461v2.52H6.27V22.5zm17.46-11.25L15 19.98l-8.73-8.73h4.98v-7.5h7.5v7.5h4.98z"/></symbol><symbol id="icon-email" viewBox="0 0 30 30"><title>email</title><path d="M25.02 10.02V7.5L15 13.77 4.98 7.5v2.52L15 16.231zm0-5.04q.996 0 1.729.762t.732 1.758v15q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762H25.02z"/></symbol><symbol id="icon-eye" viewBox="0 0 30 30"><title>eye</title><path d="M15 11.25q1.523 0 2.637 1.113T18.75 15t-1.113 2.637T15 18.75t-2.637-1.113T11.25 15t1.113-2.637T15 11.25zm0 10.02q2.578 0 4.424-1.846T21.27 15t-1.846-4.424T15 8.73t-4.424 1.846T8.73 15t1.846 4.424T15 21.27zm0-15.645q4.629 0 8.379 2.578T28.77 15q-1.641 4.219-5.391 6.797T15 24.375t-8.379-2.578T1.23 15q1.641-4.219 5.391-6.797T15 5.625z"/></symbol><symbol id="icon-folder" viewBox="0 0 30 30"><title>folder</title><path d="M12.48 4.98L15 7.5h10.02q.996 0 1.729.762t.732 1.758V22.5q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762h7.5z"/></symbol><symbol id="icon-move" viewBox="0 0 30 30"><title>move</title><path d="M15 11.25l4.98 5.039-4.98 4.98-1.816-1.758 1.992-1.992H10.02v-2.52h5.156l-1.934-1.992zM25.02 22.5V10.02H4.981V22.5H25.02zm0-15q.996 0 1.729.762t.732 1.758V22.5q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762h7.5l2.52 2.52h10.02z"/></symbol><symbol id="icon-secret" viewBox="0 0 30 30"><title>secret</title><path d="M8.73 17.52q.996 0 1.758-.762T11.25 15t-.762-1.758-1.758-.762-1.729.762T6.269 15t.732 1.758 1.729.762zm7.09-5.04h12.949v5.039h-2.52v4.98h-4.98v-4.98H15.82q-.762 2.051-2.842 3.516T8.73 22.5q-3.105 0-5.303-2.197T1.23 15t2.197-5.303T8.73 7.5q2.168 0 4.248 1.465t2.842 3.516z"/></symbol><symbol id="icon-tag" viewBox="0 0 30 30"><title>tag</title><path d="M6.855 8.73q.762 0 1.318-.557t.557-1.318-.557-1.318-1.318-.557-1.318.557-.557 1.318.557 1.318 1.318.557zm19.922 5.743q.703.703.703 1.758t-.703 1.758l-8.789 8.789q-.703.703-1.758.703t-1.758-.703l-11.25-11.25q-.703-.703-.703-1.758V4.981q0-.996.732-1.729T4.98 2.52h8.789q1.055 0 1.758.703z"/></symbol><symbol id="icon-upload" viewBox="0 0 30 30"><title>upload</title><path d="M6.27 22.5h17.461v2.52H6.27V22.5zm4.98-2.52v-7.5H6.27L15 3.75l8.73 8.73h-4.98v7.5h-7.5z"/></symbol></svg>

+ 5
- 0
resources/icons/checkbox.svg View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<title>checkbox</title>
<path d="M23.73 3.75q0.996 0 1.758 0.762t0.762 1.758v17.461q0 0.996-0.762 1.758t-1.758 0.762h-17.461q-0.996 0-1.758-0.762t-0.762-1.758v-17.461q0-0.996 0.762-1.758t1.758-0.762h17.461zM23.73 6.27h-17.461v17.461h17.461v-17.461z"></path>
</svg>

+ 5
- 0
resources/icons/checkbox_checked.svg View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<title>checkbox_checked</title>
<path d="M12.48 21.27l11.25-11.25-1.758-1.816-9.492 9.492-4.453-4.453-1.758 1.758zM23.73 3.75q1.055 0 1.787 0.732t0.732 1.787v17.461q0 1.055-0.732 1.787t-1.787 0.732h-17.461q-1.055 0-1.787-0.732t-0.732-1.787v-17.461q0-1.055 0.732-1.787t1.787-0.732h17.461z"></path>
</svg>

+ 25
- 1
resources/js/bootstrap.js View File

@ -1,2 +1,26 @@
window.axios = require('axios') window.axios = require('axios')
window.riot = require('riot')
window.riot = require('riot')
// riot-class-names-plugin.js
/**
* Convert object class constructs into strings
* @param {Object} classes - class list as object
* @returns {string} return only the classes having a truthy value
*/
function classNames(classes) {
return Object.entries(classes).reduce((acc, item) => {
const [key, value] = item
if (value) return [...acc, key]
return acc
}, []).join(' ')
}
// install the classNames plugin
riot.install(function(component) {
// add the classNames helper to all the riot components
component.classNames = classNames
return component
})

+ 19
- 21
resources/js/components/filemanager/actions.riot View File

@ -1,25 +1,23 @@
<urban-filemanager-actions> <urban-filemanager-actions>
<div if={ props.files.length > 0 }>
<div class="buttons">
<span class="filemanager-actions__selected">
<strong>{ props.files.length }</strong> files selected
</span>
<button class="button is-small is-success">
<svg class="icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-download"></use>
</svg>
</button>
<button class="button is-small is-danger">
<svg class="icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-move"></use>
</svg>
</button>
<button class="button is-small is-danger">
<svg class="icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-delete"></use>
</svg>
</button>
</div>
<div class="buttons mb-1">
<span class="filemanager-actions__selected">
<strong>{ props.files.length }</strong> files selected
</span>
<button class="button is-small is-success" disabled={ props.files.length <= 0 }>
<svg class="icon filled" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-download"></use>
</svg>
</button>
<button class="button is-small is-danger" disabled={ props.files.length <= 0 }>
<svg class="icon filled" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-move"></use>
</svg>
</button>
<button class="button is-small is-danger" disabled={ props.files.length <= 0 }>
<svg class="icon filled" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-delete"></use>
</svg>
</button>
</div> </div>
<script> <script>


+ 35
- 10
resources/js/components/filemanager/filemanager.riot View File

@ -1,14 +1,26 @@
<urban-filemanager> <urban-filemanager>
<div class="bucket-filemanager"> <div class="bucket-filemanager">
<div class="file-multi">
<urban-filemanager-upload></urban-filemanager-upload>
</div>
<div class="file-multi"> <div class="file-multi">
<urban-filemanager-actions files={ state.marked }></urban-filemanager-actions> <urban-filemanager-actions files={ state.marked }></urban-filemanager-actions>
</div> </div>
<div class="file-table"> <div class="file-table">
<urban-filemanager-parent handleClick={ handleParentClick } if={ state.path.length > 0 }></urban-filemanager-parent> <urban-filemanager-parent handleClick={ handleParentClick } if={ state.path.length > 0 }></urban-filemanager-parent>
<template each={ file in state.files }>
<div class="file-table__row">
<template each={ (file, index) in state.files }>
<div class={ classNames({ 'file-table__row': true, 'file-table__row--current': isFileInArray(file) }) }>
<div class="file-table__column file-table__column--select" onchange={ (event) => { handleMarked(event, file) } }> <div class="file-table__column file-table__column--select" onchange={ (event) => { handleMarked(event, file) } }>
<input type="checkbox" value="true" />
<input id="marked_{ index }" type="checkbox" value="true" />
<label for="marked_{ index }">
<svg class="icon checked" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-checkbox_checked"></use>
</svg>
<svg class="icon unchecked" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-checkbox"></use>
</svg>
</label>
</div> </div>
<div if={ file.is_file } class="file-table__column file-table__column--filename"> <div if={ file.is_file } class="file-table__column file-table__column--filename">
@ -66,11 +78,13 @@
import axios from 'axios' import axios from 'axios'
import File from './file.riot' import File from './file.riot'
import Upload from './upload.riot'
import Directory from './directory.riot' import Directory from './directory.riot'
import Parent from './parent.riot' import Parent from './parent.riot'
import Actions from './actions.riot' import Actions from './actions.riot'
riot.register('urban-filemanager-file', File) riot.register('urban-filemanager-file', File)
riot.register('urban-filemanager-upload', Upload)
riot.register('urban-filemanager-directory', Directory) riot.register('urban-filemanager-directory', Directory)
riot.register('urban-filemanager-parent', Parent) riot.register('urban-filemanager-parent', Parent)
riot.register('urban-filemanager-actions', Actions) riot.register('urban-filemanager-actions', Actions)
@ -140,13 +154,7 @@
*/ */
handleMarked(event, file) { handleMarked(event, file) {
let exists = false
this.state.marked.forEach((f, index) => {
if (file.filename === f.filename) {
exists = true
}
})
let exists = this.isFileInArray(file)
if (exists === false) { if (exists === false) {
this.state.marked.push(file) this.state.marked.push(file)
@ -157,6 +165,23 @@
this.update() this.update()
}, },
/**
*
* @return {Boolean} [description]
*/
isFileInArray(file)
{
let exists = false
this.state.marked.forEach((f, index) => {
if (file.filename === f.filename) {
exists = true
}
})
return exists
},
/** /**
* *
* *


+ 59
- 0
resources/js/components/filemanager/upload.riot View File

@ -0,0 +1,59 @@
<urban-filemanager-upload>
<div class="file-upload">
<div class="file-upload">
<form onsubmit={ } enctype="multipart/form-data">
<input name="files[]" type="file" multiple onchange={ handleChange }>
</form>
<div class="file-upload__item" each={ file in state.files }>
{ file.name } / { file.size }
</div>
</div>
</div>
<script>
/**
*
* parent Directory
*
*
*
*/
export default {
state: {
files: []
},
/**
*
*
* @param Object event
*
*/
handleChange(event) {
console.log(event.target.files)
this.state.files = event.target.files
this.update()
}
handleUpload(event) {
const config = {
onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}
axios.post('/api/upload/' + id, formData, config)
.then(function (response) {
currentObj.success = response.data.success;
})
.catch(function (error) {
currentObj.output = error;
})
}
}
</script>
</urban-filemanager-upload>

+ 33
- 0
resources/scss/components/_file-table.scss View File

@ -25,6 +25,10 @@
&:hover { &:hover {
background-color: lighten($grey, 45%); background-color: lighten($grey, 45%);
} }
&--current {
background-color: lighten($primary, 50%);
}
} }
&__inner { &__inner {
@ -69,4 +73,33 @@
} }
} }
} }
.file-table__column--select {
input[type=checkbox] {
position: relative;
display: none;
+ label {
.checked {
display: none;
}
&:hover {
cursor: pointer;
}
}
&:checked + label .checked {
display: inline-block;
}
&:checked + label .unchecked {
display: none;
}
}
.checked, .unchecked {
vertical-align: bottom;
}
}
} }

+ 1
- 0
routes/api.php View File

@ -23,4 +23,5 @@ Route::pattern('uuid', '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]
Route::prefix('file')->group(function() { Route::prefix('file')->group(function() {
Route::get('{id}', 'App\Http\Controllers\Api\FileController@index')->name('api.file'); Route::get('{id}', 'App\Http\Controllers\Api\FileController@index')->name('api.file');
Route::post('{id}', 'App\Http\Controllers\Api\FileController@upload')->name('api.file.upload');
}); });

Write Preview
Loading…
Cancel
Save