plexpy/data/interfaces/default/app_import.html

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
            <h4 class="modal-title">Import ${app} Database</h4>
        </div>
        <div class="modal-body" id="modal-text">
            <form id="import_database" enctype="multipart/form-data" method="post" name="import_database">
                <input type="hidden" id="import_app" name="import_app" value="${app.lower()}" />
                % if app in ('PlexWatch', 'Plexivity'):
                <p class="help-block">
                    <%
                        v = ''
                        if app == 'PlexWatch':
                            v = '0.3.2'
                        elif app == 'Plexivity':
                            v = '0.9.8'
                    %>
                    <strong>Please ensure your ${app} database is at version ${v} or higher.</strong>
                </p>
                % endif
                <div class="form-group">
                    <label for="import_database_file">Option 1: Upload a Database File</label>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="input-group">
                                <label for="import_database_file" class="input-group-btn">
                                    <span class="btn btn-form">Upload</span>
                                    <input type="file" style="display: none;" id="import_database_file" name="import_database_file" required>
                                </label>
                                <input type="text" class="form-control" disabled>
                            </div>
                        </div>
                    </div>
                    <p class="help-block">Upload the ${app} database you wish to import.</p>
                </div>
                <div class="form-group">
                    <label for="import_database_path">Option 2: Browse for a Database File</label>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <button class="btn btn-form" type="button" id="import_database_path_browse">Browse</button>
                                </span>
                                <input type="text" class="form-control" id="import_database_path" name="import_database_path" value="" required disabled>
                            </div>
                        </div>
                    </div>
                    <p class="help-block">Browse for the ${app} database you wish to import.</p>
                </div>
                % if app == 'Tautulli':
                <div class="form-group">
                    <label for="table_name">Import Method</label>
                    <div class="row">
                        <div class="col-xs-4">
                            <select class="form-control" id="import_method" name="import_method">
                                <option value="merge">Merge</option>
                                <option value="overwrite">Overwrite</option>
                            </select>
                        </div>
                    </div>
                    <p class="help-block">Select how you would like to import the Tautulli history.</p>
                    <ul class="help-block" style="padding-inline-start: 15px;">
                        <li><strong>Merge</strong> will add all history and remove any duplicates from the imported database into the current database.</li>
                        <li><strong>Overwrite</strong> will replace all history in the current database with the imported database.</li>
                    </ul>
                    <p class="help-block">Note: Libraries, users, notification agents, newsletter agents, and registered mobile devices will also be imported</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="import_backup_db" id="import_backup_db" value="1" checked> Backup Current Database
                    </label>
                    <p class="help-block">Automatically create a backup of the current database before importing.</p>
                </div>
                % else:
                <div class="form-group">
                    <label for="import_table_name">Table Name</label>
                    <div class="row">
                        <div class="col-xs-4">
                            <select class="form-control" id="import_table_name" name="import_table_name">
                                <option value="processed">Processed</option>
                                <option value="grouped">Grouped</option>
                            </select>
                        </div>
                    </div>
                    <p class="help-block">Select the table name from which you wish to import. Only import one of these, importing both will result in duplicated data.</p>
                </div>
                <div class="form-group">
                    <label for="import_ignore_interval">Ignore Interval</label>
                    <div class="row">
                        <div class="col-xs-2">
                            <input type="text" class="form-control" id="import_ignore_interval" name="import_ignore_interval" value="120" required>
                        </div>
                    </div>
                    <p class="help-block">Enter the minimum duration (in seconds) an item must have been active for. Set to 0 to import all.</p>
                </div>
                % endif
            </form>
        </div>
        <div class="modal-footer">
            <div>
                <span id="status-message" style="padding-right: 25px;"></span>
                <input type="button" id="import_db" class="btn btn-bright" value="Import">
            </div>
        </div>
    </div>
</div>
<script>
    $('#import_database_path_browse').click(function () {
        $('#browse-path-type').text('Databse File');
        $('#browse-path-modal').modal('show');
        browsePath(null, null, '.db');
    });
    $('#select-browse-file').click(function () {
        $('#browse-path-modal').modal('hide');
        $("#import_database_path").val($('#browse-path').val());
    });

    $('#import_database_file').change(function() {
        if ($(this)[0].files[0]) {
            var input = $(this).parents('.input-group').find(':text')
            input.val($(this)[0].files[0].name);
        }
    });

    $("#import_db").click(function() {
        var database_file = false;

        var formData = new FormData();
        formData.append('app', $("#import_app").val());
        formData.append('database_path', $("#import_database_path").val());
        if ($('#import_database_file')[0].files[0]) {
            database_file = true;
            formData.append('database_file', $('#import_database_file')[0].files[0]);
        }
        if ($("#import_method").length) {
            formData.append('method', $("#import_method").val());
        }
        if ($("#import_backup_db").length) {
            formData.append('backup', $("#import_backup_db").is(':checked'));
        }
        if ($("#import_table_name").length) {
            formData.append('table_name', $("#import_table_name").val());
        }
        if ($("#import_ignore_interval").length) {
            formData.append('ignore_interval', $("#import_ignore_interval").val());
        }
        if (database_file) {
            $("#status-message").html('<i class="fa fa-fw fa-spin fa-refresh"></i> Uploading database file...');
        }

        $.ajax({
            url: 'import_database',
            type: 'POST',
            data: formData,
            cache: false,
            async: true,
            contentType: false,
            processData: false,
            success: function(data) {
                $("#status-message").html(data);
                $("#import_database_file").val(null);
                $("#import_database_path").val('');
            }
        });
    });
</script>