Cron tab (#24)

Author: manhtai

.github/workflows/test.yml

@@ -1,14 +1,14 @@
 name: Test
 
-on: [push, pull_request]
+on: [push]
 
 jobs:
   release:
     runs-on: ${{ matrix.os }}
 
     strategy:
       matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
+        os: [macos-latest]
 
     steps:
       - name: Check out Git repository

README.md

@@ -14,6 +14,7 @@
 ## Tools list
 
 - [x] Unix Timestamp Converter
+- [x] Cron Editor
 - [x] Markdown to HTML Converter
 - [x] HTML Preview
 - [x] QRCode Generator

package.json

@@ -256,6 +256,7 @@
     "@tailwindcss/typography": "^0.4.1",
     "caniuse-lite": "^1.0.30001246",
     "classnames": "^2.3.1",
+    "cronstrue": "^1.117.0",
     "dayjs": "^1.10.6",
     "diff": "^5.0.0",
     "electron-debug": "^3.1.0",

src/components/Main.tsx

@@ -16,6 +16,7 @@ import QRCodeReader from './qrcode/QrCodeReader';
 import RegexTester from './regex/RegexTester';
 import JwtDebugger from './jwt/JwtDebugger';
 import Auto from './auto/Auto';
+import CronEditor from './cron/Cron';
 
 const defaultRoutes = [
   {
@@ -30,6 +31,12 @@ const defaultRoutes = [
     name: 'Unix Time Converter',
     Component: UnixTimestamp,
   },
+  {
+    icon: <FontAwesomeIcon icon="retweet" />,
+    path: '/cron-editor',
+    name: 'Cron Editor',
+    Component: CronEditor,
+  },
   {
     icon: <FontAwesomeIcon icon="registered" />,
     path: '/regex-tester',

src/components/cron/Cron.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { clipboard } from 'electron';
+import cronstrue from 'cronstrue';
+import classNames from 'classnames';
+
+const CronEditor = () => {
+  const [input, setInput] = useState('* * * * *');
+  const [output, setOutput] = useState(cronstrue.toString('* * * * *'));
+  const [inputErr, setInputErr] = useState(false);
+
+  const handleChangeInput = (evt: { target: { value: string } }) =>
+    setInput(evt.target.value);
+
+  const handleClipboardInput = () => {
+    setInput(clipboard.readText());
+  };
+
+  useEffect(() => {
+    try {
+      const mean = cronstrue.toString(input);
+      setOutput(mean);
+      setInputErr(false);
+    } catch (e) {
+      setOutput(e);
+      setInputErr(true);
+    }
+  }, [input]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <section className="flex flex-col flex-1 w-full h-full space-y-8">
+        <section className="flex flex-col">
+          <div className="flex justify-between mb-1">
+            <button
+              type="button"
+              className="btn"
+              onClick={handleClipboardInput}
+            >
+              Clipboard
+            </button>
+          </div>
+          <div className="flex items-center space-x-2">
+            <input
+              onChange={handleChangeInput}
+              className="flex-1 px-2 py-1 text-lg text-center bg-white rounded-md"
+              value={input}
+            />
+          </div>
+        </section>
+        <section
+          className={classNames({
+            'flex flex-col flex-shrink-0 text-center text-lg': true,
+            'text-blue-500': !inputErr,
+            'text-red-500': inputErr,
+          })}
+        >
+          {!inputErr && '“'}
+          {output}
+          {!inputErr && '”'}
+        </section>
+        <section className="flex flex-col items-center justify-start flex-1 opacity-70">
+          <table>
+            <tbody>
+              <tr className="flex space-x-4">
+                <th>*</th>
+                <td>any value</td>
+              </tr>
+              <tr className="flex space-x-4">
+                <th>,</th>
+                <td>value list separator</td>
+              </tr>
+              <tr className="flex space-x-4">
+                <th>-</th>
+                <td>range of values</td>
+              </tr>
+              <tr className="flex space-x-4">
+                <th>/</th>
+                <td>step values</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+      </section>
+    </div>
+  );
+};
+
+export default CronEditor;

src/helpers/fontAwesome.ts

@@ -19,6 +19,7 @@ import {
   faKey,
   faCheckCircle,
   faRobot,
+  faRetweet,
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -38,5 +39,6 @@ library.add(
   faCamera,
   faKey,
   faCheckCircle,
-  faRobot
+  faRobot,
+  faRetweet
 );

src/main.dev.ts

@@ -94,6 +94,7 @@ const createWindow = async () => {
     icon: getAssetPath('icon.png'),
     webPreferences: {
       nodeIntegration: true,
+      contextIsolation: false,
     },
   });
 

src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plainbelt",
   "productName": "PlainBelt",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "A plain toolbelt for developers",
   "main": "./main.prod.js",
   "author": {

yarn.lock

@@ -3967,6 +3967,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cronstrue@^1.117.0:
+  version "1.117.0"
+  resolved "https://registry.yarnpkg.com/cronstrue/-/cronstrue-1.117.0.tgz#a7413ca510a85935380ae1ad8fef99d5b31ce8a4"
+  integrity sha512-XeRPOHNnkitGDqiLj3V6XJgn/UbrRSaWdVrDjV/IBt2cT+SRPeURiTt6Fbm16liCp78+XFklwuwWpPzPBg08NQ==
+
 cross-env@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"