Luoteis-Pirkanmaan Paikallistoimikunta

Vapepa -muistilistojen upotekoodi

·

Kalle Hakala

Jos haluat omalle sivulle tai toimintoon tuon meidän muistilistojen upotekoodin, voit kopioida alla olevan HTML koodin käyttöösi. Jos haluat lisätä myös palaute-lomakkeen, sen koodi on alla.

Jos julkaiset koodin sivullasi, olisi suotavaa, että mainitset muistilistojen eteen töitä tehneiden henkilöiden Juho Aarnio, Tero Kaukonen, Raisa Kaukonen ja Kalle Hakala työn. Lähdemateriaalina on käytetty pääasiassa Vapepan peruskurssien ja VAK täydennyskoulutusten, Aki valosen toimittama ja Jari Lepistön kirjoittama ”MSO- etsinnän taktiikka ja profilointi” sekä Teemu Koiviston Karttahimmeli materiaalia.

Muistilistojen HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Training Modules</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Verdana, sans-serif;
            background-color: #FFFFFF;
            color: #000000;
            text-align: center;
        }

        .logo {
            margin-top: 20px;
        }

        .category-item, .module-item {
            cursor: pointer;
            padding: 10px 20px;
            margin: 10px auto;
            display: block;
            width: 90%;
            max-width: 500px;
            text-align: center;
            border-radius: 20px;
            transition: transform 0.2s;
        }

        .category-item {
            background-color: #006EC7;
            color: white;
        }

        .module-item {
            background-color: #E8DE12;
            margin-top: 5px;
        }

        .category-item:hover, .module-item:hover {
            transform: translateY(-2px);
        }

        .module-list {
            display: none;
            padding: 0;
            list-style-type: none;
        }

        .checklist-overlay {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            max-width: 500px;
            background-color: #FFFFFF;
            color: #000000;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 4px 6px rgba(0,0,0,.2);
            z-index: 1000;
            text-align: left;
            max-height: 80vh;
            overflow-y: auto;
        }

        .checklist-item:before {
            content: '✓';
            color: green;
            margin-right: 5px;
        }

        .print-icon {
            cursor: pointer;
            width: 24px;
            height: 24px;
            background: url('https://cdn-icons-png.flaticon.com/512/36/36026.png') no-repeat center center;
            background-size: contain;
            display: inline-block;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<img src="https://vapepa.fi/wp-content/themes/vapepa-theme/images/vapepa_logo.png" alt="Vapepa Logo" class="logo">

<div id="app"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    fetchSheetData();
});

