✨ The values of settings are displayed in the interface (#13)

* Inteface helper better db managment * Better interfaces & script doesn't work on github docs * Displaying values state in nav
Deykun · Jul 23, 2024 · d480362 · d480362
1 parent 1c0bbc4
commit d480362
Show file tree

Hide file tree

Showing 12 changed files with 564 additions and 328 deletions.
diff --git a/public/github-usernames.user-srcipt.js b/public/github-usernames.user-srcipt.js
diff --git a/src/user-script/dev.user-srcipt.js b/src/user-script/dev.user-srcipt.js
@@ -4,7 +4,7 @@
 // @description     Replace ambiguous usernames with actual names from user profiles.
 // @author          deykun
 // @version         2.0
-// @include         https://*github.com*
+// @include         https://github.com*
 // @grant           none
 // @run-at          document-start
 // @updateURL       http://localhost:1234/server.user-script.js

diff --git a/src/user-script/parts/constants.js b/src/user-script/parts/constants.js
@@ -1,3 +1,18 @@
+const getFromLocalStorage = (key, defaultValues = {}) => (localStorage.getItem(key)
+  ? { ...defaultValues, ...JSON.parse(localStorage.getItem(key)) }
+  : { ...defaultValues });
+
+const getSettingsFromLS = () => getFromLocalStorage('u2n-settings', {
+  color: 'light',
+  name: 'name-s',
+  shouldShowAvatars: true,
+  shouldFilterBySubstring: false,
+  filterSubstring: '',
+});
+
+const getUsersByUsernamesFromLS = () => getFromLocalStorage('u2n-users');
+const getCustomNamesByUsernamesFromLS = () => getFromLocalStorage('u2n-users-names');
+
 window.U2N = {
   version: 0.9,
   isDevMode: true,
@@ -8,7 +23,9 @@ window.U2N = {
     status: null,
     location: location.href,
   },
-  usersByUsernames: localStorage.getItem('u2n-users') ? JSON.parse(localStorage.getItem('u2n-users')) : {},
+  settings: getSettingsFromLS(),
+  usersByUsernames: getUsersByUsernamesFromLS(),
+  customNamesByUsernames: getCustomNamesByUsernamesFromLS(),
   actions: {},
 };
 

diff --git a/src/user-script/parts/db.js b/src/user-script/parts/db.js
@@ -21,9 +21,7 @@ const updateStatus = ({ type = '', text = '' }) => {
 };
 
 const saveNewUsers = (usersByNumber = {}, params = {}) => {
-  const oldUserByUsernames = localStorage.getItem('u2n-users')
-    ? JSON.parse(localStorage.getItem('u2n-users'))
-    : {};
+  const oldUserByUsernames = getUsersByUsernamesFromLS();
 
   const newUserByUsernames = Object.entries(usersByNumber).reduce((stack, [username, value]) => {
     const isValidUsername = username && !username.includes(' ');

diff --git a/src/user-script/parts/icons.js b/src/user-script/parts/icons.js
diff --git a/src/user-script/parts/interface.js b/src/user-script/parts/interface.js
@@ -0,0 +1,70 @@
+appendCSS(`
+.u2n-text-input-wrapper {
+  display: flex;
+  gap: 5px;
+  position: relative;
+}
+
+.u2n-text-input-wrapper input {
+  width: 100%;
+  padding-left: 10px;
+}
+
+.u2n-text-input-wrapper label {
+  position: absolute;
+  top: 0;
+  left: 5px;
+  transform: translateY(-50%);
+  background-color: var(--u2n-nav-item-bg);
+  padding: 2px 5px;
+  border-radius: 2px;
+  font-size: 9px;
+}
+`, { sourceName: 'interface-text-input' });
+
+const getTextInput = ({
+  idInput, idButton, label, value = '', placeholder,
+}) => {
+  return `<div class="u2n-text-input-wrapper">
+    <input id="${idInput}" type="text" value="${value}" placeholder="${placeholder}" />
+    ${label ? `<label>${label}</label>` : ''}
+    <button id="${idButton}" class="u2n-nav-popup-button" title="Save">
+      ${IconSave}
+    </button>
+  </div>`;
+};
+
+appendCSS(`
+.u2n-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 400;
+}
+
+.u2n-checkbox-wrapper input {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+`, { sourceName: 'interface-value' });
+
+const getCheckbox = ({
+  idInput, label, name, value, isChecked = false, type = 'checkbox',
+}) => {
+  return `<label class="u2n-checkbox-wrapper">
+    <span>
+      <input
+        type="${type}"
+        id="${idInput}"
+        name="${name}"
+        ${value ? `value="${value}"` : ''}
+        ${isChecked ? ' checked' : ''}
+      />
+    </span>
+    <span>${label}</span>
+  </label>`;
+};
+
+const getRadiobox = (params) => {
+  return getCheckbox({ ...params, type: 'radio' });
+};
diff --git a/src/user-script/parts/render-app-settings.js b/src/user-script/parts/render-app-settings.js
@@ -1,10 +1,10 @@
 appendCSS(`
-  .u2u-nav-popup-button.u2u-nav-popup-button--github {
-    color: var(--u2u-nav-item-bg);
-    background-color: var(--u2u-nav-item-text-strong);
+  .u2n-nav-popup-button.u2n-nav-popup-button--github {
+    color: var(--u2n-nav-item-bg);
+    background-color: var(--u2n-nav-item-text-strong);
   }
 
-  .u2u-nav-remove-all {
+  .u2n-nav-remove-all {
     color: var(--fgColor-danger);
     background: transparent;
     border: none;
@@ -15,25 +15,40 @@ appendCSS(`
 `, { sourceName: 'render-app-settings' });
 
 export const getAppSettings = ({ isActive = false }) => {
+  const { settings } = window.U2N;
   const totalSavedUsers = Object.values(window.U2N.usersByUsernames).length;
-  return `<div class="u2u-nav-button-wrapper">
+
+  return `<div class="u2n-nav-button-wrapper">
       ${!isActive
-    ? `<button class="u2u-nav-button" data-content="settings">${IconCog}</button>`
-    : `<button class="u2u-nav-button u2u-nav-button--active" data-content="">${IconCog}</button>
-      <div class="u2u-nav-popup">
-        <div class="u2u-nav-popup-content">
-          <h2 class="u2u-nav-popup-title">${IconCog} <span>Settings</span></h2>
+    ? `<button class="u2n-nav-button" data-content="settings">${IconCog}</button>`
+    : `<button class="u2n-nav-button u2n-nav-button--active" data-content="">${IconCog}</button>
+      <div class="u2n-nav-popup">
+        <div class="u2n-nav-popup-content">
+          <h2 class="u2n-nav-popup-title">${IconCog} <span>Settings</span></h2>
           <div>
             Users saved: <strong>${totalSavedUsers}</strong>
-            ${totalSavedUsers === 0 ? '' : `<button id="u2u-remove-all-users" class="u2u-nav-remove-all">
+            ${totalSavedUsers === 0 ? '' : `<button id="u2n-remove-all-users" class="u2n-nav-remove-all">
               remove all
             </button>`}
           </div>
+          <br />
+          ${getCheckbox({
+    id: 'settings-should-use-substring',
+    label: 'only use names from profiles when their username contains the specified string',
+    isChecked: settings.shouldFilterBySubstring,
+  })}
+          ${getTextInput({
+    label: 'Edit substring',
+    placeholder: 'ex. company_',
+    idButton: 'settings-save-substring',
+    idInput: 'settings-value-substring',
+    value: settings.filterSubstring,
+  })}
           <br />
           <div>
             You can learn more or report an issue here:
           </div>
-          <a class="u2u-nav-popup-button u2u-nav-popup-button--github" href="https://github.com/Deykun/github-usernames" target="_blank">
+          <a class="u2n-nav-popup-button u2n-nav-popup-button--github" href="https://github.com/Deykun/github-usernames" target="_blank">
             ${IconGithub} <span>deykun / github-usernames</span>
           </a>
         </div>
@@ -42,6 +57,6 @@ export const getAppSettings = ({ isActive = false }) => {
 };
 
 window.U2N.ui.eventsSubscribers.removeAllUsers = {
-  selector: '#u2u-remove-all-users',
+  selector: '#u2n-remove-all-users',
   handleClick: resetUsers,
 };
diff --git a/src/user-script/parts/render-app-status.js b/src/user-script/parts/render-app-status.js
@@ -1,12 +1,12 @@
 appendCSS(`
-  .u2u-nav-status {
+  .u2n-nav-status {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 0 10px;
     margin-right: 10px;
-    border-top-right-radius: var(--u2u-nav-item-radius);
+    border-top-right-radius: var(--u2n-nav-item-radius);
     border-color: var(--fgColor-success);
     color: var(--fgColor-default);
     font-size: 12px;
@@ -23,18 +23,18 @@ appendCSS(`
     }
   }
 
-  .u2u-nav-status + * {
-    border-top-left-radius: var(--u2u-nav-item-radius);
+  .u2n-nav-status + * {
+    border-top-left-radius: var(--u2n-nav-item-radius);
   }
 
-  .u2u-nav-status svg {
+  .u2n-nav-status svg {
     fill: currentColor;
     color: var(--fgColor-success);
     height: 14px;
     width: 14px;
   }
 
-  .u2u-nav-status--danger svg {
+  .u2n-nav-status--danger svg {
     color: var(--fgColor-danger);
   }
 `, { sourceName: 'render-app-status' });
@@ -57,7 +57,7 @@ export const getAppStatus = () => {
   const Icon = StatusIconByType[type] || '';
   const isNegative = ['users-reset'].includes(type);
 
-  return `<span class="u2u-nav-status ${isNegative ? 'u2u-nav-status--danger' : ''}">
+  return `<span class="u2n-nav-status ${isNegative ? 'u2n-nav-status--danger' : ''}">
     ${Icon} <span>${statusText}</span>
   </span>`;
 };
diff --git a/src/user-script/parts/render-app-theme.js b/src/user-script/parts/render-app-theme.js
@@ -1,73 +1,74 @@
+const themeSettings = {
+  colors: [{
+    label: 'Light',
+    value: 'light',
+  },
+  {
+    label: 'Dark',
+    value: 'dark',
+  }],
+  names: [
+    {
+      label: 'Dwight Schrute',
+      value: 'name-surname',
+    },
+    {
+      label: 'Dwight S.',
+      value: 'name-s',
+    },
+    {
+      label: 'Dwight',
+      value: 'name',
+    },
+    {
+      label: 'D. Schrute',
+      value: 'n-surname',
+    }],
+};
+
 export const getAppTheme = ({ isActive = false }) => {
-  return `<div class="u2u-nav-button-wrapper">
+  const { settings } = window.U2N;
+
+  return `<div class="u2n-nav-button-wrapper">
       ${!isActive
-    ? `<button class="u2u-nav-button" data-content="theme">${IconThemes}</button>`
-    : `<button class="u2u-nav-button u2u-nav-button--active" data-content="">${IconThemes}</button>
-      <div class="u2u-nav-popup">
-        <div class="u2u-nav-popup-content">
-          <h2 class="u2u-nav-popup-title">${IconThemes} <span>Theme</span></h2>
+    ? `<button class="u2n-nav-button" data-content="theme">${IconThemes}</button>`
+    : `<button class="u2n-nav-button u2n-nav-button--active" data-content="">${IconThemes}</button>
+      <div class="u2n-nav-popup">
+        <div class="u2n-nav-popup-content">
+          <h2 class="u2n-nav-popup-title">${IconThemes} <span>Theme</span></h2>
           <div>
-            <h4>Colors</h4>
-            <ul>
-              <li>
-                <label>
-                  <input type="radio" name="color" value="light" />
-                  <span>Light</span>
-                </label>
-              </li>
-              <li>
-                <label>
-                  <input type="radio" name="color" value="dark" />
-                  <span>Dark</span>
-                </label>
-              </li>
+            <h3>Colors</h3>
+            <ul class="grid-2">
+              ${themeSettings.colors.map(({ label, value }) => `<li>
+              ${getRadiobox({
+    name: 'color',
+    id: `theme-color-${value}`,
+    label,
+    value,
+    isChecked: settings.color === value,
+  })}</li>`).join('')}
             </ul>
           </div>
           <div>
-            <h4>Tags</h4>
-            <ul>
-              <li>
-                <label>
-                  <input type="radio" name="users" value="light" />
-                  <span>Dwight Schrute</span>
-                </label>
-              </li>
-              <li>
-                <label>
-                  <input type="radio" name="users" value="light" />
-                  <span>Dwight S.</span>
-                </label>
-              </li>
-              <li>
-                <label>
-                  <input type="radio" name="users" value="light" />
-                  <span>Dwight</span>
-                </label>
-              </li>
-              <li>
-                <label>
-                  <input type="radio" name="users" value="light" />
-                  <span>D. Schrute</span>
-                </label>
-              </li>
+            <h3>Names</h3>
+            <ul class="grid-2">
+            ${themeSettings.names.map(({ label, value }) => `<li>
+            ${getRadiobox({
+    name: 'names',
+    id: `theme-names-${value}`,
+    label,
+    value,
+    isChecked: settings.name === value,
+  })}</li>`).join('')}
             </ul>
           </div>
           <div>
-            <h4>Other</h4>
-            <ul>
-              <li>
-                <label>
-                  <input type="checkbox" name="avatar" />
-                  <span>show avatars</span>
-                </label>
-              </li>
-              <li>
-                <label>
-                  <input type="checkbox" name="avatar" />
-                  <span>capitalize only the first letters</span>
-                </label>
-              </li>
-            </ul>
+            <h3>Other</h3>
+            ${getCheckbox({
+    id: 'settings-should-show-avatar',
+    label: 'should show avatars',
+    isChecked: settings.shouldShowAvatars,
+  })}
           </div>
         </div>
       </div>`}