cerchez07/elm-0.19-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix some localForage stuff

Browse Source
This commit is contained in:
Richard Feldman
2018-08-12 14:36:05 -04:00
parent fc4a70fc28
commit 8dfa9f70b7
4 changed files with 2823 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
intro/part9/README.md
View File

@@ -12,6 +12,11 @@ Then open `http://localhost:3000` in your browser.
## Exercise ## Exercise
We need to make login work. Currently it doesn't actually send a HTTP request to the server. Look at `intro/server/public/index.html` to see how the localforage ports are
hooked up on the JavaScript side.
We'll fix this by editing `src/Page/Login.elm` and resolving the TODOs there. The exercise is to add the corresponding ports to `src/Session.elm`. See the
TODOs in that file for more information!
When you're done, you should once again be able to sign up for a new account,
log in, etc.

2797
intro/server/public/assets/localForage.js Normal file
View File

File diff suppressed because it is too large Load Diff

7
intro/server/public/assets/localForage.min.js vendored
View File

File diff suppressed because one or more lines are too long

38
intro/server/public/index.html
View File

@@ -4,39 +4,39 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Elm Workshop</title> <title>Elm Workshop</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on --> <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"> <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="/fonts.css" rel="stylesheet" type="text/css"> <link href="/fonts.css" rel="stylesheet" type="text/css">
<!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
<link rel="stylesheet" href="/main.css"> <link rel="stylesheet" href="/main.css">
<script src="/elm.js"></script> <!-- We'll use localForage as a JavaScript interop example in part9! -->
<script src="/assets/localForage.js"></script>
<script src="elm.js"></script>
</head> </head>
<body> <body>
<script> <script>
var app = Elm.Main.init({flags: localStorage.session || null}); // 👋 Hi there!
//
// If you're working on the JS interop exercise for part9,
// all the info you need on the JS side is in this <script> right here.
//
// On the Elm side, you'll need to make changes to `part9/src/Session.elm`.
localforage.getItem("session", function(err, session) {
var app = Elm.Main.init({flags: session});
app.ports.storeSession.subscribe(function(session) { app.ports.storeSession.subscribe(function(newErr, newSession) {
localStorage.session = session; localforage.setItem("session", newSession, function() {
app.ports.onSessionChange.send(newSession);
// Report that the new session was stored succesfully. });
setTimeout(function() { app.ports.onSessionChange.send(session); }, 0); });
}); });
window.addEventListener("storage", function(event) {
if (event.storageArea === localStorage && event.key === "session") {
app.ports.onSessionChange.send(event.newValue);
}
}, false);
</script> </script>
</body> </body>
</html> </html>