#9: Started converting the "create storage" page to Bootstrap v4. Converted to VueJS.
This commit is contained in:
Andy Heathershaw
parent
a86bbee8e3
commit
ca65ba8adc
7
resources/assets/js/storage_locations.js
Normal file
7
resources/assets/js/storage_locations.js
Normal file
@ -0,0 +1,7 @@
|
||||
function StorageLocationViewModel()
|
||||
{
|
||||
this.el = '#storage-options';
|
||||
this.data = {
|
||||
storage_driver: 'LocalFilesystemSource'
|
||||
};
|
||||
}
|
||||
@ -2,187 +2,83 @@
|
||||
@section('title', trans('admin.create_storage'))
|
||||
|
||||
@section('breadcrumb')
|
||||
<div class="breadcrumb">
|
||||
<div class="container">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
|
||||
<li><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
|
||||
<li><a href="{{ route('storage.index') }}">@lang('navigation.breadcrumb.storage')</a></li>
|
||||
<li class="active">@lang('navigation.breadcrumb.create_storage')</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('storage.index') }}">@lang('navigation.breadcrumb.storage')</a></li>
|
||||
<li class="breadcrumb-item active">@lang('navigation.breadcrumb.create_storage')</li>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="col">
|
||||
<h1>@lang('admin.create_storage')</h1>
|
||||
<p>@lang('admin.create_storage_intro')</p>
|
||||
<hr/>
|
||||
|
||||
{!! Form::open(['route' => 'storage.store', 'method' => 'POST']) !!}
|
||||
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
|
||||
{!! Form::label('name', trans('forms.name_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('name', old('name'), ['class' => 'form-control']) !!}
|
||||
<form action="{{ route('storage.store') }}" method="post" id="storage-options">
|
||||
{{ csrf_field() }}
|
||||
|
||||
<div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
|
||||
<label class="form-control-label" for="storage-name">@lang('forms.name_label')</label>
|
||||
<input type="text" class="form-control" id="storage-name" name="name" value="{{ old('name') }}">
|
||||
|
||||
@if ($errors->has('name'))
|
||||
<span class="help-block">
|
||||
<div class="form-control-feedback">
|
||||
<strong>{{ $errors->first('name') }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
{!! Form::label('source', trans('forms.storage_driver_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::select('source', $album_sources, old('source'), ['class' => 'form-control', 'data-bind' => 'value: selectedLocation']) !!}
|
||||
<div class="form-group{{ $errors->has('source') ? ' has-danger' : '' }}">
|
||||
<label class="form-control-label" for="storage-source">@lang('forms.storage_driver_label')</label>
|
||||
<select id="storage-source" name="source" class="form-control" v-model="storage_driver">
|
||||
@foreach ($album_sources as $key => $value)
|
||||
<option value="{{ $key }}"{{ old('source') == $key ? ' selected="selected"' : '' }}>{{ $value }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
@if ($errors->has('source'))
|
||||
<div class="form-control-feedback">
|
||||
<strong>{{ $errors->first('source') }}</strong>
|
||||
</div>
|
||||
|
||||
<div id="storage-options">
|
||||
<div data-bind="visible: selectedLocation() == 'LocalFilesystemSource'">
|
||||
<div class="form-group{{ $errors->has('location') ? ' has-error' : '' }}">
|
||||
{!! Form::label('location', trans('forms.storage_location_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('location', old('location', $filesystem_default_location), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('location'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('location') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-bind="visible: selectedLocation() == 'OpenStackV1Source'">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('auth_url') ? ' has-error' : '' }}">
|
||||
{!! Form::label('auth_url', trans('forms.storage_auth_url_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('auth_url', old('auth_url'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('auth_url'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('auth_url') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('tenant_name') ? ' has-error' : '' }}">
|
||||
{!! Form::label('tenant_name', trans('forms.storage_tenant_name_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('tenant_name', old('tenant_name'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('tenant_name'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('tenant_name') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="storage_driver == 'LocalFilesystemSource'">
|
||||
@include(Theme::viewName('partials.admin_storages_filesystem_options'))
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
|
||||
{!! Form::label('username', trans('forms.username_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('username', old('username'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('username'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('username') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
|
||||
{!! Form::label('password', trans('forms.password_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('password', old('password'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('password'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('password') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="storage_driver == 'OpenStackV1Source'">
|
||||
@include(Theme::viewName('partials.admin_storages_openstack_v1_options'))
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('service_name') ? ' has-error' : '' }}">
|
||||
{!! Form::label('service_name', trans('forms.storage_service_name_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('service_name', old('service_name'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('service_name'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('service_name') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('service_region') ? ' has-error' : '' }}">
|
||||
{!! Form::label('service_region', trans('forms.storage_service_region_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('service_region', old('service_region'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('service_region'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('service_region') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group{{ $errors->has('container_name') ? ' has-error' : '' }}">
|
||||
{!! Form::label('container_name', trans('forms.storage_container_name_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('container_name', old('container_name'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('container_name'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('container_name') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="form-group{{ $errors->has('cdn_url') ? ' has-error' : '' }}">
|
||||
{!! Form::label('cdn_url', trans('forms.storage_cdn_url_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('cdn_url', old('cdn_url'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('cdn_url'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('cdn_url') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-bind="visible: selectedLocation() == 'OpenStackSource'">
|
||||
<div v-if="storage_driver == 'OpenStackSource'">
|
||||
@include(Theme::viewName('partials.admin_storages_openstack_options'))
|
||||
</div>
|
||||
|
||||
<div data-bind="visible: selectedLocation() == 'AmazonS3Source'">
|
||||
<div v-if="storage_driver == 'AmazonS3Source'">
|
||||
@include(Theme::viewName('partials.admin_storages_amazon_s3_options'))
|
||||
</div>
|
||||
|
||||
<div data-bind="visible: selectedLocation() == 'RackspaceSource'">
|
||||
<div v-if="storage_driver == 'RackspaceSource'">
|
||||
@include(Theme::viewName('partials.admin_storages_rackspace_options'))
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="is_default">
|
||||
<strong>@lang('forms.default_storage_label')</strong>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" name="is_default">
|
||||
@lang('forms.default_storage_label')
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="{{ route('storage.index') }}" class="btn btn-default">@lang('forms.cancel_action')</a>
|
||||
<div class="text-right">
|
||||
<a href="{{ route('storage.index') }}" class="btn btn-link">@lang('forms.cancel_action')</a>
|
||||
<button type="submit" class="btn btn-success"><i class="fa fa-fw fa-check"></i> @lang('forms.create_action')</button>
|
||||
</div>
|
||||
{!! Form::close() !!}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -190,7 +86,14 @@
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
var viewModel = new StorageLocationsViewModel();
|
||||
ko.applyBindings(viewModel);
|
||||
$(document).ready(function()
|
||||
{
|
||||
var viewModel = new StorageLocationViewModel();
|
||||
var app = new Vue(viewModel);
|
||||
|
||||
@if (strlen(old('source')) > 0)
|
||||
app.storage_driver = '{{ old('source') }}';
|
||||
@endif
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@ -2,24 +2,18 @@
|
||||
@section('title', trans('admin.storage_title'))
|
||||
|
||||
@section('breadcrumb')
|
||||
<div class="breadcrumb">
|
||||
<div class="container">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
|
||||
<li><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
|
||||
<li class="active">@lang('navigation.breadcrumb.storage')</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
|
||||
<li class="breadcrumb-item active">@lang('navigation.breadcrumb.storage')</li>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="col">
|
||||
<h1>@lang('admin.list_storages_title')</h1>
|
||||
<div class="alert alert-info" style="margin-bottom: 30px;">
|
||||
<p><i class="fa fa-fw fa-info"></i> @lang('admin.list_storages_intro')</p>
|
||||
<i class="fa fa-fw fa-info"></i> @lang('admin.list_storages_intro')
|
||||
</div>
|
||||
|
||||
@if (count($storageLocations) == 0)
|
||||
@ -38,7 +32,7 @@
|
||||
<tr>
|
||||
<td>
|
||||
<span style="font-size: 1.3em;">
|
||||
{{ $storage->name }}
|
||||
<a href="{{ route('storage.edit', ['id' => $storage->id]) }}">{{ $storage->name }}</a>
|
||||
@if ($storage->is_default) <i class="fa fa-fw fa-check text-success"></i>@endif
|
||||
@if (!$storage->is_active) <i class="fa fa-fw fa-minus-circle text-danger"></i>@endif
|
||||
</span><br/>
|
||||
@ -50,7 +44,6 @@
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a href="{{ route('storage.edit', ['id' => $storage->id]) }}" class="btn btn-default">@lang('forms.edit_action')</a>
|
||||
@if (!$storage->is_internal)
|
||||
<a href="{{ route('storage.delete', ['id' => $storage->id]) }}" class="btn btn-danger">@lang('forms.delete_action')</a>
|
||||
@endif
|
||||
@ -72,11 +65,13 @@
|
||||
|
||||
<div class="row" style="margin-top: 15px;">
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">@lang('admin.legend')</div>
|
||||
<div class="panel-body">
|
||||
<div class="card card-outline-info">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">@lang('admin.legend')</h4>
|
||||
<p class="card-text">
|
||||
<i class="fa fa-fw fa-check text-success" style="font-size: 1.3em;"></i> @lang('admin.default_storage_legend')<br/>
|
||||
<i class="fa fa-fw fa-minus-circle text-danger" style="font-size: 1.3em;"></i> @lang('admin.inactive_storage_legend')
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="form-group{{ $errors->has('location') ? ' has-danger' : '' }}">
|
||||
<label class="form-control-label" for="storage-location">@lang('forms.storage_location_label')</label>
|
||||
<input type="text" class="form-control" id="storage-location" name="location" value="{{ old('location', $filesystem_default_location) }}">
|
||||
|
||||
@if ($errors->has('location'))
|
||||
<div class="form-control-feedback">
|
||||
<strong>{{ $errors->first('location') }}</strong>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@ -0,0 +1,102 @@
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('auth_url') ? ' has-error' : '' }}">
|
||||
{!! Form::label('auth_url', trans('forms.storage_auth_url_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('auth_url', old('auth_url'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('auth_url'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('auth_url') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('tenant_name') ? ' has-error' : '' }}">
|
||||
{!! Form::label('tenant_name', trans('forms.storage_tenant_name_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('tenant_name', old('tenant_name'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('tenant_name'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('tenant_name') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
|
||||
{!! Form::label('username', trans('forms.username_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('username', old('username'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('username'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('username') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
|
||||
{!! Form::label('password', trans('forms.password_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('password', old('password'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('password'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('password') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('service_name') ? ' has-error' : '' }}">
|
||||
{!! Form::label('service_name', trans('forms.storage_service_name_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('service_name', old('service_name'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('service_name'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('service_name') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group{{ $errors->has('service_region') ? ' has-error' : '' }}">
|
||||
{!! Form::label('service_region', trans('forms.storage_service_region_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('service_region', old('service_region'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('service_region'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('service_region') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group{{ $errors->has('container_name') ? ' has-error' : '' }}">
|
||||
{!! Form::label('container_name', trans('forms.storage_container_name_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('container_name', old('container_name'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('container_name'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('container_name') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="form-group{{ $errors->has('cdn_url') ? ' has-error' : '' }}">
|
||||
{!! Form::label('cdn_url', trans('forms.storage_cdn_url_label'), ['class' => 'control-label']) !!}
|
||||
{!! Form::text('cdn_url', old('cdn_url'), ['class' => 'form-control']) !!}
|
||||
|
||||
@if ($errors->has('cdn_url'))
|
||||
<span class="help-block">
|
||||
<strong>{{ $errors->first('cdn_url') }}</strong>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user