Vueify restart, move js files to vue, add state-switch & more

[OmgImAlexis]

Moved js files to vue

• config/index
• home/restart
• manage/failed-downloads
• manage/init
• manage/index
• manage/subtitle-missed
• mass-update

Misc changes

• displayShow renamed to show
• Added state-switch component to replace loading, yes and no images.
• Vueifed restart page
• Replaced is_alive jsonp route with json
• Enabled typescript validation in src directory.

[OmgImAlexis]

This is never called on the old setup so should we just remove it?

The old js is below.

let currentPid = $('.messages').attr('current-pid');
const defaultPage = $('.messages').attr('default-page');
const checkIsAlive = setInterval(() => {
    // @TODO: Move to API
    $.get('home/is_alive/', data => {
        if (data.msg.toLowerCase() === 'nope') {
            // If it's still initializing then just wait and try again
            $('#restart_message').show();
        } else if (currentPid === '' || data.msg === currentPid) {
            $('#shut_down_loading').hide();
            $('#shut_down_success').show();
            currentPid = data.msg;
        } else {
            clearInterval(checkIsAlive);
            $('#restart_loading').hide();
            $('#restart_success').show();
            $('#refresh_message').show();
            setTimeout(() => {
                window.location = defaultPage + '/';
            }, 5000);
        }
    }, 'jsonp');
}, 100);

[sharkykh]

This is never called on the old setup so should we just remove it?

On my attempt of fully vueifying this page (one of the "backlogged PRs" I told you about 😅),
I actually decided to implement this by giving the restart a 60 second timeout. This serves 2 good points:

1. When the timeout is reached, you (can) stop trying to poll /home/is_alive. Freeing up the browser if the tab stayed open.
2. Actually giving the user a correct status for the restart.

It's your call if you want to implement it in this PR, but either way I would suggest not removing it since it's actually something we should be doing.

[OmgImAlexis]

Okay let's keep it, what if instead of polling we used the websocket disconnection mutation to know it's gone down? That'll happen automatically when the server disconnects and I'm pretty sure it's close to the end of the shutdown cycle where it happens.

We can then have a watch on a Vuex state socket.connected(I think?) and have the page redirect to the default page once it's reconnected.

We could also have a modal in the background the listens to these events on all pages but the restart and when it disconnects the modal blocks the page until it reconnects?

[sharkykh]

Using the websocket is an option too, however you'd still need to know if the app is fully initialized. Currently this is the check with the process ID - if the app is not ready no PID is sent back.

[OmgImAlexis]

We could wait for an "ok" message on the socket?

[sharkykh]

If the client browser isn't connected it might not receive the message,
I don't think it has the same reliability.

[sharkykh]

I'm removing loglevel in #5185

[sharkykh]

Replace log (loglevel) with console.

[sharkykh]

Replace log (loglevel) with console.

[sharkykh]

Still relevant:

• Vueify restart, move js files to vue, add state-switch & more #5159 (comment)
• Vueify restart, move js files to vue, add state-switch & more #5159 (comment)
• Vueify restart, move js files to vue, add state-switch & more #5159 (comment)

[p0psicles]

Whats the status off this pr?

[OmgImAlexis]

@p0psicles I think it just needs a rebase and the issues @sharkykh mentioned could be seen to but that could also be moved to a new issue since I'm busy and don't want this to get stale.