Files
Job-Info/officeaddin/Create Job Folder/src/taskpane/createFolder/createFolder.html
T

69 lines
3.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=()" />
<title>Create Folder Add-in</title>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<!-- MSAL for user authentication (one-time sign-in, automatic token refresh) -->
<script src="https://alcdn.msauth.net/browser/2.30.0/js/msal-browser.min.js"></script>
<!-- html2canvas and jspdf are now bundled via webpack -->
<style>
body { font-family: Arial, Helvetica, sans-serif; padding: 12px; }
button { padding:8px 12px; margin-top:8px; cursor: pointer; background: #0078d4; color: white; border: none; border-radius: 4px; }
button:hover { background: #005a9e; }
#preview { border:1px solid #ddd; padding:8px; margin-top:8px; max-width:800px; overflow:auto; display:none; }
#statusMessage { margin-top: 12px; font-weight: bold; }
#shareLink { margin-top: 8px; word-break: break-all; }
</style>
</head>
<body>
<h2>Create Job Folder & Upload PDF</h2>
<!-- Fatal error container (shown when the add-in cannot initialize) -->
<div id="fatalError" role="alert" aria-live="assertive" style="display:none; background:#fff4f4; border:1px solid #f5c2c2; color:#8b0000; padding:10px; margin-top:10px; border-radius:6px;">
<div style="font-size:120%; font-weight:700;">Could not be started</div>
<strong>Sorry — we can't load the add-in right now.</strong>
<div id="fatalErrorDetails" style="margin-top:6px; font-size:90%; color:#400000"></div>
<div style="margin-top:8px; display:flex; gap:8px; align-items:center;">
<button id="copyDiagnostics" style="padding:6px 8px; background:#444; color:white; border-radius:4px; border:none; cursor:pointer;">Copy diagnostics</button>
<button id="downloadDiagnostics" style="padding:6px 8px; background:#2b6cb0; color:white; border-radius:4px; border:none; cursor:pointer;">Download logs</button>
<span id="diagSaved" style="font-size:90%; color:#333; margin-left:8px; display:none">Saved</span>
</div>
<div style="margin-top:8px; font-size:90%">Try reloading the taskpane, sign out/in, or check your network connection.</div>
</div>
<p><strong>How it works:</strong></p>
<ul>
<li>Sign in once with your Microsoft account (automatic token refresh)</li>
<li>Click the button to read job info from Excel and generate/upload PDF</li>
<li>You become the file owner in SharePoint</li>
</ul>
<button id="createBtn">📁 Create folder & upload PDF</button>
<span id="spinner" role="status" aria-live="polite" style="display:none; margin-left:8px;">
<svg width="18" height="18" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" style="vertical-align:middle">
<circle cx="25" cy="25" r="20" fill="none" stroke="#0078d4" stroke-width="5" stroke-linecap="round" stroke-dasharray="31.4 31.4">
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
</circle>
</svg>
</span>
<p id="statusMessage"></p>
<div id="logContainer" style="margin-top:12px; max-height:160px; overflow:auto; background:#f9f9f9; border:1px solid #eee; padding:8px; font-family:monospace; font-size:12px;">
<strong style="display:block; margin-bottom:6px;">Activity Log</strong>
<div id="logArea"></div>
</div>
<div>
<strong>Share link:</strong>
<div id="shareLink"></div>
</div>
<div id="preview"></div>
<script src="createFolder.js"></script>
</body>
</html>