function fetchSheetData() {
    const sheetId = '1ZPW2HO604lnvmLdsas1lUrJVPJHzlT71K1x9o72bNKg';
    const query = encodeURIComponent('Select *');
    const sheetUrl = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?tq=${query}`;

    fetch(sheetUrl)
    .then(response => response.text())
    .then(data => {
        const jsonData = JSON.parse(data.substring(data.indexOf('(') + 1, data.lastIndexOf(')')));
        const rows = jsonData.table.rows;
        const structuredData = processSheetData(rows);
        renderData(structuredData);
    })
    .catch(error => console.error('Error fetching data: ', error));
}

function processSheetData(rows) {
    let data = {};
    rows.forEach(row => {
        const cells = row.c.map(cell => cell ? cell.v : '');
        const [category, module, checklistItem, photoUrl] = cells;
        if (!data[category]) data[category] = {};
        if (!data[category][module]) data[category][module] = {items: [], photos: []};
        data[category][module].items.push(checklistItem);
        if (cells.length > 3 && photoUrl) data[category][module].photos.push(photoUrl);
    });
    return data;
}

function renderData(data) {
    const app = document.getElementById('app');
    Object.entries(data).forEach(([categoryName, modules]) => {
        const categoryDiv = document.createElement('div');
        categoryDiv.textContent = categoryName;
        categoryDiv.classList.add('category-item');
        app.appendChild(categoryDiv);

        const modulesList = document.createElement('div');
        modulesList.classList.add('module-list');

        Object.entries(modules).forEach(([moduleName, moduleData]) => {
            const moduleDiv = document.createElement('div');
            moduleDiv.textContent = moduleName;
            moduleDiv.classList.add('module-item');
            modulesList.appendChild(moduleDiv);

            const overlay = document.createElement('div');
            overlay.classList.add('checklist-overlay');
            moduleData.items.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.classList.add('checklist-item');
                itemDiv.textContent = item;
                overlay.appendChild(itemDiv);
            });

            moduleData.photos.forEach(photoUrl => {
                const img = document.createElement('img');
                img.src = photoUrl;
                img.style.width = '100%'; // Adjust styling as needed
                img.style.marginTop = '10px';
                overlay.appendChild(img);
            });

            const printIcon = document.createElement('div');
            printIcon.classList.add('print-icon');
            printIcon.onclick = () => printChecklist(moduleName, moduleData);
            overlay.appendChild(printIcon);

            moduleDiv.appendChild(overlay);

            moduleDiv.addEventListener('click', function(event) {
                overlay.style.display = 'block';
                event.stopPropagation();
            });
        });

        categoryDiv.addEventListener('click', function() {
            const isDisplayed = modulesList.style.display === 'block';
            modulesList.style.display = isDisplayed ? 'none' : 'block';
        });

        app.appendChild(modulesList);
    });

    document.addEventListener('click', function() {
        document.querySelectorAll('.checklist-overlay').forEach(function(overlay) {
            overlay.style.display = 'none';
        });
    });
}

function printChecklist(moduleName, moduleData) {
    const printWindow = window.open('', '_blank');
    const contentHtml = `
        <html>
        <head>
            <title>Print Checklist</title>
            <style>
                body {
                    font-family: 'Verdana', sans-serif;
                    margin: 0;
                    padding: 1cm;
                    box-sizing: border-box;
                }
                @page {
                    size: A5;
                    margin: 0;
                }
                .content {
                    border: 1px solid #000; /* For cutting marks */
                    height: calc(210mm - 2cm); /* Adjust height for padding */
                    width: calc(148mm - 2cm); /* Adjust width for padding */
                }
                .logo {
                    width: 100px;
                    margin: 0;
                    padding: 10px;
                }
                ul {
                    list-style-type: none;
                    padding: 10;
                }
                ul li:before {
                    content: '\13\
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Training Modules</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Verdana, sans-serif;
            background-color: #FFFFFF;
            color: #000000;
            text-align: center;
        }

        .logo {
            margin-top: 20px;
        }

        .category-item, .module-item {
            cursor: pointer;
            padding: 10px 20px;
            margin: 10px auto;
            display: block;
            width: 90%;
            max-width: 500px;
            text-align: center;
            border-radius: 20px;
            transition: transform 0.2s;
        }

        .category-item {
            background-color: #006EC7;
            color: white;
        }

        .module-item {
            background-color: #E8DE12;
            margin-top: 5px;
        }

        .category-item:hover, .module-item:hover {
            transform: translateY(-2px);
        }

        .module-list {
            display: none;
            padding: 0;
            list-style-type: none;
        }

        .checklist-overlay {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            max-width: 500px;
            background-color: #FFFFFF;
            color: #000000;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 4px 6px rgba(0,0,0,.2);
            z-index: 1000;
            text-align: left;
            max-height: 80vh;
            overflow-y: auto;
        }

        .checklist-item:before {
            content: '✓';
            color: green;
            margin-right: 5px;
        }

        .print-icon {
            cursor: pointer;
            width: 24px;
            height: 24px;
            background: url('https://cdn-icons-png.flaticon.com/512/36/36026.png') no-repeat center center;
            background-size: contain;
            display: inline-block;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<img src="https://vapepa.fi/wp-content/themes/vapepa-theme/images/vapepa_logo.png" alt="Vapepa Logo" class="logo">

<div id="app"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    fetchSheetData();
});

