Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Open Training Events</title>
- <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
- <style>
- body {
- font-family: "Arial";
- }
- </style>
- </head>
- <link rel="stylesheet" href="{{ url_for('static', filename='css/success.css') }}" rel="stylesheet" type="text/css">
- <link rel="stylesheet" href="{{ url_for('static', filename='css/buttons.css') }}" rel="stylesheet" type="text/css">
- <style>
- body {
- background-image: url('https://internal/map_background.gif');
- }
- </style>
- <style>
- img {
- width: 11%;
- height: auto;
- }
- </style>
- <p style="text-align:center;"><img src="{{url_for('static', filename='loft_front.png')}}" ></p>
- <center>
- <iframe src="https://free.timeanddate.com/clock/i767eypi/n770/fs12/tct/pct/ftb/tt0/th1" frameborder="0" width="252" height="16" allowtransparency="true"></iframe>
- <body>
- <div><center>
- <div id="table"></div>
- </div>
- <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
- <script>
- const tableDiv = document.getElementById('table');
- const updateUrl = (prev, query) => {
- return prev + (prev.indexOf('?') >= 0 ? '&' : '?') + new URLSearchParams(query).toString();
- };
- const editableCellAttributes = (data, row, col) => {
- if (row) {
- return {contentEditable: 'true', 'data-element-id': row.cells[0].data};
- }
- else {
- return {};
- }
- };
- new gridjs.Grid({
- columns: [
- { id: 'id', name: 'Event ID', width: '130px', sort: false},
- { id: 'aircraft', name: 'Aircraft', width: '130px', 'attributes': editableCellAttributes },
- { id: 'training_under_part', name: 'Part', width: '120px', 'attributes': editableCellAttributes },
- { id: 'event_type', name: 'Event Type', sort: false, 'attributes': editableCellAttributes },
- { id: 'event_start_time', name: 'Start Time', sort: false, 'attributes': editableCellAttributes },
- { id: 'event_date', name: 'Event Date', sort: false, 'attributes': editableCellAttributes },
- { id: 'client', name: 'Client', sort: false, 'attributes': editableCellAttributes },
- { id: 'notes', name: 'Notes', sort: false, 'attributes': editableCellAttributes },
- { id: 'assigned', name: 'Assigned', sort: false, 'attributes': editableCellAttributes },
- { id: 'instructor_accepted', name: 'Instructor', sort: false, 'attributes': editableCellAttributes },
- { id: 'delete_link', name: 'Delete', sort: false },
- ],
- style: {
- table: {
- border: '3px solid #ccc'
- },
- th: {
- 'background-color': 'rgba(0, 0, 0, 0.2)',
- color: '#000',
- 'border-bottom': '3px solid #ccc',
- 'text-align': 'center'
- },
- td: {
- 'text-align': 'center',
- 'font-size': '14px',
- 'font-family': 'Arial'
- }
- },
- server: {
- url: '/api/data',
- then: results => results.data,
- total: results => results.total,
- },
- search: {
- enabled: true,
- server: {
- url: (prev, search) => {
- return updateUrl(prev, {search});
- },
- },
- },
- sort: {
- enabled: true,
- multiColumn: true,
- server: {
- url: (prev, columns) => {
- const columnIds = ['id', 'aircraft', 'training_under_part', 'event_type', 'event_start_time', 'event_date', 'client', 'notes', 'assigned', 'instructor_accepted', 'delete_link'];
- const sort = columns.map(col => (col.direction === 1 ? '+' : '-') + columnIds[col.index]);
- return updateUrl(prev, {sort});
- },
- },
- },
- pagination: {
- enabled: true,
- server: {
- url: (prev, page, limit) => {
- return updateUrl(prev, {start: page * limit, length: limit});
- },
- },
- },
- }).render(tableDiv);
- let savedValue;
- tableDiv.addEventListener('focusin', ev => {
- if (ev.target.tagName === 'TD') {
- savedValue = ev.target.textContent;
- }
- });
- tableDiv.addEventListener('focusout', ev => {
- if (ev.target.tagName === 'TD') {
- if (savedValue !== ev.target.textContent) {
- fetch('/api/data', {
- method: 'POST',
- headers: {'Content-Type': 'application/json'},
- body: JSON.stringify({
- id: ev.target.dataset.elementId,
- [ev.target.dataset.columnId]: ev.target.textContent
- }),
- });
- }
- savedValue = undefined;
- }
- });
- tableDiv.addEventListener('keydown', ev => {
- if (ev.target.tagName === 'TD') {
- if (ev.key === 'Escape') {
- ev.target.textContent = savedValue;
- ev.target.blur();
- }
- else if (ev.key === 'Enter') {
- ev.preventDefault();
- ev.target.blur();
- }
- }
- });
- </script><br>
- <center>
- <a class="tank_manager_button" href="{{ url_for('add_events') }}">Add Training Event</a><br><br>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement