perspectivism/src/ui/LanguagesSettings.svelte at master · lucksus/perspectivism · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script lang="ts">
    import DataTable, {Head, Body, Row, Cell} from '@smui/data-table';
    import Button from '@smui/button'
    import type LanguageRef from "../ad4m/LanguageRef";
    import type { LanguageController } from "../core/LanguageController";
    import iconComponentFromString from "./iconComponentFromString";
    import { LANGUAGES_WITH_SETTINGS, SET_LANGUAGE_SETTINGS } from "./graphql_queries"
    import { getClient, mutation } from "svelte-apollo"

    let languages: LanguageRef[] = []
    let settingsIconConstructors = new Map()
    let settingsIcons = {}

    const M_SET_LANGUAGE_SETTINGS = mutation(SET_LANGUAGE_SETTINGS)

    getClient().query({query: LANGUAGES_WITH_SETTINGS}).then(async result => {
        languages = result.data.languages
        await checkLanguagesForSettingsIcon()
        createCustomSettingsIcons()
    })

    async function asyncForEach(array, callback) {
      for (let index = 0; index < array.length; index++) {
        await callback(array[index], index, array);
      }
    }

    async function checkLanguagesForSettingsIcon() {
      await asyncForEach(languages, async lang => {
        const settingsComponentName = lang.name + '-settings'
        console.debug("CHecking for", settingsComponentName)
        const code = lang.settingsIcon?.code
        if(!code) {
          return
        }
        if(!settingsIconConstructors.get(lang)) {
          console.debug("not there yet...")
          let SettingsIcon = customElements.get(settingsComponentName)
          if(!SettingsIcon) {
              console.debug("not in registry yet...")
              SettingsIcon = iconComponentFromString(code, settingsComponentName)
              customElements.define(settingsComponentName, SettingsIcon);
          }
          settingsIconConstructors.set(lang, SettingsIcon)
        }
      })
    }

    async function createCustomSettingsIcons() {
      for(const item of settingsIconConstructors) {
        const lang = item[0]
        const iconConstructor = item[1]
        const icon = new iconConstructor()
        console.log("lang", lang)
        console.log("icon", icon)
        document.getElementById(langToSettingsContainer(lang)).appendChild(icon)
        settingsIcons[lang.address] = icon
        icon.settings = JSON.parse(lang.settings)
      }
    }

    function langToSettingsContainer(lang) {
      const address = lang.address ? lang.address : lang
      return `${address}-settings-icon`
    }

    function updateSettings(lang) {
      M_SET_LANGUAGE_SETTINGS({variables: {
        languageAddress: lang.address,
        settings: JSON.stringify(settingsIcons[lang.address].settings)
      }})
    }
</script>

<DataTable>
    <Head>
      <Row>
        <Cell>Name</Cell>
        <Cell>Hash</Cell>
        <Cell>Settings</Cell>
      </Row>
    </Head>
    <Body>
      {#each languages as lang}
        <Row>
          <Cell>{lang.name}</Cell>
          <Cell>{lang.address}</Cell>
          <Cell>
              <div id={langToSettingsContainer(lang)}></div>
              {#if settingsIcons[lang.address]}
                <Button on:click={()=>updateSettings(lang)}>Update</Button>
              {/if}
          </Cell>
        </Row>
      {/each}
    </Body>
  </DataTable>