TourIAm/TIAMSharedUI/Shared/SliderItemSelector.razor

@using System.Linq.Expressions
@using TIAM.Entities.Transfers
@using TIAMWebApp.Shared.Application.Interfaces
@using TIAMWebApp.Shared.Application.Utility
@inject LogToBrowserConsole logToBrowserConsole

<style>
    .underlineInput{
        padding-left: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid;
    }

    .underlineInput > input {
        padding-left: 10px;
        
        border-bottom: 1px solid;
    }

    #@OwlId .item {
        height: 30vh;
        max-height: 30vh;
        overflow-y: hidden;
        vertical-align: middle;
        align-content: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

        #@OwlId .item img {
            display: block;
            width: 100%;
            height: auto;
        }
</style>


<div id=@OwlId class="owl-carousel owl-theme">
    
    <div class="item" id="0" style="background-image: url('_content/TIAMSharedUI/images/mapbg.jpg'); background-position: center; background-size: cover;">
        <div class="item-desc text-center pt-3">
            
             <div class="align-content-center my-3">
            <DxTextBox @ref="textField"
                @bind-Text="@Content"
                BindValueMode="BindValueMode.OnDelayedInput"
                InputDelay="@InputDelay"
                CssClass="form-field w-100"
                NullText="Please type an address or swipe to select from preset destinations!">
                @* TextExpression=@TExpression  *@
                @* TextChanged="@OnTextChanged"> *@
            </DxTextBox>        
           </div>
        </div>
    </div>
    
    <div class="item" id="1" style="background-image: url(https://images.unsplash.com/photo-1551867633-194f125bddfa?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Liszt Ferenc Airport</h3>            
           
        </div>
    </div>
    <div class="item" id="2" style="background-image: url(https://images.unsplash.com/photo-1549877452-9c387954fbc2?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Buda Castle</h3>
            
        </div>
    </div>
    <div class="item" id="3" style="background-image: url(https://images.unsplash.com/photo-1507622560124-621e26755fb8?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Chain Bridge</h3>
            
        </div>
    </div>
</div>
<p>Please type an address or swipe to select from preset destinations!</p>




<script>
    var JsOwlId;    
    
    //var owl = $('#' + JsOwlId);
    var i = 0;


    /*CStoJSCall = function (dotNetObjRef) {
        function mouseCoordinatesHandler() {
            dotNetObjRef.invokeMethodAsync("ShowCoordinates", "Hugrabug" + i);
            i++;
        };

        mouseCoordinatesHandler();

        owl.owlCarousel({
            onDragged: mouseCoordinatesHandler
        });

    };*/

    /*$(document).ready(function () {


        owl.owlCarousel({
            
            navigation: true, // Show next and prev buttons
            loop: true,
            slideSpeed: 300,
            paginationSpeed: 400,
            items: 1,
            itemsDesktop: false,
            itemsDesktopSmall: false,
            itemsTablet: false,
            itemsMobile: false            
        });

        owl.trigger("to.owl.carousel", owl.maximum)

    });*/

    function InitOwl(id) {
        JsOwlId= id;
        owl = $('#' + JsOwlId);
        owl.owlCarousel({

            navigation: true, // Show next and prev buttons
            loop: true,
            slideSpeed: 300,
            paginationSpeed: 400,
            items: 1,
            itemsDesktop: false,
            itemsDesktopSmall: false,
            itemsTablet: false,
            itemsMobile: false
        });

        owl.trigger("to.owl.carousel", owl.maximum)
    };

    function CStoJSCall(dotNetObjRef) {
        

        mouseCoordinatesHandler(dotNetObjRef);        

        /*owl.on('changed.owl.carousel', function (e) {
            mouseCoordinatesHandler(dotNetObjRef);
        });*/

        owl.on('changed.owl.carousel', function (property) {
            var current = property.item.index;
            var src = $(property.target).find(".item").eq(current).attr('id');
            console.log('Image current is ' + src);
            mouseCoordinatesHandler(dotNetObjRef, src);
        });

    };

    function mouseCoordinatesHandler(objRef, itemId) {
        objRef.invokeMethodAsync("ShowCoordinates", "Hugrabug" + i, itemId);
        i++;
    };

    function setOwlId(id) {
        JsOwlId = id;
        console.log('SetOwlId called, value is ' + owlId);        
    };
        
</script>

@code {
    [Parameter]
    public string OwlId { get; set; }

    [Parameter]
    public string TextValue { get; set; } = "";

    int? InputDelay { get; set; } = 3500;
    BindValueMode BindValueMode { get; set; } = BindValueMode.OnDelayedInput;    

    public int SliderElementId = 0;

    private string content = "";

    string Content
    {
        get { return content; }
        set {
            content = value;
            OnTextChanged(value);
        }
    }

    [Parameter]
    public Expression<Func<string>> TExpression { get; set; }

    [Parameter]
    public EventCallback<string> OnSliderChanged { get; set; }

    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    [Inject]
    public ITransferDataService TransferDataService { get; set; } 

    public List<TransferDestination> Destinations = new List<TransferDestination>();

    public DxTextBox textField;

    TransferDestination Result;

    protected override void OnParametersSet()
    {
        logToBrowserConsole.LogToBC($"SliderItemSelector is initialized with OwlId: {OwlId}");

        base.OnParametersSet();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if(firstRender)
        {
            var dotNetObjRef = DotNetObjectReference.Create(this);
            JSRuntime.InvokeVoidAsync("setOwlId", OwlId);
            JSRuntime.InvokeVoidAsync("InitOwl", OwlId);
            JSRuntime.InvokeVoidAsync("CStoJSCall", dotNetObjRef);

        }

    }     


    [JSInvokable]
    public void ShowCoordinates(string coordinates, string itemId)
    {
        logToBrowserConsole.LogToBC($"Slider is changing: {coordinates}, {itemId}");
        //content = coordinates + "item = " + itemId;
        SliderElementId = Convert.ToInt32(itemId);

        if (SliderElementId > 0)
        {
            ParsePresetAddress(GetAddressFromSelectedSliderItem(SliderElementId));
        }
        else
        {

            OnTextChanged(Content);
        }


        /*StateHasChanged();*/
    }

    public void ParsePresetAddress(string address)
    {
        OnSliderChanged.InvokeAsync(address);
    }

    public void OnTextChanged(string text)
    {
        logToBrowserConsole.LogToBC($"Slider text changed: {text}");
        OnSliderChanged.InvokeAsync(text);
    }

    public string GetAddressFromSelectedSliderItem(int SliderListIndex)
    {
        if(Destinations.Count >0 && Destinations.Count >= SliderListIndex)
        {            
            return Destinations[SliderElementId-1].AddressString;
        }
        else return "Something wrong";
    }

    protected override async Task OnInitializedAsync()
    {
        Destinations = await TransferDataService.GetDestinationsAsync();
        Content = TextValue;
    }

}