run lint

swisstopo · Jan 27, 2025 · 001c443 · 001c443
1 parent a1136f7
commit 001c443
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 108 deletions.
diff --git a/ui/eslint.config.mjs b/ui/eslint.config.mjs
@@ -22,6 +22,7 @@ const sharedConfig = {
     parser: tsParser,
     parserOptions: {
       projectService: true,
+      project: './tsconfig.json',
       tsconfigRootDir: __dirname,
     },
   },
@@ -121,6 +122,7 @@ export default [
       },
       parserOptions: {
         project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
       },
     },
     // plugins: { 'sort-class-members': sortClassMembers },
@@ -132,19 +134,23 @@ export default [
         {
           selector: [
             'variable',
-            'classProperty',
             // 'autoAccessor', // This currently applies to all accessors, not just boolean ones
-            'classicAccessor',
           ],
           types: ['boolean'],
-          format: ['camelCase', 'PascalCase'],
+          format: ['PascalCase'],
           prefix: ['is', 'has'],
         },
       ],
       'sort-class-members/sort-class-members': [
         'error',
         {
-          order: ['[decoratedProperties]', 'constructor', '[methods]', '[render]', '[styles]'],
+          order: [
+            '[decoratedProperties]',
+            'constructor',
+            '[methods]',
+            '[render]',
+            '[styles]',
+          ],
           groups: {
             decoratedProperties: [
               {

diff --git a/ui/src/cesium-toolbar.ts b/ui/src/cesium-toolbar.ts
@@ -155,26 +155,6 @@ export class CesiumToolbar extends LitElement {
     super.updated(changedProperties);
   }
 
-  static readonly styles = css`
-    :host {
-      position: absolute;
-      background-color: #0000005c;
-      color: white;
-      margin-left: 5px;
-      padding: 5px;
-    }
-
-    input[type='number'] {
-      width: 80px;
-    }
-
-    .divider {
-      width: 100%;
-      border: 1px solid #e0e3e6;
-      margin: 5px 0;
-    }
-  `;
-
   render() {
     return html` <div>
         Ambient Occlusion
@@ -525,4 +505,23 @@ export class CesiumToolbar extends LitElement {
         </select>
       </div>`;
   }
+  static readonly styles = css`
+    :host {
+      position: absolute;
+      background-color: #0000005c;
+      color: white;
+      margin-left: 5px;
+      padding: 5px;
+    }
+
+    input[type='number'] {
+      width: 80px;
+    }
+
+    .divider {
+      width: 100%;
+      border: 1px solid #e0e3e6;
+      margin: 5px 0;
+    }
+  `;
 }
diff --git a/ui/src/components/core/core-modal.ts b/ui/src/components/core/core-modal.ts
@@ -14,6 +14,18 @@ interface CoreModalProps {
 
 @customElement('ngm-core-modal')
 export class CoreModal extends LitElement {
+  @property({ type: String, reflect: true })
+  accessor size: Size = 'auto';
+  @property({ type: Boolean })
+  accessor isPersistent = true;
+  @property({ type: Boolean, attribute: 'no-padding', reflect: true })
+  accessor hasNoPadding = false;
+  constructor() {
+    super();
+
+    this.close = this.close.bind(this);
+  }
+
   static open(props: CoreModalProps, content: TemplateResult): CoreModal {
     const container = document.createElement('div');
     container.classList.add('ngm-core-modal-container');
@@ -42,21 +54,6 @@ export class CoreModal extends LitElement {
     return modal as CoreModal;
   }
 
-  constructor() {
-    super();
-
-    this.close = this.close.bind(this);
-  }
-
-  @property({ type: String, reflect: true })
-  accessor size: Size = 'auto';
-
-  @property({ type: Boolean })
-  accessor isPersistent = true;
-
-  @property({ type: Boolean, attribute: 'no-padding', reflect: true })
-  accessor hasNoPadding = false;
-
   private dialog: HTMLDialogElement | null = null;
 
   firstUpdated(): void {

diff --git a/ui/src/components/navigation/navigation-layer-panel.ts b/ui/src/components/navigation/navigation-layer-panel.ts
@@ -26,65 +26,60 @@ export class NavigationLayerPanel extends LitElementI18n {
     this.handleDisplayLayerRemoval = this.handleDisplayLayerRemoval.bind(this);
   }
 
-  readonly render = () => html`
-    <style>
-      ${unsafeCSS(NavigationLayerPanel.styles.cssText)}
-    </style>
-    <ngm-navigation-panel>
-      <section>
-        <ngm-navigation-panel-header closeable @close="${this.close}">
-          ${i18next.t('dtd_displayed_data_label')}
-        </ngm-navigation-panel-header>
-        ${this.renderLayers()}
-      </section>
-      <section>
-        <ngm-layer-tabs .layers=${this.layers}></ngm-layer-tabs>
-      </section>
-    </ngm-navigation-panel>
-  `;
-
-  private readonly renderLayers = () => html`
-    <ngm-layer-display
-      .layers=${this.displayLayers}
-      @layers-update="${this.handleDisplayLayersUpdate}"
-      @layer-update="${this.handleDisplayLayerUpdate}"
-      @layer-removal="${this.handleDisplayLayerRemoval}"
-      @layer-click="${this.handleDisplayLayerClick}"
-    ></ngm-layer-display>
-  `;
-
   connectedCallback(): void {
     super.connectedCallback();
     this.setAttribute('role', 'complementary');
   }
-
   private close(): void {
     this.dispatchEvent(new CustomEvent('close'));
   }
-
   private handleDisplayLayersUpdate(e: LayersUpdateEvent): void {
     this.dispatchEvent(
       new CustomEvent('display-layers-update', {
         detail: e.detail,
       }) satisfies LayersUpdateEvent,
     );
   }
-
   private handleDisplayLayerUpdate(e: LayerEvent): void {
     this.dispatchEvent(
       new CustomEvent('display-layer-update', {
         detail: e.detail,
       }) satisfies LayerEvent,
     );
   }
-
   private handleDisplayLayerRemoval(e: LayerEvent): void {
     this.dispatchEvent(
       new CustomEvent('display-layer-removal', {
         detail: e.detail,
       }) satisfies LayerEvent,
     );
   }
+  readonly render = () => html`
+    <style>
+      ${unsafeCSS(NavigationLayerPanel.styles.cssText)}
+    </style>
+    <ngm-navigation-panel>
+      <section>
+        <ngm-navigation-panel-header closeable @close="${this.close}">
+          ${i18next.t('dtd_displayed_data_label')}
+        </ngm-navigation-panel-header>
+        ${this.renderLayers()}
+      </section>
+      <section>
+        <ngm-layer-tabs .layers=${this.layers}></ngm-layer-tabs>
+      </section>
+    </ngm-navigation-panel>
+  `;
+
+  private readonly renderLayers = () => html`
+    <ngm-layer-display
+      .layers=${this.displayLayers}
+      @layers-update="${this.handleDisplayLayersUpdate}"
+      @layer-update="${this.handleDisplayLayerUpdate}"
+      @layer-removal="${this.handleDisplayLayerRemoval}"
+      @layer-click="${this.handleDisplayLayerClick}"
+    ></ngm-layer-display>
+  `;
 
   private handleDisplayLayerClick(e: LayerEvent): void {
     this.dispatchEvent(

diff --git a/ui/src/components/navigation/navigation-panel-header.ts b/ui/src/components/navigation/navigation-panel-header.ts
@@ -14,6 +14,13 @@ export class NavigationPanelHeader extends LitElementI18n {
     this.close = this.close.bind(this);
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute('role', 'heading');
+  }
+  private close(): void {
+    this.dispatchEvent(new CustomEvent('close'));
+  }
   readonly render = () => html`
     <slot></slot>
     ${this.isCloseable
@@ -27,15 +34,6 @@ export class NavigationPanelHeader extends LitElementI18n {
       : nothing}
   `;
 
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.setAttribute('role', 'heading');
-  }
-
-  private close(): void {
-    this.dispatchEvent(new CustomEvent('close'));
-  }
-
   static readonly styles = css`
     :host {
       box-sizing: border-box;

diff --git a/ui/src/components/search/search-input.ts b/ui/src/components/search/search-input.ts
@@ -40,12 +40,6 @@ export class SearchInput extends LitElementI18n {
   @state()
   private accessor isActive = false;
 
-  private accessor searchRef = createRef<HTMLElement>();
-  private accessor inputRef = createRef<HTMLInputElement>();
-  private accessor resultsRef = createRef<HTMLUListElement>();
-
-  private layerConfigs: SwisstopoImageryLayersConfig | null = null;
-
   constructor() {
     super();
     this.initialize();
@@ -60,6 +54,11 @@ export class SearchInput extends LitElementI18n {
     this.searchAdditionalItems = this.searchAdditionalItems.bind(this);
     this.toggleActive = this.toggleActive.bind(this);
   }
+  private accessor searchRef = createRef<HTMLElement>();
+  private accessor inputRef = createRef<HTMLInputElement>();
+  private accessor resultsRef = createRef<HTMLUListElement>();
+
+  private layerConfigs: SwisstopoImageryLayersConfig | null = null;
 
   private initialize(): void {
     getLayersConfig().then((layersConfig) => {

diff --git a/ui/src/elements/ngm-full-screen-view.js b/ui/src/elements/ngm-full-screen-view.js
@@ -3,12 +3,6 @@ import i18next from 'i18next';
 import { html } from 'lit';
 
 class NgmFullScreenView extends LitElementI18n {
-  static get properties() {
-    return {
-      fullScreenActive: { type: Boolean },
-    };
-  }
-
   constructor() {
     super();
 
@@ -22,6 +16,11 @@ class NgmFullScreenView extends LitElementI18n {
         .forEach((n) => (n.hidden = this.fullScreenActive));
     };
   }
+  static get properties() {
+    return {
+      fullScreenActive: { type: Boolean },
+    };
+  }
 
   get tooltip() {
     if (this.fullScreenActive) {

diff --git a/ui/src/elements/ngm-voxel-filter.ts b/ui/src/elements/ngm-voxel-filter.ts
@@ -19,14 +19,14 @@ export class NgmVoxelFilter extends LitElementI18n {
   @property({ type: Object })
   accessor viewer!: Viewer;
 
-  @queryAll('.lithology-checkbox input[type="checkbox"]')
-  accessor lithologyCheckbox!: NodeListOf<HTMLInputElement>;
   @query('.min-conductivity')
   accessor minConductivityInput!: HTMLInputElement;
   @query('.max-conductivity')
   accessor maxConductivityInput!: HTMLInputElement;
   @query('.vox_filter_include_undefined')
   accessor includeUndefinedConductivity!: HTMLInputElement;
+  @queryAll('.lithology-checkbox input[type="checkbox"]')
+  accessor lithologyCheckbox!: NodeListOf<HTMLInputElement>;
 
   private minConductivity = NaN;
   private maxConductivity = NaN;

diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts
@@ -17,6 +17,20 @@ export class MenuItem extends LitElementI18n {
   @property({ type: Boolean })
   accessor isMobile: boolean = false;
 
+  render() {
+    return html`
+      <div class="container">
+        <div class="box ${classMap({ isActive: this.isActive })}">
+          <div class="icon">
+            <ngm-core-icon icon=${this.icon}></ngm-core-icon>
+          </div>
+          <div class="title" ?hidden="${this.isMobile}">
+            ${i18next.t(this.title)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
   static readonly styles = css`
     :host {
       position: relative;
@@ -100,19 +114,4 @@ export class MenuItem extends LitElementI18n {
       color: var(--color-bg);
     }
   `;
-
-  render() {
-    return html`
-      <div class="container">
-        <div class="box ${classMap({ isActive: this.isActive })}">
-          <div class="icon">
-            <ngm-core-icon icon=${this.icon}></ngm-core-icon>
-          </div>
-          <div class="title" ?hidden="${this.isMobile}">
-            ${i18next.t(this.title)}
-          </div>
-        </div>
-      </div>
-    `;
-  }
 }