HTML:

<div id="Main" class="ui fluid container">
	<h2 class="ui header">
		<i>Title</i>
		<div class="sub header">TitleDescr</div>
	</h2>
	<button @click="Parse" class="ui labeled blue icon button">
		<i class="play icon"></i>
		Start
	</button>
	<button @click="Stop" class="ui labeled red icon button">
		<i class="pause icon"></i>
		Pause
	</button>
	<br>
	<br>
	<button class="ui basic button">
		<i class="icon user"></i>
		{{ParseResult}}
	</button>
</div>


JS:

$(document).ready(function() {


    var app = new Vue({
        el: '#Main',
        data: {
            Log: [],
            Thread: null,
            ParseResult: "",
            Error: ""
        },
        Mounted() {
                setInterval(() => this.Parse(), 2000);
        },
        methods: {
            Parse: async function() {
                var self = this
                this.Thread = new BASThread()
                try {
                    var Result = await this.Thread.RunFunction("Parse", {})
                    this.ParseResult = Result
                } catch (e) {
                    this.Error = e
                    setTimeout(function() {
                        self.Error = ""
                    }, 5000)
                }

            },
            Stop: async function() {
                if (!this.IsRunning) {
                    return;
                }

                this.Log = []
                this.Error = ""

                this.Thread.StopThread()
                this.IsRunning = false;
            }
        }
    })

    /////Api event handler
    Api.SetEventHandler(function(EventType, EventData) {

        /////Script started
        if (EventType == "start") {}

        /////Script stopped
        if (EventType == "stop") {}

        if (EventType == "log") {
            //Obtain log text
            var LogText = EventData["text"]
            this.ParseResult = LogText
        };

        /////More events: https://wiki.bablosoft.com/web-interface/#/managingscriptlifetime

    })

    /////Automatically start script https://wiki.bablosoft.com/web-interface/#/managingscriptlifetime?id=method-acceptresources
    Api.AcceptResources(true)


    /////After everything is initialized may show body
    $("body").fadeIn()

    /////Events

});



/////Resource values are obtained through this function when hitting run button, you can change it.
/////For example, you can edit value entered by user, make custom validation, or replace resource system compleatelly
/////More info: https://wiki.bablosoft.com/web-interface/#/managingscriptlifetime?id=method-acceptresources
function GetResourceValue(ResourceName) {
    return ""
}


//Interface editor has no connection to BAS and therefore can't execute BAS functions. 
//If you try to call function from interface editor, 
//you will get a random string as result in a several seconds. 
//This behavior is not acceptable in several cases: if your function return a list, 
//not a string, or string in specific format, if you want to test error handling, etc. 
//In order to circumvent this limitation. you need to define "EmulateFunctionRun" 
//function inside web interface.
//More info: https://wiki.bablosoft.com/web-interface/#/callbasfunction?id=debugging-bas-function-call

function EmulateFunctionRun(FunctionName, FunctionParameters, Resolve, Reject) {

    //Generate random data
    var RandomTime = Math.floor(Math.random() * (1000 - 500)) + 500
    var RandomResult = Math.floor(Math.random() * (1000))

    //Return result in RandomTime milliseconds
    setTimeout(function() {
        //Generate result string
        if (FunctionName == "Query") {
            Resolve([
                "Test result link1", "Test result name1",
            ])

        } else {
            Resolve("Test result " + RandomResult)
        }
    }, RandomTime)

}