#9: Started converting the "create storage" page to Bootstrap v4. Converted to VueJS.

This commit is contained in:
Andy Heathershaw 2017-03-23 05:55:14 +00:00
parent a86bbee8e3
commit ca65ba8adc
5 changed files with 189 additions and 172 deletions

View File

@ -0,0 +1,7 @@
function StorageLocationViewModel()
{
this.el = '#storage-options';
this.data = {
storage_driver: 'LocalFilesystemSource'
};
}

View File

@ -2,187 +2,83 @@
@section('title', trans('admin.create_storage')) @section('title', trans('admin.create_storage'))
@section('breadcrumb') @section('breadcrumb')
<div class="breadcrumb"> <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
<div class="container"> <li class="breadcrumb-item"><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
<ol class="breadcrumb"> <li class="breadcrumb-item"><a href="{{ route('storage.index') }}">@lang('navigation.breadcrumb.storage')</a></li>
<li><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li> <li class="breadcrumb-item active">@lang('navigation.breadcrumb.create_storage')</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>
@endsection @endsection
@section('content') @section('content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col">
<h1>@lang('admin.create_storage')</h1> <h1>@lang('admin.create_storage')</h1>
<p>@lang('admin.create_storage_intro')</p> <p>@lang('admin.create_storage_intro')</p>
<hr/> <hr/>
{!! Form::open(['route' => 'storage.store', 'method' => 'POST']) !!} <form action="{{ route('storage.store') }}" method="post" id="storage-options">
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}"> {{ csrf_field() }}
{!! Form::label('name', trans('forms.name_label'), ['class' => 'control-label']) !!}
{!! Form::text('name', old('name'), ['class' => 'form-control']) !!} <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')) @if ($errors->has('name'))
<span class="help-block"> <div class="form-control-feedback">
<strong>{{ $errors->first('name') }}</strong> <strong>{{ $errors->first('name') }}</strong>
</span> </div>
@endif @endif
</div> </div>
<div class="form-group"> <div class="form-group">
{!! Form::label('source', trans('forms.storage_driver_label'), ['class' => 'control-label']) !!} <div class="form-group{{ $errors->has('source') ? ' has-danger' : '' }}">
{!! Form::select('source', $album_sources, old('source'), ['class' => 'form-control', 'data-bind' => 'value: selectedLocation']) !!} <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>
<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 @endif
</div> </div>
</div> </div>
<div data-bind="visible: selectedLocation() == 'OpenStackV1Source'"> <div v-if="storage_driver == 'LocalFilesystemSource'">
<div class="row"> @include(Theme::viewName('partials.admin_storages_filesystem_options'))
<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>
<div class="row"> <div v-if="storage_driver == 'OpenStackV1Source'">
<div class="col-md-6"> @include(Theme::viewName('partials.admin_storages_openstack_v1_options'))
<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>
<div class="row"> <div v-if="storage_driver == 'OpenStackSource'">
<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'">
@include(Theme::viewName('partials.admin_storages_openstack_options')) @include(Theme::viewName('partials.admin_storages_openstack_options'))
</div> </div>
<div data-bind="visible: selectedLocation() == 'AmazonS3Source'"> <div v-if="storage_driver == 'AmazonS3Source'">
@include(Theme::viewName('partials.admin_storages_amazon_s3_options')) @include(Theme::viewName('partials.admin_storages_amazon_s3_options'))
</div> </div>
<div data-bind="visible: selectedLocation() == 'RackspaceSource'"> <div v-if="storage_driver == 'RackspaceSource'">
@include(Theme::viewName('partials.admin_storages_rackspace_options')) @include(Theme::viewName('partials.admin_storages_rackspace_options'))
</div> </div>
</div>
<div class="checkbox"> <div class="form-check">
<label> <label class="form-check-label">
<input type="checkbox" name="is_default"> <input class="form-check-input" type="checkbox" name="is_default">
<strong>@lang('forms.default_storage_label')</strong> @lang('forms.default_storage_label')
</label> </label>
</div> </div>
<div class="form-actions"> <div class="text-right">
<a href="{{ route('storage.index') }}" class="btn btn-default">@lang('forms.cancel_action')</a> <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> <button type="submit" class="btn btn-success"><i class="fa fa-fw fa-check"></i> @lang('forms.create_action')</button>
</div> </div>
{!! Form::close() !!} </form>
</div> </div>
</div> </div>
</div> </div>
@ -190,7 +86,14 @@
@push('scripts') @push('scripts')
<script type="text/javascript"> <script type="text/javascript">
var viewModel = new StorageLocationsViewModel(); $(document).ready(function()
ko.applyBindings(viewModel); {
var viewModel = new StorageLocationViewModel();
var app = new Vue(viewModel);
@if (strlen(old('source')) > 0)
app.storage_driver = '{{ old('source') }}';
@endif
});
</script> </script>
@endpush @endpush

View File

@ -2,24 +2,18 @@
@section('title', trans('admin.storage_title')) @section('title', trans('admin.storage_title'))
@section('breadcrumb') @section('breadcrumb')
<div class="breadcrumb"> <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
<div class="container"> <li class="breadcrumb-item"><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
<ol class="breadcrumb"> <li class="breadcrumb-item active">@lang('navigation.breadcrumb.storage')</li>
<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>
@endsection @endsection
@section('content') @section('content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col">
<h1>@lang('admin.list_storages_title')</h1> <h1>@lang('admin.list_storages_title')</h1>
<div class="alert alert-info" style="margin-bottom: 30px;"> <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> </div>
@if (count($storageLocations) == 0) @if (count($storageLocations) == 0)
@ -38,7 +32,7 @@
<tr> <tr>
<td> <td>
<span style="font-size: 1.3em;"> <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_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 @if (!$storage->is_active) <i class="fa fa-fw fa-minus-circle text-danger"></i>@endif
</span><br/> </span><br/>
@ -50,7 +44,6 @@
</span> </span>
</td> </td>
<td class="text-right"> <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) @if (!$storage->is_internal)
<a href="{{ route('storage.delete', ['id' => $storage->id]) }}" class="btn btn-danger">@lang('forms.delete_action')</a> <a href="{{ route('storage.delete', ['id' => $storage->id]) }}" class="btn btn-danger">@lang('forms.delete_action')</a>
@endif @endif
@ -72,11 +65,13 @@
<div class="row" style="margin-top: 15px;"> <div class="row" style="margin-top: 15px;">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="panel panel-info"> <div class="card card-outline-info">
<div class="panel-heading">@lang('admin.legend')</div> <div class="card-block">
<div class="panel-body"> <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-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') <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> </div>
</div> </div>

View File

@ -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>

View File

@ -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>