webgui/emhttp/plugins/dynamix/scripts/select_case

#!/usr/bin/php -q
<?PHP
/* Copyright 2005-2024, Lime Technology
 * Copyright 2012-2024, Bergware International.
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License version 2,
 * as published by the Free Software Foundation.
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 */
?>
<?
$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
require_once "$docroot/webGui/include/Helpers.php";
extract(parse_plugin_cfg('dynamix',true));

// add translations
$_SERVER['REQUEST_URI'] = 'dashboard';
$login_locale = _var($display,'locale');
require_once "$docroot/webGui/include/Translations.php";

$boot   = "/boot/config/plugins/dynamix";
$file   = $argv[1];
$cmodel = is_file("$boot/$file") ? file_get_contents("$boot/$file") : '';

$cases = file("$docroot/webGui/styles/default-cases.css", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$models = [];

// Extract case model names from CSS file
foreach ($cases as $case) {
  if (substr($case, 0, 6) == '.case-') {
    $models[] = substr($case, 1, strpos($case, ':') - 1);
  }
}

natsort($models);
?>
<style>
:root {
    --case-size: 80px;
    --case-gap: 12px;
    --hover-color: var(--orange-800);
    --active-color: var(--orange-500);
    --font-family: clear-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.SelectCase {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--case-size), 1fr));
    gap: var(--case-gap);
    justify-items: center;
    /* offset the swal body automatically being a <pre>... :( */
    margin-top: -3rem;
    margin-bottom: -3rem;
}

.SelectCase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: var(--case-size);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    border-radius: 8px;
}

.SelectCase-item:hover {
    color: var(--hover-color);
}

.SelectCase-item--active {
    color: var(--active-color);
}

.SelectCase-item span {
    font-size: 40px;
    line-height: 1;
}
.SelectCase-item-name {
    font-family: var(--font-family);
    font-size: 10px;
    font-weight: 500;
    word-wrap: break-word;
    max-width: 100%;
}

/* Tablet and up */
@media (min-width: 640px) {
    :root {
        --case-size: 100px;
        --case-gap: 16px;
    }

    .SelectCase-item span {
        font-size: 56px;
    }

    .SelectCase-item-name {
        font-size: 11px;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    :root {
        --case-size: 128px;
        --case-gap: 24px;
    }

    .SelectCase-item span {
        font-size: 64px;
    }

    .SelectCase-item-name {
        font-size: 12px;
    }
}
</style>
<script>
window.select_case_file = '<?=$file?>';

function selectDone() {
    $('.sweet-alert').hide('fast').removeClass('nchan');
    swal.close();
    getCase();
}
function setCase(model) {
    $.post('/webGui/include/SelectCase.php',{
        mode: 'set',
        file: window.select_case_file,
        model: model,
    }, function() {
        selectDone();
    });
}
function importFile(file) {
    if (file.name.split('.').pop().toLowerCase() != 'png') return;
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        $.post('/webGui/include/SelectCase.php',{
            mode: 'file',
            file: window.select_case_file,
            data: e.target.result,
        }, function() {
            selectDone();
        });
    };
}
</script>
<div>
<div class="SelectCase">
    <?
    foreach ($models as $model) {
      $name = substr($model, 5);
      $title = str_replace('3u-avs-10-4', '3u-avs-10/4', $name);
      $caseActive = $name == $cmodel ? 'SelectCase-item--active' : '';
    ?>
    <div
      id="<?=$name?>"
      class="SelectCase-item <?=$caseActive?>"
      onclick="setCase('<?=$name?>')"
    >
      <span class="<?=$model?>"></span>
      <div class="SelectCase-item-name"><?=$title?></div>
    </div>
    <? } ?>

    <div
      id="Custom"
      class="SelectCase-item <?=$cmodel == 'case-model.png' ? 'SelectCase-item--active' : ''?>"
      onclick="$('input#file').trigger('click')"
    >
      <span class="fa fa-file-image-o"></span>
      <div class="SelectCase-item-name"><?=_('custom image')?></div>
    </div>
  </div>

  <input class="hidden" type="file" id="file" accept=".png" onchange="importFile(this.files[0])">
</div>