add stroke offset calculation #128 (#130)

src/apis/TimestampController.php

@@ -5,7 +5,6 @@
 use Yii;
 use luya\admin\models\UserOnline;
 use luya\admin\base\RestController;
-use luya\admin\models\Config;
 
 /**
  * Timestamp API, refreshes the UserOnline system of the administration area.
@@ -22,30 +21,44 @@ class TimestampController extends RestController
  */
  public function actionIndex()
  {
+ $userId = Yii::$app->adminuser->id;
  // clear user online list
  UserOnline::clearList($this->module->userIdleTimeout);
+ $userOnlineModel = UserOnline::findOne(['user_id' => Yii::$app->adminuser->id]);
 
- if (!UserOnline::findOne(['user_id' => Yii::$app->adminuser->id])) {
+ if (!$userOnlineModel) {
  Yii::$app->response->statusCode = 401;
  return Yii::$app->response->send();
  }
-
- $forceReload = Yii::$app->adminuser->identity->force_reload;
 
  // if developer is enabled, check if vendor has changed and run the required commands and force reload
+ // @TODO: its a concept
+ /*
  if (!YII_ENV_PROD) {
  $config = (int) Config::get(Config::CONFIG_INSTALLER_VENDOR_TIMESTAMP, null);
  $ts = Yii::$app->packageInstaller->timestamp;
  if ($config !== $ts) {
  // run migration and import process for developer usage.
  }
  }
+ */
+
+ // get the stroke-dashoffset for the given user, this indicates the time he is idling
+ // stroke-dashoffset="88px" = 0 // which means 0 percent of time has elapsed
+ // stroke-dashoffset="0px" => 100 // which means 100 percent of time has elpased, auto logout will redirect the user
+ $seconds = (time() - $userOnlineModel->last_timestamp);
+ $percentage = round(($seconds / $this->module->userIdleTimeout) * 100);
+ $offsetPercent = round((82/100) * $percentage);
+ $strokeOffset = 82 - $offsetPercent;
 
  // return users, verify force reload.
  $data = [
+ 'idleSeconds' => $seconds,
+ 'idlePercentage' => $percentage,
+ 'idleStrokeDashoffset' => $strokeOffset,
  'useronline' => UserOnline::getList(),
- 'forceReload' => $forceReload,
- 'locked' => UserOnline::find()->select(['lock_pk', 'lock_table', 'last_timestamp', 'u.firstname', 'u.lastname', 'u.id'])->where(['!=', 'u.id', Yii::$app->adminuser->id])->joinWith('user as u')->createCommand()->queryAll(),
+ 'forceReload' => Yii::$app->adminuser->identity->force_reload,
+ 'locked' => UserOnline::find()->select(['lock_pk', 'lock_table', 'last_timestamp', 'u.firstname', 'u.lastname', 'u.id'])->where(['!=', 'u.id', $userId])->joinWith('user as u')->createCommand()->queryAll(),
  ];
 
  return $data;

src/resources/js/controllers.js

@@ -1008,6 +1008,7 @@
 
  $scope.locked = response.data.locked;
  $scope.notify = response.data.useronline;
+ $scope.idleStrokeDashoffset = response.data.idleStrokeDashoffset;
  $timeout(tick, 20000);
  })
  })();

src/resources/scss/components/_user-timeout.scss

@@ -4,7 +4,6 @@
 }
 
 .user-timeout-timer {
- stroke-dasharray: 32 * 2.75px; // witdth or height times 2.75 = maximum stroke-dasharray
- stroke-dashoffset: 32 * 2.75px; // witdth or height times 2.75 = maximum stroke-dashoffste
+ stroke-dasharray: 82px;
  transition: .25s ease-in-out stroke-dashoffset, .25s ease-in-out stroke;
-}
+}

src/views/layouts/main.php

@@ -110,7 +110,7 @@
  <!-- needs to be fixed end -->
  <div class="mainnav-timeout">
  <svg class="user-timeout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
- <circle class="user-timeout-timer" cx="15" cy="15" r="13" fill="none" stroke="#FFF" stroke-width="4" transform="translate(15, 15) rotate(-90) translate(-15, -15)" stroke-dashoffset="83px"></circle>
+ <circle class="user-timeout-timer" cx="15" cy="15" r="13" fill="none" stroke="#FFF" stroke-width="2" transform="translate(15, 15) rotate(-90) translate(-15, -15)" stroke-dashoffset="{{idleStrokeDashoffset}}px"></circle>
  </svg>
  </div>