JS frontend stuff

Move old ember frontend to properly named folder
Add vue based new frontend

frontend-old-ember/app/components/util/formatter.hbs

@@ -0,0 +1,16 @@
+<div class="{{@classes}}">
+  {{#if (equals @server "mastodon")}}
+    <Note::Formatter::Mastodon>{{@content}}Masto</Note::Formatter::Mastodon>
+  {{else if (equals @server "misskey")}}
+    <Note::Formatter::Misskey>{{@content}}Misskey</Note::Formatter::Misskey>
+  {{else if (equals @server "akoma")}}
+    <Note::Formatter::Akoma>{{@content}}Akoma</Note::Formatter::Akoma>
+  {{else if (equals @server "linstrom")}}
+    <Note::Formatter::Linstrom>{{@content}}Linstrom</Note::Formatter::Linstrom>
+  {{else if (equals @server "wafrn")}}
+    <Note::Formatter::Wafrn>{{@content}}Wafrn</Note::Formatter::Wafrn>
+  {{else}}
+    <Note::Formatter::Linstrom
+    >{{@content}}Unkown:{{@server}}</Note::Formatter::Linstrom>
+  {{/if}}
+</div>

frontend-old-ember/app/components/util/formatter/akoma.hbs

@@ -0,0 +1 @@
+<p>{{@content}}</p>

frontend-old-ember/app/components/util/formatter/akoma.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export interface NoteFormatterAkomaSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class NoteFormatterAkoma extends Component<NoteFormatterAkomaSignature> {}

frontend-old-ember/app/components/util/formatter/linstrom.hbs

@@ -0,0 +1,2 @@
+<p>{{@content}}</p>
+{{yield}}

frontend-old-ember/app/components/util/formatter/linstrom.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export interface NoteFormatterLinstromSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class NoteFormatterLinstrom extends Component<NoteFormatterLinstromSignature> {}

frontend-old-ember/app/components/util/formatter/mastodon.hbs

@@ -0,0 +1,2 @@
+<p>{{@content}}</p>
+{{yield}}

frontend-old-ember/app/components/util/formatter/mastodon.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export interface NoteFormatterMastodonSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class NoteFormatterMastodon extends Component<NoteFormatterMastodonSignature> {}

frontend-old-ember/app/components/util/formatter/misskey.hbs

@@ -0,0 +1,2 @@
+<p>{{@content}}</p>
+{{yield}}

frontend-old-ember/app/components/util/formatter/misskey.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export interface NoteFormatterMisskeySignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class NoteFormatterMisskey extends Component<NoteFormatterMisskeySignature> {}

frontend-old-ember/app/components/util/formatter/wafrn.hbs

@@ -0,0 +1,2 @@
+<p>{{@content}}</p>
+{{yield}}

frontend-old-ember/app/components/util/formatter/wafrn.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export interface NoteFormatterWafrnSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class NoteFormatterWafrn extends Component<NoteFormatterWafrnSignature> {}

frontend-old-ember/app/components/util/mail-entry.hbs

@@ -0,0 +1,18 @@
+<div class="mail-entry {{@wrapper-classes}}">
+  <label>
+    Email
+    {{!--<div class="filling-spacer"/>--}}
+    <Input
+      class="mail-input {{if this.mailOk "mail-input-ok" "mail-input-error"}} {{@input-classes}}"
+      @type="text"
+      @value={{this.args.data.mail}}
+      placeholder="Email address"
+      {{on "change" this.checkMail}}
+    />
+  </label>
+  {{#if this.mailOk}}
+    <p class="mail-ok mail-status">&#10004;</p>
+  {{else}}
+    <p class="mail-error mail-status">X</p>
+  {{/if}}
+</div>

frontend-old-ember/app/components/util/mail-entry.ts

@@ -0,0 +1,27 @@
+import { action } from '@ember/object';
+import { map } from '@ember/object/computed';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+const re = /.+@\S+\.\S+/;
+
+export interface UtilMailEntrySignature {
+  // The arguments accepted by the component
+  Args: {
+    data: { mail: string; valid: boolean };
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class UtilMailEntry extends Component<UtilMailEntrySignature> {
+  @tracked mailOk = this.args.data.valid;
+  @action checkMail() {
+    this.args.data.valid = re.test(this.args.data.mail);
+    this.mailOk = this.args.data.valid;
+  }
+}

frontend-old-ember/app/components/util/map-edit.hbs

@@ -0,0 +1,40 @@
+<div class="{{@wrapper-classes}}">
+  {{#if @readonly}}
+    <ul>
+      {{#each this.args.list as |element|}}
+        <li>
+          <div class="string-array-element-wrapper">
+            <p class="{{@element-key-classes}}">{{element.key}}</p>
+            <p class="{{@element-value-classes}}">{{element.value}}</p>
+          </div>
+        </li>
+      {{/each}}
+    </ul>
+  {{else}}
+    <ul>
+      {{#each this.args.list as |element index|}}
+        <li>
+          <div class="string-array-element-wrapper">
+            <Input @type="text" @value={{element.key}} />
+            <Input @type="text" @value={{element.value}} />
+            <div
+              class="{{@remove-element-classes}}"
+              type="button"
+              {{on "click" (fn this.removeElement index)}}
+            >
+              X
+            </div>
+          </div>
+        </li>
+      {{/each}}
+
+    </ul>
+    <div
+      class="{{@add-element-classes}}"
+      type="button"
+      {{on "click" this.addElement}}
+    >
+      Add element
+    </div>
+  {{/if}}
+</div>

frontend-old-ember/app/components/util/map-edit.ts

@@ -0,0 +1,36 @@
+import MutableArray from '@ember/array/mutable';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export interface UtilMapEditSignature {
+  // The arguments accepted by the component
+  Args: {
+    list: MutableArray<{ key: string; value: string }>;
+    prefix: string;
+    onNewElement: (index: number) => void;
+    onDeleteElement: (index: number) => void;
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class UtilMapEdit extends Component<UtilMapEditSignature> {
+  @action addElement() {
+    MutableArray.apply(this.args.list);
+    this.args.list.pushObject({ key: '', value: '' });
+    if (this.args.onNewElement)
+      this.args.onNewElement(this.args.list.length - 1);
+  }
+
+  @action removeElement(index: number) {
+    MutableArray.apply(this.args.list);
+    //let index = this.args.list.find((elem) => elem == content)
+    //let index = this.listCopy.findIndex((d) => d == content)
+    this.args.list.removeAt(index);
+    if (this.args.onDeleteElement) this.args.onDeleteElement(index);
+  }
+}

frontend-old-ember/app/components/util/multiselect.hbs

@@ -0,0 +1,26 @@
+<div class={{@wrapper-class}}>
+  {{#if @readonly}}
+    <ul>
+      {{#each this.args.elements as |element|}}
+        {{#if element.checked}}
+          <li>
+            <p>{{element.name}}</p>
+          </li>
+        {{/if}}
+      {{/each}}
+    </ul>
+  {{else}}
+    {{#each this.args.elements as |element|}}
+      <label class={{@label-class}}>
+        {{element.description}}
+        <Input
+          @type="checkbox"
+          name="{{element.name}}"
+          class="{{@input-classes}}"
+          @checked={{element.checked}}
+          {{on "change" this.onChange}}
+        />
+      </label>
+    {{/each}}
+  {{/if}}
+</div>

frontend-old-ember/app/components/util/multiselect.ts

@@ -0,0 +1,21 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export interface UtilMultiselectSignature {
+  // The arguments accepted by the component
+  Args: {
+    elements: Array<{ name: string; checked: boolean; description: string }>;
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class UtilMultiselect extends Component<UtilMultiselectSignature> {
+  @action onChange() {
+    console.log(this.args.elements);
+  }
+}

frontend-old-ember/app/components/util/one-of-array.hbs

@@ -0,0 +1,16 @@
+<div class="{{@wrapper-class}}">
+  {{#if @readonly}}
+    <p class="{{@element-classes}}">{{@selected}}</p>
+  {{else}}
+    {{#each @elements as |element index|}}
+      <RadioButton
+        @value="{{element}}"
+        @groupValue={{@selected}}
+        @name={{@name}}
+        @required={{@required}}
+      >
+        {{element}}
+      </RadioButton>
+    {{/each}}
+  {{/if}}
+</div>

frontend-old-ember/app/components/util/string-array.hbs

@@ -0,0 +1,38 @@
+<div class="{{@wrapper-classes}}">
+  {{#if @readonly}}
+    <ul>
+      {{#each this.args.list as |element|}}
+        <p class="{{@readonly-element-classes}}">{{element.value}}</p>
+      {{/each}}
+    </ul>
+  {{else}}
+  <ul>
+    {{#each this.args.list as |element index|}}
+      <li>
+        <div class="string-array-element-wrapper {{@element-wrapper-classes}}">
+          <Input
+            class="{{@element-classes}}"
+            @type="text"
+            @value={{element.value}}
+          />
+          <div
+            class="{{@remove-element-classes}}"
+            type="button"
+            {{on "click" (fn this.removeElement index)}}
+          >
+            X
+          </div>
+        </div>
+      </li>
+    {{/each}}
+
+  </ul>
+  <div
+    class="{{@add-element-classes}}"
+    type="button"
+    {{on "click" this.addElement}}
+  >
+    Add element
+  </div>
+  {{/if}}
+</div>

frontend-old-ember/app/components/util/string-array.ts

@@ -0,0 +1,56 @@
+import MutableArray from '@ember/array/mutable';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export interface UtilStringArraySignature {
+  // The arguments accepted by the component
+  Args: {
+    list: MutableArray<{ value: string }>;
+    prefix: string;
+    onNewElement: (index: number) => void;
+    onDeleteElement: (index: number) => void;
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class UtilStringArray extends Component<UtilStringArraySignature> {
+  @action addElement() {
+    MutableArray.apply(this.args.list);
+    this.args.list.pushObject({ value: '' });
+    if (this.args.onNewElement)
+      this.args.onNewElement(this.args.list.length - 1);
+  }
+
+  @action removeElement(index: number) {
+    MutableArray.apply(this.args.list);
+    //let index = this.args.list.find((elem) => elem == content)
+    //let index = this.listCopy.findIndex((d) => d == content)
+    this.args.list.removeAt(index);
+    if (this.args.onDeleteElement) this.args.onDeleteElement(index);
+  }
+
+  transformArrayIntoUsable(arr: Array<string>): { [key: number]: string } {
+    const out: { [key: number]: string } = {};
+    const tmp = arr.map((elem: string, index: number) => {
+      out[index] = elem;
+      return elem;
+    });
+    return out;
+  }
+
+  countElemsInObj(obj: any): number {
+    let count = 0;
+
+    for (const prop in obj) {
+      if (obj.hasOwnProperty(prop)) ++count;
+    }
+
+    return count;
+  }
+}