show update in settings

README.md

@@ -18,12 +18,14 @@ The rating based on an 3-Point system for `good`, `medium` and `bad`.
 
 ### Install
 
-* Download Flox and `cd` into `backend` and run
 ```bash
+git clone https://github.com/devfake/flox
+cd flox/backend
 composer install
 php artisan flox:init # Enter here your database credentials
 php artisan flox:db # Running migrations and enter your admin credentials for the site
 ```
+* Give `backend/storage`, `public/assets` and `public/exports` recursive write access.
 * Enter your TMDb API-Key in `backend/.env`
 * Set your `CLIENT_URI` in `backend/.env`. If you use something like XAMPP or MAMP, the CLIENT_URI should be `/flox/public`. If you use something like Homestead, the CLIENT_URI should be `/`.
 ```bash
@@ -49,15 +51,27 @@ If you hover over an item, you can click on `Suggestions` to search for recommen
 
 `Upcoming` will display new movies which will be released soon. TMDb do not yet support regional queries but this is coming soon.
 
+### Update
+
+For each update i will make an extra [release](https://github.com/devfake/flox/releases).
+These are the common steps to upgrade flox:
+```bash
+git fetch
+git checkout x.x.x
+cd backend
+composer install
+php artisan migrate
+```
+
+If you go to the settings page of your installation, flox will automatically check for new updates.
+
 ### Export / Import
 
 Also you can make a backup of all your movies and shows in the settings page. If you click the `EXPORT MOVIES` button, there will be an download for an `json` file. This file contains all your movies and shows from your database. This backup file will also be automatically saved in your `public/exports` folder.
 
 If you import an backup, all movies and shows in your database will be deleted and replaced. Be sure to make an current backup before you import.
 The import will download all poster images.
 
-Export and import can also be used for the update of flox itself. Export, download a new version of flox, run all commands and import your backup. Done.
-
 ### Translation
 
 All titles are in english by default. You can change your language by setting `TRANSLATION` in `backend/.env`. The most commons are `DE`, `IT`, `FR`, `ES` and `RU`. You can try to use your language code.
@@ -89,13 +103,8 @@ You can also set options to display release date and/or genre of your own list.
 * Make sure you have installed `webpack` globally.
 * Run `npm run dev` or  `npm run build`.
 
-### Misc
-
-* Give `backend/storage`, `public/assets` and `public/exports` recursive write access.
-
 ### Further Development
 
-* Simpler workflow for update
 * Mark all episodes at once
 * Fetch new episodes (maybe option with cron to send user an info mail)
 * Upcoming and trending for tv shows

backend/app/Http/Controllers/SettingController.php

@@ -8,6 +8,7 @@
   use App\Services\Storage;
   use App\Services\TMDB;
   use App\Setting;
+  use GuzzleHttp\Client;
   use Illuminate\Support\Facades\Artisan;
   use Illuminate\Support\Facades\Auth;
   use Illuminate\Support\Facades\Input;
@@ -17,12 +18,14 @@ class SettingController {
     private $item;
     private $episodes;
     private $storage;
+    private $version;
 
     public function __construct(Item $item, Episode $episodes, Storage $storage)
     {
       $this->item = $item;
       $this->episodes = $episodes;
       $this->storage = $storage;
+      $this->version = config('app.version');
     }
 
     /**
@@ -71,6 +74,20 @@ public function import(ImportRequest $request)
       }
     }
 
+    /**
+     * Check the latest release of flox and compare them to the local version.
+     *
+     * @return string
+     */
+    public function checkUpdate()
+    {
+      $client = new Client();
+      $response = json_decode($client->get('https://api.github.com/repos/devfake/flox/releases')->getBody());
+
+      $lastestVersion = $response[0]->name;
+
+      return version_compare($this->version, $lastestVersion, '<') ? 'true' : 'false';
+    }
     /**
      * Parse full genre list of all movies in database and save them.
      *
@@ -123,7 +140,8 @@ public function settings()
       return [
         'username' => Auth::check() ? Auth::user()->username : '',
         'genre' => $genre,
-        'date' => $date
+        'date' => $date,
+        'version' => $this->version
       ];
     }
 

backend/config/app.php

@@ -2,6 +2,8 @@
 
   return [
 
+    'version' => '1.0.0',
+
     'TMDB_API_KEY' => env('TMDB_API_KEY'),
     'TRANSLATION' => env('TRANSLATION'),
     'LOADING_ITEMS' => env('LOADING_ITEMS'),

backend/routes/web.php

@@ -17,6 +17,8 @@
       Route::get('/export', 'SettingController@export');
       Route::post('/import', 'SettingController@import');
 
+      Route::get('/check-update', 'SettingController@checkUpdate');
+
       Route::get('/sync-scout', 'SettingController@syncScout');
       Route::get('/update-genre', 'SettingController@updateGenre');
       Route::patch('/settings', 'SettingController@changeSettings');

client/app/components/Content/Settings.vue

@@ -1,6 +1,14 @@
 <template>
   <main>
     <div class="wrap-content" v-if=" ! loading">
+      <div class="version-wrap">
+        <span class="current-version">Current version: <span>{{ version }}</span></span>
+        <span class="update-check" v-if=" ! isUpdate">{{ updateMessage }}</span>
+        <span class="update-check" v-if="isUpdate">
+          <a href="https://github.com/devfake/flox/releases" target="_blank" class="new-update">There is a new update for flox!</a>
+        </span>
+      </div>
+
       <div class="settings-box">
         <span class="nothing-found">{{ lang('headline user') }}</span>
         <form class="login-form" @submit.prevent="editUser()">
@@ -51,13 +59,16 @@
     mixins: [Helper],
 
     created() {
+      this.checkUpdate();
       this.fetchSettings();
     },
 
     data() {
       return {
         username: '',
         password: '',
+        version: '',
+        isUpdate: null,
         displayGenre: null,
         displayDate: null,
         success: false,
@@ -73,6 +84,14 @@
 
       exportLink() {
         return config.api + '/export';
+      },
+
+      updateMessage() {
+        if(this.isUpdate === false) {
+          return 'Nothing to update';
+        }
+
+        return 'Checking for updates...';
       }
     },
 
@@ -112,6 +131,12 @@
         }
       },
 
+      checkUpdate() {
+        http(`${config.api}/check-update`).then(response => {
+          this.isUpdate = response.data;
+        });
+      },
+
       fetchSettings() {
         this.SET_LOADING(true);
         http(`${config.api}/settings`).then(value => {
@@ -121,6 +146,7 @@
           this.username = data.username;
           this.displayGenre = data.genre;
           this.displayDate = data.date;
+          this.version = data.version;
         });
       },
 

client/resources/sass/components/_content.scss

@@ -364,14 +364,56 @@ main {
   }
 }
 
-.nothing-found {
+.nothing-found,
+.current-version {
   float: left;
   width: 100%;
   font-size: 32px;
   margin: 0 0 30px 0;
   color: $dark;
 }
 
+.current-version {
+  margin: 0 0 10px 0;
+
+  span {
+    color: gray;
+  }
+}
+
+.version-wrap {
+  float: left;
+  width: 100%;
+  margin: 0 0 30px 0;
+  color: gray;
+}
+
+.update-check {
+  float: left;
+  font-size: 14px;
+  color: gray;
+
+  span {
+    float: left;
+  }
+}
+
+.new-update {
+  color: $rating1;
+  width: 100%;
+  margin: 0 0 10px 0;
+  border-bottom: 1px solid transparent;
+  text-decoration: none;
+
+  &:hover {
+    border-bottom: 1px solid $rating1;
+  }
+
+  &:active {
+    opacity: .6;
+  }
+}
+
 .load-more-wrap {
   float: left;
   height: 100px;
@@ -420,12 +462,6 @@ main {
   }
 }
 
-.version-wrap {
-  float: left;
-  width: 100%;
-  color: gray;
-}
-
 .checkbox {
   float: left;
   width: 100%;