feature: cloudcmd: add ability to show modification time (#230)

.webpack/js.js

@@ -77,6 +77,8 @@ const splitChunks = {
                     'themes/light',
                     'columns/name-size',
                     'columns/name-size-date',
+                    'columns/name-size-time',
+                    'columns/name-size-date-time',
                 ];
                 
                 return !lazyChunks.includes(chunk.name);
@@ -111,6 +113,7 @@ export default {
         'themes/light': `${dirThemes}/light.css`,
         'columns/name-size': `${dirColumns}/name-size.css`,
         'columns/name-size-date': `${dirColumns}/name-size-date.css`,
+        'columns/name-size-date-time': `${dirColumns}/name-size-date-time.css`,
         'nojs': `${dirCss}/nojs.css`,
         'help': `${dirCss}/help.css`,
         'view': `${dirCss}/view.css`,

client/modules/config/index.js

@@ -1,4 +1,3 @@
-/* global CloudCmd, DOM, io */
 import '../../../css/config.css';
 import {rendy} from 'rendy';
 import currify from 'currify';
@@ -14,6 +13,10 @@ import {getTitle} from '#common/cloudfunc';
 import * as Images from '#dom/images';
 import * as input from './input.js';
 
+const {
+    CloudCmd,
+    DOM,
+} = globalThis;
 const {Dialog, setTitle} = DOM;
 
 const Name = 'Config';
@@ -78,7 +81,7 @@ function initSocket() {
     
     const ONE_MINUTE = 60 * 1000;
     
-    const socket = io.connect(href + prefixSocket + '/config', {
+    const socket = globalThis.io.connect(href + prefixSocket + '/config', {
         reconnectionAttempts: Infinity,
         reconnectionDelay: ONE_MINUTE,
         path: `${prefix}/socket.io`,

common/cloudfunc.js

@@ -154,6 +154,7 @@ export const buildFromJSON = (params) => {
     const name = getFieldName('name');
     const size = getFieldName('size');
     const date = getFieldName('date');
+    const time = getFieldName('time');
     
     const header = rendy(templateFile, {
         tag: 'div',
@@ -163,6 +164,7 @@ export const buildFromJSON = (params) => {
         name,
         size,
         date,
+        time,
         owner,
         mode,
     });
@@ -195,6 +197,7 @@ export const buildFromJSON = (params) => {
             name: linkResult,
             size: '<dir>',
             date: '--.--.----',
+            time: '--.--.----',
             owner: '.',
             mode: '--- --- ---',
         });
@@ -213,6 +216,7 @@ export const buildFromJSON = (params) => {
                 type,
                 mode,
                 date,
+                time,
                 owner,
                 size,
             } = file;
@@ -235,6 +239,7 @@ export const buildFromJSON = (params) => {
                 name: linkResult,
                 size,
                 date: formatDate(date),
+                time,
                 owner,
                 mode,
             });
@@ -249,6 +254,7 @@ export const buildFromJSON = (params) => {
 const updateField = (file) => ({
     ...file,
     date: file.date || '--.--.----',
+    time: file.time || '--.--.----',
     owner: file.owner || 'root',
     size: getSize(file),
 });

css/columns/name-size-date-time.css

@@ -0,0 +1,26 @@
+.name {
+    width: 40%;
+}
+
+.size {
+    float: none;
+}
+
+.owner {
+    display: none;
+}
+
+.mode {
+    display: none;
+}
+
+.date {
+    float: right;
+    width: 20%;
+}
+
+.time {
+    display: inline;
+    float: right;
+    width: 20%;
+}

css/columns/name-size-date.css

@@ -18,3 +18,8 @@
     float: right;
     width: 19%;
 }
+
+.time {
+    display: none;
+}
+

css/columns/name-size-time.css

@@ -0,0 +1,24 @@
+.name {
+    width: 55%;
+}
+
+.size {
+    float: none;
+}
+
+.owner {
+    display: none;
+}
+
+.mode {
+    display: none;
+}
+
+.date {
+    display: none;
+}
+
+.time {
+    float: right;
+    width: 19%;
+}

css/columns/name-size.css

@@ -18,3 +18,8 @@
 .date {
     display: none;
 }
+
+.time {
+    display: none;
+}
+

css/style.css

@@ -228,6 +228,11 @@ a:active {
     color: var(--column-color);
 }
 
+.time {
+    color: var(--column-color);
+    display: none;
+}
+
 .owner {
     display: inline-block;
     width: 13%;

test/common/cloudfunc.html

@@ -2,6 +2,7 @@
     <span data-name="js-type" class="mini-icon "></span>
     <span data-name="js-name" class="name reduce-text">name</span>
     <span data-name="js-size" class="size reduce-text">size</span>
+    <span data-name="js-time" class="time reduce-text">time</span>
     <span data-name="js-date" class="date reduce-text">date</span>
     <span data-name="js-owner" class="owner reduce-text">owner</span>
     <span data-name="js-mode" class="mode reduce-text">mode</span>
@@ -9,6 +10,7 @@
     <span data-name="js-type" class="mini-icon directory"></span>
     <span data-name="js-name" class="name reduce-text"><a href="/fs/etc" title=".." draggable="true">..</a></span>
     <span data-name="js-size" class="size reduce-text">&lt;dir&gt;</span>
+    <span data-name="js-time" class="time reduce-text">--.--.----</span>
     <span data-name="js-date" class="date reduce-text">--.--.----</span>
     <span data-name="js-owner" class="owner reduce-text">.</span>
     <span data-name="js-mode" class="mode reduce-text">--- --- ---</span>
@@ -16,6 +18,7 @@
     <span data-name="js-type" class="mini-icon directory"></span>
     <span data-name="js-name" class="name reduce-text"><a href="/fs/etc/X11/applnk" title="applnk" draggable="true">applnk</a></span>
     <span data-name="js-size" class="size reduce-text">&lt;dir&gt;</span>
+    <span data-name="js-time" class="time reduce-text">--.--.----</span>
     <span data-name="js-date" class="date reduce-text">21.02.2016</span>
     <span data-name="js-owner" class="owner reduce-text">root</span>
     <span data-name="js-mode" class="mode reduce-text">rwx r-x r-x</span>
@@ -23,7 +26,8 @@
     <span data-name="js-type" class="mini-icon file"></span>
     <span data-name="js-name" class="name reduce-text"><a href="/fs/etc/X11/ай" title="ай" target="_blank" draggable="true">ай</a></span>
     <span data-name="js-size" class="size reduce-text">1.30kb</span>
+    <span data-name="js-time" class="time reduce-text">--.--.----</span>
     <span data-name="js-date" class="date reduce-text">--.--.----</span>
     <span data-name="js-owner" class="owner reduce-text">root</span>
     <span data-name="js-mode" class="mode reduce-text">rwx r-x r-x</span>
-</li></ul>
+</li></ul>

test/common/cloudfunc.js

@@ -68,7 +68,7 @@ test('cloudfunc: render', (t) => {
         template,
     });
     
-    Expect += fs.readFileSync(EXPECT_PATH, 'utf8');
+    Expect += fs.readFileSync(EXPECT_PATH, 'utf8').slice(0, -1);
     
     let i;
     const isNotOk = Expect

tmpl/config.hbs

@@ -52,6 +52,7 @@
     <li title="Visible Columns">
         <select data-name="js-columns" class="form-control full-width" title="Visible Columns">
             <option {{ name-size-date-owner-mode-selected }}>name-size-date-owner-mode</option>
+            <option {{ name-size-date-time-selected }}>name-size-date-time</option>
             <option {{ name-size-date-selected }}>name-size-date</option>
             <option {{ name-size-selected }}>name-size</option>
         </select>

tmpl/fs/file.hbs

@@ -2,6 +2,7 @@
     <span data-name="js-type" class="mini-icon {{ type }}"></span>
     <span data-name="js-name" class="name reduce-text">{{ name }}</span>
     <span data-name="js-size" class="size reduce-text">{{ size }}</span>
+    <span data-name="js-time" class="time reduce-text">{{ time }}</span>
     <span data-name="js-date" class="date reduce-text">{{ date }}</span>
     <span data-name="js-owner" class="owner reduce-text">{{ owner }}</span>
     <span data-name="js-mode" class="mode reduce-text">{{ mode }}</span>