Split up the entry page into components.

このコミットが含まれているのは:
David Blaszyk 2018-01-25 06:08:50 +09:00
コミット 596548c73d
7個のファイルの変更108行の追加76行の削除

ファイルの表示

@ -61,7 +61,14 @@ class FileController extends Controller {
public function getFileTitle($id) { // /api/rpc/file/getfiletitle/id public function getFileTitle($id) { // /api/rpc/file/getfiletitle/id
return DB::table('str_file') return DB::table('str_file')
->select('title', 'version') ->select(
'title',
'version',
'views',
'downloads',
'submit_date',
'last_date'
)
->where('id', $id) ->where('id', $id)
->get(); ->get();
} }

ファイルの表示

@ -22,6 +22,7 @@ Vue.component('new-items', require('./components/NewEntries.vue'));
Vue.component('hot-items', require('./components/HotEntries.vue')); Vue.component('hot-items', require('./components/HotEntries.vue'));
// Entry page. // Entry page.
Vue.component('entry-title', require('./components/Entry/EntryTitle.vue'));
Vue.component('entry-description', require('./components/Entry/EntryDescription.vue')); Vue.component('entry-description', require('./components/Entry/EntryDescription.vue'));
Vue.component('entry-changelog', require('./components/Entry/EntryChangelog.vue')); Vue.component('entry-changelog', require('./components/Entry/EntryChangelog.vue'));
Vue.component('entry-screenshots', require('./components/Entry/EntryScreenshots.vue')); Vue.component('entry-screenshots', require('./components/Entry/EntryScreenshots.vue'));

ファイルの表示

@ -1,6 +1,10 @@
<template> <template>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">@lang('entry.changelog', ['version' => '2.0'])</div> <div class="panel-heading">
<!--@lang('entry.changelog', ['version' => '2.0'])-->
Changes in {{ version }}
</div>
<div class="panel-body"> <div class="panel-body">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -19,13 +23,15 @@
data: function () { data: function () {
return { return {
id: 1, id: 1,
changelog: '' changelog: '',
version: ''
} }
}, },
created: function () { created: function () {
axios.get('/api/rpc/file/getfilechangelog/' + this.id).then(data => { axios.get('/api/rpc/file/getfilechangelog/' + this.id).then(data => {
this.changelog = data.data[0].changelog; this.changelog = data.data[0].changelog;
}) this.version = data.data[0].version;
});
} }
} }
</script> </script>

ファイルの表示

@ -1,6 +1,7 @@
<template> <template>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">@lang('entry.description')</div> <div class="panel-heading">@lang('entry.description')</div>
<div class="panel-body"> <div class="panel-body">
<div class="container"> <div class="container">
<div class="row"> <div class="row">

ファイルの表示

@ -1,8 +1,14 @@
<template> <template>
<div class="container"> <div class="panel panel-default">
<div class="row"> <div class="panel-heading">@lang('entry.screenshots')</div>
<div class="col-md-12">
(IMG) <div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-12">
(IMG)
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

ファイルの表示

@ -1,25 +1,93 @@
<template> <template>
<div class="container"> <div class="panel panel-default">
<div class="row"> <div class="panel-heading">
<div class="col-md-12"> <!--@lang('entry.title', ['name' => 'Some Mod 2.0', 'user' => 'Someuser'])-->
{{ description }} {{ title }} {{ version }} by Some Hardcoded Person
</div> </div>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-lg">
<!--@lang('entry.download')-->
Download
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">
<!--@lang('entry.update')-->
Update
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger">
<!--@lang('entry.remove')-->
Remove
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">
<!--@lang('entry.approve')-->
Disapprove
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-warning">
<!--@lang('entry.report')-->
Report
</button>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!--@lang('entry.views', ['count' => '1000'])-->
Views: {{ views }}
</div>
<div class="col-md-2">
<!--@lang('entry.downloads', ['count' => '1000'])-->
Downloads: {{ downloads }}
</div>
<div class="col-md-2">
<!--@lang('entry.submitted', ['datetime' => '1945/05/05'])-->
Submitted: {{ submit_date }}
</div>
<div v-if="last_date !== 0"class="col-md-2">
<!--@lang('entry.updated', ['datetime' => '2050/12/01'])-->
Updated: {{ last_date }}
</div>
<div class="col-md-2">
<!--@lang('entry.filesize', ['size' => '1 TB'])-->
Filesize: 1 TB
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'entry-description', name: 'entry-title',
data: function () { data: function () {
return { return {
id: 1, id: 1,
description: '' title: '',
version: '',
views: 0,
downloads: 0,
submit_date: 0,
last_date: 0,
} }
}, },
created: function () { created: function () {
axios.get('/api/rpc/file/getfiledescription/' + this.id).then(data => { axios.get('/api/rpc/file/getfiletitle/' + this.id).then(data => {
this.description = data.data[0].description; this.title = data.data[0].title;
this.version = data.data[0].version;
this.views = data.data[0].views;
this.downloads = data.data[0].downloads;
this.submit_date = data.data[0].submit_date;
this.last_date = data.data[0].last_date;
}) })
} }
} }

ファイルの表示

@ -3,65 +3,8 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default"> <entry-title />
<div class="panel-heading">@lang('entry.title', ['name' => 'Some Mod 2.0', 'user' => 'Someuser'])</div> <entry-screenshots />
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-lg">
@lang('entry.download')
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">
@lang('entry.update')
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger">
@lang('entry.remove')
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">
@lang('entry.approve')
</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-warning">
@lang('entry.report')
</button>
</div>
</div>
<div class="row">
<div class="col-md-2">
@lang('entry.views', ['count' => '1000'])
</div>
<div class="col-md-2">
@lang('entry.downloads', ['count' => '1000'])
</div>
<div class="col-md-2">
@lang('entry.submitted', ['datetime' => '1945/05/05'])
</div>
<div class="col-md-2">
@lang('entry.updated', ['datetime' => '2050/12/01'])
</div>
<div class="col-md-2">
@lang('entry.filesize', ['size' => '1 TB'])
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">@lang('entry.screenshots')</div>
<div class="panel-body">
<entry-screenshots />
</div>
</div>
<entry-description /> <entry-description />
<entry-changelog /> <entry-changelog />
</div> </div>