function fetchSheetData() {
    const sheetId = '1ZPW2HO604lnvmLdsas1lUrJVPJHzlT71K1x9o72bNKg';
    const query = encodeURIComponent('Select *');
    const sheetUrl = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?tq=${query}`;

    fetch(sheetUrl)
    .then(response => response.text())
    .then(data => {
        const jsonData = JSON.parse(data.substring(data.indexOf('(') + 1, data.lastIndexOf(')')));
        const rows = jsonData.table.rows;
        const structuredData = processSheetData(rows);
        renderData(structuredData);
    })
    .catch(error => console.error('Error fetching data: ', error));
}

function processSheetData(rows) {
    let data = {};
    rows.forEach(row => {
        const cells = row.c.map(cell => cell ? cell.v : '');
        const [category, module, checklistItem, photoUrl] = cells;
        if (!data[category]) data[category] = {};
        if (!data[category][module]) data[category][module] = {items: [], photos: []};
        data[category][module].items.push(checklistItem);
        if (cells.length > 3 && photoUrl) data[category][module].photos.push(photoUrl);
    });
    return data;
}

function renderData(data) {
    const app = document.getElementById('app');
    Object.entries(data).forEach(([categoryName, modules]) => {
        const categoryDiv = document.createElement('div');
        categoryDiv.textContent = categoryName;
        categoryDiv.classList.add('category-item');
        app.appendChild(categoryDiv);

        const modulesList = document.createElement('div');
        modulesList.classList.add('module-list');

        Object.entries(modules).forEach(([moduleName, moduleData]) => {
            const moduleDiv = document.createElement('div');
            moduleDiv.textContent = moduleName;
            moduleDiv.classList.add('module-item');
            modulesList.appendChild(moduleDiv);

            const overlay = document.createElement('div');
            overlay.classList.add('checklist-overlay');
            moduleData.items.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.classList.add('checklist-item');
                itemDiv.textContent = item;
                overlay.appendChild(itemDiv);
            });

            moduleData.photos.forEach(photoUrl => {
                const img = document.createElement('img');
                img.src = photoUrl;
                img.style.width = '100%'; // Adjust styling as needed
                img.style.marginTop = '10px';
                overlay.appendChild(img);
            });

            const printIcon = document.createElement('div');
            printIcon.classList.add('print-icon');
            printIcon.onclick = () => printChecklist(moduleName, moduleData);
            overlay.appendChild(printIcon);

            moduleDiv.appendChild(overlay);

            moduleDiv.addEventListener('click', function(event) {
                overlay.style.display = 'block';
                event.stopPropagation();
            });
        });

        categoryDiv.addEventListener('click', function() {
            const isDisplayed = modulesList.style.display === 'block';
            modulesList.style.display = isDisplayed ? 'none' : 'block';
        });

        app.appendChild(modulesList);
    });

    document.addEventListener('click', function() {
        document.querySelectorAll('.checklist-overlay').forEach(function(overlay) {
            overlay.style.display = 'none';
        });
    });
}

function printChecklist(moduleName, moduleData) {
    const printWindow = window.open('', '_blank');
    const contentHtml = `
        <html>
        <head>
            <title>Print Checklist</title>
            <style>
                body {
                    font-family: 'Verdana', sans-serif;
                    margin: 0;
                    padding: 1cm;
                    box-sizing: border-box;
                }
                @page {
                    size: A5;
                    margin: 0;
                }
                .content {
                    border: 1px solid #000; /* For cutting marks */
                    height: calc(210mm - 2cm); /* Adjust height for padding */
                    width: calc(148mm - 2cm); /* Adjust width for padding */
                }
                .logo {
                    width: 100px;
                    margin: 0;
                    padding: 10px;
                }
                ul {
                    list-style-type: none;
                    padding: 10;
                }
                ul li:before {
                    content: '\\2713\\0020';
                    color: green;
                }
            </style>
        </head>
        <body>
            <div class="content">
                <img src="https://vapepa.fi/wp-content/themes/vapepa-theme/images/vapepa_logo.png" class="logo" alt="Vapepa Logo">
                <h2>${moduleName}</h2>
                <ul>
                    ${moduleData.items.map(item => `<li>${item}</li>`).join('')}
                </ul>
                ${moduleData.photos.map(photoUrl => `<img src="${photoUrl}" style="width:100%;margin-top:10px;">`).join('')}
            </div>
        </body>
        </html>
    `;
    printWindow.document.write(contentHtml);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(() => {
        printWindow.print();
        printWindow.close();
    }, 500);
}
</script>
</body>
</html>
20';
                    color: green;
                }
            </style>
        </head>
        <body>
            <div class="content">
                <img src="https://vapepa.fi/wp-content/themes/vapepa-theme/images/vapepa_logo.png" class="logo" alt="Vapepa Logo">
                <h2>${moduleName}</h2>
                <ul>
                    ${moduleData.items.map(item => `<li>${item}</li>`).join('')}
                </ul>
                ${moduleData.photos.map(photoUrl => `<img src="${photoUrl}" style="width:100%;margin-top:10px;">`).join('')}
            </div>
        </body>
        </html>
    `;
    printWindow.document.write(contentHtml);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(() => {
        printWindow.print();
        printWindow.close();
    }, 500);
}
</script>
</body>
</html>
Palautelomakkeen HTML koodi
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfgxJxHRDbJJQNO2aq8acaPZJPmNvzc7IvWnIvN6jXJFkFkhw/viewform?embedded=true" width="640" height="748" frameborder="0" marginheight="0" marginwidth="0">Ladataan…</iframe>

Mielenkiintoinen sivu? jaa ystävillesikin!

Avainsanat: