Exercise 1

ex1/frontend/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode"
+  ]
+}

ex1/frontend/README.md

@@ -0,0 +1,65 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/)
+
++ [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its
+serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less,
+and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+  `vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account
+the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the
+other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte
+project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been
+structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash
+references keeps the default TypeScript setting of accepting type information from the entire workspace, while also
+adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to
+install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of
+JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds:
+not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing
+JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr`
+and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the
+details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be
+replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

ex1/frontend/dist/assets/index.9b35c904.css

@@ -0,0 +1 @@
+html{background-color:#1b2636;text-align:center;color:#fff}body{margin:0;color:#fff;font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}@font-face{font-family:Nunito;font-style:normal;font-weight:400;src:local(""),url(/assets/nunito-v16-latin-regular.06f3af3f.woff2) format("woff2")}#app{height:100vh;text-align:center}table.svelte-1bs0eb4{width:100%;border-collapse:collapse;margin-bottom:20px}th.svelte-1bs0eb4,td.svelte-1bs0eb4{border:1px solid #ddd;padding:12px;text-align:left}th.svelte-1bs0eb4{background-color:#000}tr.svelte-1bs0eb4:nth-child(even){background-color:#343434}tr.svelte-1bs0eb4:hover{background-color:#110909}.backdrop.svelte-rr3arx{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.dialog.svelte-rr3arx{background-color:#fff;padding:20px;border-radius:8px;max-height:300px;overflow-y:auto}table.svelte-xmvjp8{width:100%;border-collapse:collapse;margin-bottom:20px}th.svelte-xmvjp8,td.svelte-xmvjp8{border:1px solid #ddd;padding:12px;text-align:left}th.svelte-xmvjp8{background-color:#fff}tr.svelte-xmvjp8:nth-child(even){background-color:#343434;color:#fff}tr.svelte-xmvjp8:hover{background-color:#110909;color:#fff}

ex1/frontend/dist/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>bdooc</title>
+  <script type="module" crossorigin src="/assets/index.b19f2494.js"></script>
+  <link rel="stylesheet" href="/assets/index.9b35c904.css">
+</head>
+<body>
+<div id="app"></div>
+
+</body>
+</html>

ex1/frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>bdooc</title>
+</head>
+<body>
+<div id="app"></div>
+<script src="./src/main.ts" type="module"></script>
+</body>
+</html>

ex1/frontend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@tsconfig/svelte": "^3.0.0",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
+    "svelte-preprocess": "^4.10.7",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.7"
+  }
+}

ex1/frontend/package.json.md5

@@ -0,0 +1 @@
+ad9da3c17151b053a4d2fda8e3578901

ex1/frontend/src/Aggregation.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import Modal from "./Modal.svelte";
+  import { AggregateByColumn } from "../wailsjs/go/main/App.js";
+  export let isOpen: boolean;
+  export let keys: string[];
+
+  let group: string | null = null;
+  let onColumn: string | null = null;
+  let func: string | null = null;
+
+  let promise: ReturnType<typeof AggregateByColumn>;
+
+  async function Aggregate() {
+    if (!group || !onColumn || !func) return;
+    try {
+      const res = await AggregateByColumn(group, onColumn, func);
+      return res;
+    } catch (error) {
+      throw error.message;
+    }
+  }
+</script>
+
+<Modal
+  {isOpen}
+  onClose={() => {
+    isOpen = false;
+  }}
+>
+  <section>
+    <p>Aggregation</p>
+    <div>
+      <label for="group">Group by: </label>
+      <select bind:value={group} name="group" id="">
+        {#each keys as key}
+          <option value={key}>{key}</option>
+        {/each}
+      </select>
+    </div>
+    <div>
+      <label for="on-column">On: </label>
+      <select bind:value={onColumn} name="on-column" id="">
+        {#each keys as key}
+          <option value={key}>{key}</option>
+        {/each}
+      </select>
+      <label for="function">Using: </label>
+      <select bind:value={func} name="function" id="">
+        <option value="AVG">Average</option>
+        <option value="SUM">SUM</option>
+      </select>
+    </div>
+    <button type="button" on:click={() => (promise = Aggregate())}
+      >Aggregate</button
+    >
+  </section>
+  {#if promise}
+    <section>
+      {#await promise}
+        <p>Loading...</p>
+      {:then res}
+        <table class="agg-table">
+          <tr>
+            <th>{group}</th>
+            <th>{func} of {onColumn}</th>
+          </tr>
+          {#each Object.entries(res) as [key, value]}
+            <tr>
+              <td>{key}</td>
+              <td>{value}</td>
+            </tr>
+          {/each}
+        </table>
+      {:catch error}
+        <p>{error}</p>
+      {/await}
+    </section>
+  {/if}
+</Modal>
+
+<style>
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+  }
+
+  th,
+  td {
+    border: 1px solid #ddd;
+    padding: 12px;
+    text-align: left;
+  }
+
+  th {
+    background-color: #FFFFFF;
+  }
+
+  tr:nth-child(even) {
+    background-color: #343434;
+    color: #FFFFFF;
+  }
+
+  tr:hover {
+    background-color: #110909;
+    color: #FFFFFF;
+  }
+</style>

ex1/frontend/src/App.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import * as rt from "../wailsjs/runtime/runtime";
+
+  import Table from "./Table.svelte";
+  import { proto } from "../wailsjs/go/models";
+  import Aggregation from "./Aggregation.svelte";
+
+  let path: string;
+  let page = 0;
+
+  let isAggregate = false;
+
+  let limitReached: boolean;
+
+  $: console.log(limitReached);
+
+  const keys: string[] = Object.keys(new proto.Employee());
+
+  onMount(async () => {
+    rt.EventsOn("proto-opened", (_path: string) => {
+      path = _path;
+    });
+
+    rt.EventsOn("csv-converted", (_path: string) => {
+      console.log(_path);
+    });
+
+    rt.EventsOn("aggregation", () => {
+      isAggregate = true;
+    });
+  });
+</script>
+
+<main>
+  {#if path}
+    <Table {path} bind:page bind:limitReached />
+    <button disabled={page < 1} on:click={() => page--}>Prev</button>
+    <span>{page + 1}</span>
+    <button disabled={limitReached} on:click={() => page++}>Next</button>
+    <Aggregation bind:isOpen={isAggregate} {keys} />
+  {/if}
+</main>
+
+<style>
+</style>

ex1/frontend/src/Modal.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  export let isOpen: boolean;
+  export let onClose: () => void;
+</script>
+
+{#if isOpen}
+  <dialog class="backdrop" open={isOpen}>
+    <div class="dialog">
+      <slot />
+      <button on:click={() => onClose()}>Close</button>
+    </div>
+  </dialog>
+{/if}
+
+<style>
+  .backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dialog {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+</style>

ex1/frontend/src/Table.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { GetEmployees } from "../wailsjs/go/main/App.js";
+
+  export let path: string;
+  export let page: number;
+  let limit: number = 10;
+  export let limitReached: boolean;
+
+  let _column: string | null = null;
+  let _query: string | null = null;
+  let column: string | null = null;
+  let query: string | null = null;
+
+  async function listEmployees(
+    path: string,
+    limit: number,
+    page: number,
+    column?: string,
+    query?: string,
+  ) {
+    try {
+      const employees = await GetEmployees(path, limit, page, column, query);
+      limitReached = employees.length < limit;
+      return employees;
+    } catch (error) {
+      throw error.message;
+    }
+  }
+</script>
+
+<section>
+  {#await listEmployees(path, limit, page, column, query)}
+    <p>Loading...</p>
+  {:then employees}
+    <div>
+      <select
+        name="query"
+        on:change={({ currentTarget }) => (_column = currentTarget.value)}
+      >
+        {#each Object.keys(employees[0]) as key}
+          <option value={key}>{key}</option>
+        {/each}
+      </select>
+      <input placeholder="Query" type="text" bind:value={_query} />
+      <button
+        type="button"
+        on:click={() => {
+          page = 0;
+          column = _column;
+          query = _query;
+        }}>Search</button
+      >
+      <button type="button" on:click={() => {
+        query = ""
+        column = null
+        page = 0
+      }}>Reset</button>
+    </div>
+    <table>
+      <tr>
+        {#each Object.keys(employees[0]) as key}
+          <th>{key}</th>
+        {/each}
+      </tr>
+      {#each employees as employee}
+        <tr>
+          {#each Object.values(employee) as value}
+            <td>{value}</td>
+          {/each}
+        </tr>
+      {/each}
+    </table>
+  {:catch error}
+    <p>{error}</p>
+  {/await}
+</section>
+
+<style>
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+  }
+
+  th,
+  td {
+    border: 1px solid #ddd;
+    padding: 12px;
+    text-align: left;
+  }
+
+  th {
+    background-color: #000000;
+  }
+
+  tr:nth-child(even) {
+    background-color: #343434;
+  }
+
+  tr:hover {
+    background-color: #110909;
+  }
+</style>

ex1/frontend/src/assets/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

ex1/frontend/src/main.ts

@@ -0,0 +1,8 @@
+import './style.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')
+})
+
+export default app

ex1/frontend/src/style.css

@@ -0,0 +1,26 @@
+html {
+    background-color: rgba(27, 38, 54, 1);
+    text-align: center;
+    color: white;
+}
+
+body {
+    margin: 0;
+    color: white;
+    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+}
+
+@font-face {
+    font-family: "Nunito";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
+}
+
+#app {
+    height: 100vh;
+    text-align: center;
+}

ex1/frontend/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

ex1/frontend/svelte.config.js

@@ -0,0 +1,7 @@
+import sveltePreprocess from 'svelte-preprocess'
+
+export default {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess()
+}

ex1/frontend/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.svelte"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

ex1/frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

ex1/frontend/vite.config.ts

@@ -0,0 +1,7 @@
+import {defineConfig} from 'vite'
+import {svelte} from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()]
+})

ex1/frontend/wailsjs/go/main/App.d.ts

@@ -0,0 +1,13 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+import {proto} from '../models';
+import {main} from '../models';
+import {frontend} from '../models';
+
+export function AggregateByColumn(arg1:proto.EmployeeField,arg2:proto.EmployeeField,arg3:main.FunctionAgg):Promise<{[key: string]: number}>;
+
+export function GetEmployees(arg1:string,arg2:number,arg3:number,arg4:any,arg5:any):Promise<Array<proto.Employee>>;
+
+export function GetProtoPath():Promise<string>;
+
+export function OpenPath(arg1:Array<frontend.FileFilter>):Promise<string>;

ex1/frontend/wailsjs/go/main/App.js

@@ -0,0 +1,19 @@
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export function AggregateByColumn(arg1, arg2, arg3) {
+  return window['go']['main']['App']['AggregateByColumn'](arg1, arg2, arg3);
+}
+
+export function GetEmployees(arg1, arg2, arg3, arg4, arg5) {
+  return window['go']['main']['App']['GetEmployees'](arg1, arg2, arg3, arg4, arg5);
+}
+
+export function GetProtoPath() {
+  return window['go']['main']['App']['GetProtoPath']();
+}
+
+export function OpenPath(arg1) {
+  return window['go']['main']['App']['OpenPath'](arg1);
+}

ex1/frontend/wailsjs/go/models.ts

@@ -0,0 +1,87 @@
+export namespace proto {
+	
+	export class Employee {
+	    emp_id?: number;
+	    name_prefix?: string;
+	    first_name?: string;
+	    middle_initial?: string;
+	    last_name?: string;
+	    gender?: number;
+	    email?: string;
+	    fathers_name?: string;
+	    mothers_name?: string;
+	    mothers_maiden_name?: string;
+	    birthdate?: string;
+	    birth_time?: string;
+	    weight_kg?: number;
+	    joining_date?: string;
+	    joining_quarter?: number;
+	    joining_half?: number;
+	    joining_year?: number;
+	    joining_month?: number;
+	    joining_month_name?: number;
+	    joining_month_name_short?: number;
+	    joining_month_day?: number;
+	    joining_week_day?: number;
+	    joining_week_day_short?: number;
+	    years_of_service?: number;
+	    salary?: number;
+	    latest_hike_percentage?: string;
+	    ssn?: string;
+	    phone_number?: string;
+	    place_name?: string;
+	    county?: string;
+	    city?: string;
+	    state?: string;
+	    zip?: number;
+	    region?: string;
+	    username?: string;
+	    password?: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new Employee(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.emp_id = source["emp_id"];
+	        this.name_prefix = source["name_prefix"];
+	        this.first_name = source["first_name"];
+	        this.middle_initial = source["middle_initial"];
+	        this.last_name = source["last_name"];
+	        this.gender = source["gender"];
+	        this.email = source["email"];
+	        this.fathers_name = source["fathers_name"];
+	        this.mothers_name = source["mothers_name"];
+	        this.mothers_maiden_name = source["mothers_maiden_name"];
+	        this.birthdate = source["birthdate"];
+	        this.birth_time = source["birth_time"];
+	        this.weight_kg = source["weight_kg"];
+	        this.joining_date = source["joining_date"];
+	        this.joining_quarter = source["joining_quarter"];
+	        this.joining_half = source["joining_half"];
+	        this.joining_year = source["joining_year"];
+	        this.joining_month = source["joining_month"];
+	        this.joining_month_name = source["joining_month_name"];
+	        this.joining_month_name_short = source["joining_month_name_short"];
+	        this.joining_month_day = source["joining_month_day"];
+	        this.joining_week_day = source["joining_week_day"];
+	        this.joining_week_day_short = source["joining_week_day_short"];
+	        this.years_of_service = source["years_of_service"];
+	        this.salary = source["salary"];
+	        this.latest_hike_percentage = source["latest_hike_percentage"];
+	        this.ssn = source["ssn"];
+	        this.phone_number = source["phone_number"];
+	        this.place_name = source["place_name"];
+	        this.county = source["county"];
+	        this.city = source["city"];
+	        this.state = source["state"];
+	        this.zip = source["zip"];
+	        this.region = source["region"];
+	        this.username = source["username"];
+	        this.password = source["password"];
+	    }
+	}
+
+}
+

ex1/frontend/wailsjs/runtime/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@wailsapp/runtime",
+  "version": "2.0.0",
+  "description": "Wails Javascript runtime library",
+  "main": "runtime.js",
+  "types": "runtime.d.ts",
+  "scripts": {
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wailsapp/wails.git"
+  },
+  "keywords": [
+    "Wails",
+    "Javascript",
+    "Go"
+  ],
+  "author": "Lea Anthony <lea.anthony@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wailsapp/wails/issues"
+  },
+  "homepage": "https://github.com/wailsapp/wails#readme"
+}

ex1/frontend/wailsjs/runtime/runtime.d.ts

@@ -0,0 +1,235 @@
+/*
+ _       __      _ __
+| |     / /___ _(_) /____
+| | /| / / __ `/ / / ___/
+| |/ |/ / /_/ / / (__  )
+|__/|__/\__,_/_/_/____/
+The electron alternative for Go
+(c) Lea Anthony 2019-present
+*/
+
+export interface Position {
+    x: number;
+    y: number;
+}
+
+export interface Size {
+    w: number;
+    h: number;
+}
+
+export interface Screen {
+    isCurrent: boolean;
+    isPrimary: boolean;
+    width : number
+    height : number
+}
+
+// Environment information such as platform, buildtype, ...
+export interface EnvironmentInfo {
+    buildType: string;
+    platform: string;
+    arch: string;
+}
+
+// [EventsEmit](https://wails.io/docs/reference/runtime/events#eventsemit)
+// emits the given event. Optional data may be passed with the event.
+// This will trigger any event listeners.
+export function EventsEmit(eventName: string, ...data: any): void;
+
+// [EventsOn](https://wails.io/docs/reference/runtime/events#eventson) sets up a listener for the given event name.
+export function EventsOn(eventName: string, callback: (...data: any) => void): () => void;
+
+// [EventsOnMultiple](https://wails.io/docs/reference/runtime/events#eventsonmultiple)
+// sets up a listener for the given event name, but will only trigger a given number times.
+export function EventsOnMultiple(eventName: string, callback: (...data: any) => void, maxCallbacks: number): () => void;
+
+// [EventsOnce](https://wails.io/docs/reference/runtime/events#eventsonce)
+// sets up a listener for the given event name, but will only trigger once.
+export function EventsOnce(eventName: string, callback: (...data: any) => void): () => void;
+
+// [EventsOff](https://wails.io/docs/reference/runtime/events#eventsoff)
+// unregisters the listener for the given event name.
+export function EventsOff(eventName: string, ...additionalEventNames: string[]): void;
+
+// [EventsOffAll](https://wails.io/docs/reference/runtime/events#eventsoffall)
+// unregisters all listeners.
+export function EventsOffAll(): void;
+
+// [LogPrint](https://wails.io/docs/reference/runtime/log#logprint)
+// logs the given message as a raw message
+export function LogPrint(message: string): void;
+
+// [LogTrace](https://wails.io/docs/reference/runtime/log#logtrace)
+// logs the given message at the `trace` log level.
+export function LogTrace(message: string): void;
+
+// [LogDebug](https://wails.io/docs/reference/runtime/log#logdebug)
+// logs the given message at the `debug` log level.
+export function LogDebug(message: string): void;
+
+// [LogError](https://wails.io/docs/reference/runtime/log#logerror)
+// logs the given message at the `error` log level.
+export function LogError(message: string): void;
+
+// [LogFatal](https://wails.io/docs/reference/runtime/log#logfatal)
+// logs the given message at the `fatal` log level.
+// The application will quit after calling this method.
+export function LogFatal(message: string): void;
+
+// [LogInfo](https://wails.io/docs/reference/runtime/log#loginfo)
+// logs the given message at the `info` log level.
+export function LogInfo(message: string): void;
+
+// [LogWarning](https://wails.io/docs/reference/runtime/log#logwarning)
+// logs the given message at the `warning` log level.
+export function LogWarning(message: string): void;
+
+// [WindowReload](https://wails.io/docs/reference/runtime/window#windowreload)
+// Forces a reload by the main application as well as connected browsers.
+export function WindowReload(): void;
+
+// [WindowReloadApp](https://wails.io/docs/reference/runtime/window#windowreloadapp)
+// Reloads the application frontend.
+export function WindowReloadApp(): void;
+
+// [WindowSetAlwaysOnTop](https://wails.io/docs/reference/runtime/window#windowsetalwaysontop)
+// Sets the window AlwaysOnTop or not on top.
+export function WindowSetAlwaysOnTop(b: boolean): void;
+
+// [WindowSetSystemDefaultTheme](https://wails.io/docs/next/reference/runtime/window#windowsetsystemdefaulttheme)
+// *Windows only*
+// Sets window theme to system default (dark/light).
+export function WindowSetSystemDefaultTheme(): void;
+
+// [WindowSetLightTheme](https://wails.io/docs/next/reference/runtime/window#windowsetlighttheme)
+// *Windows only*
+// Sets window to light theme.
+export function WindowSetLightTheme(): void;
+
+// [WindowSetDarkTheme](https://wails.io/docs/next/reference/runtime/window#windowsetdarktheme)
+// *Windows only*
+// Sets window to dark theme.
+export function WindowSetDarkTheme(): void;
+
+// [WindowCenter](https://wails.io/docs/reference/runtime/window#windowcenter)
+// Centers the window on the monitor the window is currently on.
+export function WindowCenter(): void;
+
+// [WindowSetTitle](https://wails.io/docs/reference/runtime/window#windowsettitle)
+// Sets the text in the window title bar.
+export function WindowSetTitle(title: string): void;
+
+// [WindowFullscreen](https://wails.io/docs/reference/runtime/window#windowfullscreen)
+// Makes the window full screen.
+export function WindowFullscreen(): void;
+
+// [WindowUnfullscreen](https://wails.io/docs/reference/runtime/window#windowunfullscreen)
+// Restores the previous window dimensions and position prior to full screen.
+export function WindowUnfullscreen(): void;
+
+// [WindowIsFullscreen](https://wails.io/docs/reference/runtime/window#windowisfullscreen)
+// Returns the state of the window, i.e. whether the window is in full screen mode or not.
+export function WindowIsFullscreen(): Promise<boolean>;
+
+// [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
+// Sets the width and height of the window.
+export function WindowSetSize(width: number, height: number): Promise<Size>;
+
+// [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
+// Gets the width and height of the window.
+export function WindowGetSize(): Promise<Size>;
+
+// [WindowSetMaxSize](https://wails.io/docs/reference/runtime/window#windowsetmaxsize)
+// Sets the maximum window size. Will resize the window if the window is currently larger than the given dimensions.
+// Setting a size of 0,0 will disable this constraint.
+export function WindowSetMaxSize(width: number, height: number): void;
+
+// [WindowSetMinSize](https://wails.io/docs/reference/runtime/window#windowsetminsize)
+// Sets the minimum window size. Will resize the window if the window is currently smaller than the given dimensions.
+// Setting a size of 0,0 will disable this constraint.
+export function WindowSetMinSize(width: number, height: number): void;
+
+// [WindowSetPosition](https://wails.io/docs/reference/runtime/window#windowsetposition)
+// Sets the window position relative to the monitor the window is currently on.
+export function WindowSetPosition(x: number, y: number): void;
+
+// [WindowGetPosition](https://wails.io/docs/reference/runtime/window#windowgetposition)
+// Gets the window position relative to the monitor the window is currently on.
+export function WindowGetPosition(): Promise<Position>;
+
+// [WindowHide](https://wails.io/docs/reference/runtime/window#windowhide)
+// Hides the window.
+export function WindowHide(): void;
+
+// [WindowShow](https://wails.io/docs/reference/runtime/window#windowshow)
+// Shows the window, if it is currently hidden.
+export function WindowShow(): void;
+
+// [WindowMaximise](https://wails.io/docs/reference/runtime/window#windowmaximise)
+// Maximises the window to fill the screen.
+export function WindowMaximise(): void;
+
+// [WindowToggleMaximise](https://wails.io/docs/reference/runtime/window#windowtogglemaximise)
+// Toggles between Maximised and UnMaximised.
+export function WindowToggleMaximise(): void;
+
+// [WindowUnmaximise](https://wails.io/docs/reference/runtime/window#windowunmaximise)
+// Restores the window to the dimensions and position prior to maximising.
+export function WindowUnmaximise(): void;
+
+// [WindowIsMaximised](https://wails.io/docs/reference/runtime/window#windowismaximised)
+// Returns the state of the window, i.e. whether the window is maximised or not.
+export function WindowIsMaximised(): Promise<boolean>;
+
+// [WindowMinimise](https://wails.io/docs/reference/runtime/window#windowminimise)
+// Minimises the window.
+export function WindowMinimise(): void;
+
+// [WindowUnminimise](https://wails.io/docs/reference/runtime/window#windowunminimise)
+// Restores the window to the dimensions and position prior to minimising.
+export function WindowUnminimise(): void;
+
+// [WindowIsMinimised](https://wails.io/docs/reference/runtime/window#windowisminimised)
+// Returns the state of the window, i.e. whether the window is minimised or not.
+export function WindowIsMinimised(): Promise<boolean>;
+
+// [WindowIsNormal](https://wails.io/docs/reference/runtime/window#windowisnormal)
+// Returns the state of the window, i.e. whether the window is normal or not.
+export function WindowIsNormal(): Promise<boolean>;
+
+// [WindowSetBackgroundColour](https://wails.io/docs/reference/runtime/window#windowsetbackgroundcolour)
+// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
+export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
+
+// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
+// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
+export function ScreenGetAll(): Promise<Screen[]>;
+
+// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
+// Opens the given URL in the system browser.
+export function BrowserOpenURL(url: string): void;
+
+// [Environment](https://wails.io/docs/reference/runtime/intro#environment)
+// Returns information about the environment
+export function Environment(): Promise<EnvironmentInfo>;
+
+// [Quit](https://wails.io/docs/reference/runtime/intro#quit)
+// Quits the application.
+export function Quit(): void;
+
+// [Hide](https://wails.io/docs/reference/runtime/intro#hide)
+// Hides the application.
+export function Hide(): void;
+
+// [Show](https://wails.io/docs/reference/runtime/intro#show)
+// Shows the application.
+export function Show(): void;
+
+// [ClipboardGetText](https://wails.io/docs/reference/runtime/clipboard#clipboardgettext)
+// Returns the current text stored on clipboard
+export function ClipboardGetText(): Promise<string>;
+
+// [ClipboardSetText](https://wails.io/docs/reference/runtime/clipboard#clipboardsettext)
+// Sets a text on the clipboard
+export function ClipboardSetText(text: string): Promise<boolean>;

ex1/frontend/wailsjs/runtime/runtime.js

@@ -0,0 +1,202 @@
+/*
+ _       __      _ __
+| |     / /___ _(_) /____
+| | /| / / __ `/ / / ___/
+| |/ |/ / /_/ / / (__  )
+|__/|__/\__,_/_/_/____/
+The electron alternative for Go
+(c) Lea Anthony 2019-present
+*/
+
+export function LogPrint(message) {
+    window.runtime.LogPrint(message);
+}
+
+export function LogTrace(message) {
+    window.runtime.LogTrace(message);
+}
+
+export function LogDebug(message) {
+    window.runtime.LogDebug(message);
+}
+
+export function LogInfo(message) {
+    window.runtime.LogInfo(message);
+}
+
+export function LogWarning(message) {
+    window.runtime.LogWarning(message);
+}
+
+export function LogError(message) {
+    window.runtime.LogError(message);
+}
+
+export function LogFatal(message) {
+    window.runtime.LogFatal(message);
+}
+
+export function EventsOnMultiple(eventName, callback, maxCallbacks) {
+    return window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
+}
+
+export function EventsOn(eventName, callback) {
+    return EventsOnMultiple(eventName, callback, -1);
+}
+
+export function EventsOff(eventName, ...additionalEventNames) {
+    return window.runtime.EventsOff(eventName, ...additionalEventNames);
+}
+
+export function EventsOnce(eventName, callback) {
+    return EventsOnMultiple(eventName, callback, 1);
+}
+
+export function EventsEmit(eventName) {
+    let args = [eventName].slice.call(arguments);
+    return window.runtime.EventsEmit.apply(null, args);
+}
+
+export function WindowReload() {
+    window.runtime.WindowReload();
+}
+
+export function WindowReloadApp() {
+    window.runtime.WindowReloadApp();
+}
+
+export function WindowSetAlwaysOnTop(b) {
+    window.runtime.WindowSetAlwaysOnTop(b);
+}
+
+export function WindowSetSystemDefaultTheme() {
+    window.runtime.WindowSetSystemDefaultTheme();
+}
+
+export function WindowSetLightTheme() {
+    window.runtime.WindowSetLightTheme();
+}
+
+export function WindowSetDarkTheme() {
+    window.runtime.WindowSetDarkTheme();
+}
+
+export function WindowCenter() {
+    window.runtime.WindowCenter();
+}
+
+export function WindowSetTitle(title) {
+    window.runtime.WindowSetTitle(title);
+}
+
+export function WindowFullscreen() {
+    window.runtime.WindowFullscreen();
+}
+
+export function WindowUnfullscreen() {
+    window.runtime.WindowUnfullscreen();
+}
+
+export function WindowIsFullscreen() {
+    return window.runtime.WindowIsFullscreen();
+}
+
+export function WindowGetSize() {
+    return window.runtime.WindowGetSize();
+}
+
+export function WindowSetSize(width, height) {
+    window.runtime.WindowSetSize(width, height);
+}
+
+export function WindowSetMaxSize(width, height) {
+    window.runtime.WindowSetMaxSize(width, height);
+}
+
+export function WindowSetMinSize(width, height) {
+    window.runtime.WindowSetMinSize(width, height);
+}
+
+export function WindowSetPosition(x, y) {
+    window.runtime.WindowSetPosition(x, y);
+}
+
+export function WindowGetPosition() {
+    return window.runtime.WindowGetPosition();
+}
+
+export function WindowHide() {
+    window.runtime.WindowHide();
+}
+
+export function WindowShow() {
+    window.runtime.WindowShow();
+}
+
+export function WindowMaximise() {
+    window.runtime.WindowMaximise();
+}
+
+export function WindowToggleMaximise() {
+    window.runtime.WindowToggleMaximise();
+}
+
+export function WindowUnmaximise() {
+    window.runtime.WindowUnmaximise();
+}
+
+export function WindowIsMaximised() {
+    return window.runtime.WindowIsMaximised();
+}
+
+export function WindowMinimise() {
+    window.runtime.WindowMinimise();
+}
+
+export function WindowUnminimise() {
+    window.runtime.WindowUnminimise();
+}
+
+export function WindowSetBackgroundColour(R, G, B, A) {
+    window.runtime.WindowSetBackgroundColour(R, G, B, A);
+}
+
+export function ScreenGetAll() {
+    return window.runtime.ScreenGetAll();
+}
+
+export function WindowIsMinimised() {
+    return window.runtime.WindowIsMinimised();
+}
+
+export function WindowIsNormal() {
+    return window.runtime.WindowIsNormal();
+}
+
+export function BrowserOpenURL(url) {
+    window.runtime.BrowserOpenURL(url);
+}
+
+export function Environment() {
+    return window.runtime.Environment();
+}
+
+export function Quit() {
+    window.runtime.Quit();
+}
+
+export function Hide() {
+    window.runtime.Hide();
+}
+
+export function Show() {
+    window.runtime.Show();
+}
+
+export function ClipboardGetText() {
+    return window.runtime.ClipboardGetText();
+}
+
+export function ClipboardSetText(text) {
+    return window.runtime.ClipboardSetText(text);
+}